mediacube-ui-v2 0.0.289 → 0.0.291

package/dist/components/elements/McButton/McButton.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as V, defineAsyncComponent as F, inject as M, computed as l, ref as h, onMounted as I, withDirectives as N, openBlock as r, createBlock as O, resolveDynamicComponent as P, mergeProps as D, withCtx as W, createElementBlock as c, renderSlot as p, createCommentVNode as u, createVNode as H, unref as k, getCurrentInstance as K } from "vue";
+import { defineComponent as V, defineAsyncComponent as F, inject as M, computed as a, ref as h, onMounted as I, withDirectives as N, openBlock as s, createBlock as O, resolveDynamicComponent as P, mergeProps as D, withCtx as W, createElementBlock as c, renderSlot as p, createCommentVNode as u, createVNode as H, unref as k, getCurrentInstance as K } from "vue";
 import { FontWeights as R } from "../../../types/styles/FontWeights.js";
 import { useTooltip as j } from "../../../composables/useTooltip2.js";
 import { TooltipPositions as E, TooltipSizes as q } from "../../../enums/Tooltip2.js";
@@ -218,14 +218,14 @@ const J = {
   },
   emits: ["blur", "click"],
   setup(d, { emit: B }) {
-    const _ = F(() => import("../McSvgIcon/McSvgIcon.vue.js")), f = M("dsOptions", {}), C = j(), w = l(() => {
+    const _ = F(() => import("../McSvgIcon/McSvgIcon.vue.js")), f = M("dsOptions", {}), C = j(), w = a(() => {
       let e = {};
       return t.tooltip && (e = {
         content: t.tooltip,
         size: q.M,
         placement: t.tooltipPlacement || E.Top
       }), e;
-    }), t = d, a = G("button"), x = h(null), m = h(!1), b = B, S = l(() => ({
+    }), t = d, l = G("button"), x = h(null), m = h(!1), b = B, S = a(() => ({
       [`mc-button--variation-${t.variation}`]: !!t.variation,
       [`mc-button--size-${t.size}`]: !!t.size,
       [`mc-button--text-align-${t.textAlign}`]: !!t.textAlign,
@@ -243,10 +243,10 @@ const J = {
       "mc-button--bg-flat": t.bgFlat,
       [`mc-button--type-${i.value.type}`]: !!i.value.type,
       "mc-button--inactive": t.inactive
-    })), y = l(() => t.variation || a.component.variation), i = l(() => {
-      const e = y.value, o = e.split("-"), s = o[o.length - 1];
-      let v = e.replace(`-${s}`, "");
-      switch (s) {
+    })), y = a(() => t.variation || l.component.variation), i = a(() => {
+      const e = y.value, o = e.split("-"), r = o[o.length - 1];
+      let v = e.replace(`-${r}`, "");
+      switch (r) {
         case n.Link:
         case n.Flat:
         case n.Outline:
@@ -259,10 +259,10 @@ const J = {
       }
       return {
         color: v,
-        type: s
+        type: r
       };
-    }), T = l(() => {
-      let e, o, s = t.activeTextColor || a.component.activeTextColor;
+    }), T = a(() => {
+      let e, o, r = t.activeTextColor || l.component.activeTextColor;
       switch (i.value.type) {
         case n.Link:
         case n.Flat:
@@ -285,26 +285,25 @@ const J = {
         }
       }
       return {
-        "--mc-button-secondary-color": t.secondaryColor && a.colors[t.secondaryColor],
-        "--mc-button-background-color": y.value && a.colors[i.value.color],
-        "--mc-button-active-text-color": s && a.colors[s],
+        "--mc-button-secondary-color": t.secondaryColor && l.colors[t.secondaryColor],
+        "--mc-button-background-color": y.value && l.colors[i.value.color],
+        "--mc-button-active-text-color": r && l.colors[r],
         "--mc-button-font-weight": t.weight && R[t.weight],
         "--mc-button-hover-brightness": e,
-        "--mc-button-text-color": o && a.colors[o]
+        "--mc-button-text-color": o && l.colors[o]
       };
-    }), $ = l(() => {
+    }), $ = a(() => {
       const e = "a";
       return t.to || t.href ? e : t.defaultTag;
-    }), g = l(() => i.value.type === n.Link), L = l(() => {
+    }), g = a(() => i.value.type === n.Link), L = a(() => {
       let e = {
-        to: t.to,
-        href: t.href,
+        href: t.href || t.to,
         disabled: !1,
-        rel: "",
+        rel: "noopener noreferrer",
         type: t.type,
         tabindex: t.tabindex
       };
-      return t.to ? delete e.href : t.href ? delete e.to : (t.disabled || t.loading) && (e.disabled = !0), g.value && (e.rel = "noreferrer"), e;
+      return (t.disabled || t.loading) && (e.disabled = !0), g.value && (e.rel = "noreferrer"), e;
     }), z = (e) => {
       b("blur", e);
     }, A = (e) => {
@@ -316,7 +315,7 @@ const J = {
     return I(() => {
       const o = K()?.vnode;
       m.value = !!o?.props?.onClick;
-    }), (e, o) => N((r(), O(P($.value), D({ ref: x.value }, { ...L.value }, {
+    }), (e, o) => N((s(), O(P($.value), D({ ref: x.value }, { ...L.value }, {
       class: ["mc-button", S.value],
       exact: d.exact,
       style: T.value,
@@ -324,23 +323,23 @@ const J = {
       onClick: A
     }), {
       default: W(() => [
-        e.$slots["icon-prepend"] ? (r(), c("span", J, [
+        e.$slots["icon-prepend"] ? (s(), c("span", J, [
           p(e.$slots, "icon-prepend")
         ])) : u("", !0),
-        d.loading ? (r(), c("span", Q, [
+        d.loading ? (s(), c("span", Q, [
           H(k(_), {
             class: "mc-button__loader-icon",
             type: "div",
             name: "loader"
           })
         ])) : u("", !0),
-        e.$slots.default ? (r(), c("span", U, [
+        e.$slots.default ? (s(), c("span", U, [
           p(e.$slots, "default")
         ])) : u("", !0),
-        e.$slots["icon-append"] ? (r(), c("span", X, [
+        e.$slots["icon-append"] ? (s(), c("span", X, [
           p(e.$slots, "icon-append")
         ])) : u("", !0),
-        g.value ? u("", !0) : (r(), c("div", Y))
+        g.value ? u("", !0) : (s(), c("div", Y))
       ]),
       _: 3
     }, 16, ["class", "exact", "style"])), [

package/dist/components/patterns/McChat/McChatForm/McChatForm.vue2.js

@@ -1,7 +1,7 @@
-import { defineComponent as g, defineAsyncComponent as o, ref as w, openBlock as M, createElementBlock as S, createElementVNode as V, withModifiers as l, createVNode as n, unref as e, withCtx as r, withKeys as d } from "vue";
+import { defineComponent as g, defineAsyncComponent as o, ref as w, openBlock as M, createElementBlock as S, createElementVNode as V, withKeys as m, withModifiers as n, createVNode as a, unref as e, withCtx as i } from "vue";
 import { ButtonType as x, ButtonSize as b } from "../../../../enums/ui/Button2.js";
 import { InputTypes as B } from "../../../../enums/Input2.js";
-const C = { class: "mc-chat-form" }, K = /* @__PURE__ */ g({
+const C = { class: "mc-chat-form" }, z = ["onKeydown"], N = /* @__PURE__ */ g({
   __name: "McChatForm",
   props: {
     /**
@@ -35,68 +35,69 @@ const C = { class: "mc-chat-form" }, K = /* @__PURE__ */ g({
     }
   },
   emits: ["update:modelValue", "submit"],
-  setup(a, { emit: p }) {
-    const s = o(() => import("../../../elements/McAvatar/McAvatar.vue.js")), u = o(() => import("../../McPreview/McPreview.vue.js")), f = o(() => import("../../../elements/McSvgIcon/McSvgIcon.vue.js")), h = o(() => import("../../../elements/McButton/McButton.vue.js")), v = o(() => import("../../../elements/McFieldText/McFieldText.vue.js")), m = p, t = w(a.modelValue), y = (c) => {
-      t.value = c, m("update:modelValue", c);
-    }, i = () => {
-      t.value?.trim() !== "" && (t.value = "", m("submit"));
-    }, _ = () => {
+  setup(r, { emit: p }) {
+    const u = o(() => import("../../../elements/McAvatar/McAvatar.vue.js")), f = o(() => import("../../McPreview/McPreview.vue.js")), h = o(() => import("../../../elements/McSvgIcon/McSvgIcon.vue.js")), v = o(() => import("../../../elements/McButton/McButton.vue.js")), _ = o(() => import("../../../elements/McFieldText/McFieldText.vue.js")), s = p, t = w(r.modelValue), y = (c) => {
+      t.value = c, s("update:modelValue", c);
+    }, l = () => {
+      t.value?.trim() !== "" && (t.value = "", s("submit"));
+    }, d = () => {
       t.value += `
 `;
     };
-    return (c, k) => (M(), S("div", C, [
+    return (c, T) => (M(), S("div", C, [
       V("form", {
-        onSubmit: l(i, ["prevent"])
+        onSubmit: n(l, ["prevent"]),
+        onKeydown: [
+          m(n(l, ["prevent", "exact"]), ["enter", "native"]),
+          m(n(d, ["ctrl"]), ["enter", "native"]),
+          m(n(d, ["shift"]), ["enter", "native"])
+        ]
       }, [
-        n(e(u), { class: "mc-chat-form__inner" }, {
-          left: r(() => [
-            n(e(s), {
+        a(e(f), { class: "mc-chat-form__inner" }, {
+          left: i(() => [
+            a(e(u), {
               class: "mc-chat-form__avatar",
               size: "400",
               rounded: "",
-              src: a.avatar
+              src: r.avatar
             }, null, 8, ["src"])
           ]),
-          top: r(() => [
-            n(e(v), {
+          top: i(() => [
+            a(e(_), {
               name: "chat-field",
               class: "mc-chat-form__input",
               type: e(B).TextareaAutosize,
               "min-height": 40,
               "max-height": 250,
               "model-value": t.value,
-              placeholder: a.placeholder,
-              "onUpdate:modelValue": y,
-              onKeydown: [
-                d(l(i, ["prevent", "exact"]), ["enter", "native"]),
-                d(l(_, ["ctrl"]), ["enter", "native"])
-              ]
+              placeholder: r.placeholder,
+              "onUpdate:modelValue": y
             }, {
-              append: r(() => [
-                n(e(h), {
+              append: i(() => [
+                a(e(v), {
                   class: "mc-chat-form__btn",
                   variation: "main-link",
                   size: e(b).MCompact,
                   type: e(x).Submit,
                   rounded: "",
-                  loading: a.loading,
-                  onClick: l(i, ["prevent"])
+                  loading: r.loading,
+                  onClick: n(l, ["prevent"])
                 }, {
-                  "icon-append": r(() => [
-                    n(e(f), { name: "send_solid" })
+                  "icon-append": i(() => [
+                    a(e(h), { name: "send_solid" })
                   ]),
                   _: 1
                 }, 8, ["size", "type", "loading"])
               ]),
               _: 1
-            }, 8, ["type", "model-value", "placeholder", "onKeydown"])
+            }, 8, ["type", "model-value", "placeholder"])
           ]),
           _: 1
         })
-      ], 32)
+      ], 40, z)
     ]));
   }
 });
 export {
-  K as default
+  N as default
 };

package/dist/composables/useTheme.js

@@ -1,43 +1,14 @@
-import { inject as m } from "vue";
-import { Colors as c } from "../types/styles/Colors.js";
-import { UiThemes as n } from "../types/styles/ColorTheme.js";
-const r = /* @__PURE__ */ new Map();
-function h(o, e) {
-  return Object.defineProperties(
-    {},
-    {
-      colors: {
-        enumerable: !0,
-        get() {
-          return e?.colors?.value || c;
-        }
-      },
-      components: {
-        enumerable: !0,
-        get() {
-          return e.theme ? (
-            // @ts-ignore
-            e?.themes?.value?.[e.theme]?.components ?? n.light.components
-          ) : n.light.components;
-        }
-      },
-      component: {
-        enumerable: !0,
-        get() {
-          const t = e.theme ? (
-            // @ts-ignore
-            e?.themes?.value?.[e.theme]?.components ?? n.light.components
-          ) : n.light.components;
-          return o && t?.[o] ? t[o] : {};
-        }
-      }
-    }
-  );
-}
-function i(o) {
-  const e = m("dsOptions", {}), t = o ?? "";
-  return r.has(t) || r.set(t, h(t, e)), r.get(t);
+import { inject as s, reactive as m } from "vue";
+import { Colors as r } from "../types/styles/Colors.js";
+import { UiThemes as c } from "../types/styles/ColorTheme.js";
+function f(t) {
+  const o = s("dsOptions", {}), e = o.theme ? o.themes?.[o.theme]?.components : c.light.components, n = t ? e[t] : {};
+  return m({
+    colors: o.colors || r,
+    components: e,
+    component: n
+  });
 }
 export {
-  i as useTheme
+  f as useTheme
 };

package/dist/composables/useTheme2.js

@@ -1,40 +1,14 @@
-import { inject as m } from "vue";
-import { Colors as c } from "../types/styles/Colors.js";
-import { UiThemes as n } from "../types/styles/ColorTheme.js";
-const r = /* @__PURE__ */ new Map();
-function h(o, e) {
-  return Object.defineProperties({}, {
-    colors: {
-      enumerable: !0,
-      get() {
-        return e?.colors?.value || c;
-      }
-    },
-    components: {
-      enumerable: !0,
-      get() {
-        return e.theme ? (
-          // @ts-ignore
-          e?.themes?.value?.[e.theme]?.components ?? n.light.components
-        ) : n.light.components;
-      }
-    },
-    component: {
-      enumerable: !0,
-      get() {
-        const t = e.theme ? (
-          // @ts-ignore
-          e?.themes?.value?.[e.theme]?.components ?? n.light.components
-        ) : n.light.components;
-        return o && t?.[o] ? t[o] : {};
-      }
-    }
+import { inject as s, reactive as m } from "vue";
+import { Colors as r } from "../types/styles/Colors.js";
+import { UiThemes as c } from "../types/styles/ColorTheme.js";
+function f(t) {
+  const o = s("dsOptions", {}), e = o.theme ? o.themes?.[o.theme]?.components : c.light.components, n = t ? e[t] : {};
+  return m({
+    colors: o.colors || r,
+    components: e,
+    component: n
   });
 }
-function i(o) {
-  const e = m("dsOptions", {}), t = o ?? "";
-  return r.has(t) || r.set(t, h(t, e)), r.get(t);
-}
 export {
-  i as useTheme
+  f as useTheme
 };

package/dist/index.js

@@ -1,42 +1,34 @@
-import { computed as s } from "vue";
-import { setStoredAppContext as n } from "./storedAppContext.js";
-import { Themes as i } from "./enums/Themes2.js";
-import { UiThemes as l, ThemesColors as c } from "./types/styles/ColorTheme.js";
-import d from "./assets/img/no_user.png.js";
-import { useHelper as f } from "./composables/useHelper2.js";
-import { createProxy as a } from "./utils/proxy2.js";
-const p = f();
-function h(o, e) {
-  if (!e) return o;
-  const t = Object.entries(e).filter(([, r]) => r !== void 0);
-  return {
-    ...o,
-    ...Object.fromEntries(t)
-  };
-}
-const j = {
+import { setStoredAppContext as s } from "./storedAppContext.js";
+import { Themes as l } from "./enums/Themes2.js";
+import { UiThemes as a, ThemesColors as h } from "./types/styles/ColorTheme.js";
+import c from "./assets/img/no_user.png.js";
+import { useHelper as d } from "./composables/useHelper2.js";
+import { createProxy as r } from "./utils/proxy2.js";
+const n = d(), C = {
   install(o, e = {}) {
     const t = {
       drawerComponents: {},
       modalComponents: {},
       toasts: {},
-      defaultAvatar: d,
-      colors: c,
-      themes: l,
-      theme: i.Light,
+      defaultAvatar: c,
+      colors: h,
+      themes: a,
+      theme: l.Light,
       meta: {
         router_push: null
       }
-    }, r = p.deepMerge(t.themes, e.themes), m = {
+    };
+    n.deepMerge(t.themes, e.themes);
+    const m = {
       ...t,
       ...e,
-      colors: s(() => h(t.colors, e.colors)),
-      themes: s(() => r),
-      meta: e.meta ? a(t.meta, e.meta) : t.meta
+      colors: e.colors ? r(t.colors, e.colors) : t.colors,
+      themes: e.themes ? r(t.themes, e.themes) : t.themes,
+      meta: e.meta ? r(t.meta, e.meta) : t.meta
     };
-    o.config.globalProperties.$dsOptions = m, o.provide("dsOptions", m), n(o._context ?? null);
+    o.config.globalProperties.$dsOptions = m, o.provide("dsOptions", m), s(o._context ?? null);
   }
 };
 export {
-  j as default
+  C as default
 };

package/dist/types/composables/useTheme.d.ts

@@ -1,7 +1,139 @@
-type ThemeReactive = {
-    readonly colors: Record<string, string>;
-    readonly components: Record<string, unknown>;
-    readonly component: Record<string, unknown>;
+export declare function useTheme(component?: string): {
+    colors: Record<string, string> | {
+        main: string;
+        purple: string;
+        "hover-purple": string;
+        "light-purple": string;
+        "bg-purple": string;
+        "lighter-purple": string;
+        black: string;
+        "outline-light": string;
+        "dark-gray": string;
+        gray: string;
+        "outline-gray": string;
+        "hover-gray": string;
+        "light-gray": string;
+        "bg-gray": string;
+        white: string;
+        "hover-blue": string;
+        blue: string;
+        "light-blue": string;
+        "lighter-blue": string;
+        "dark-orange": string;
+        orange: string;
+        yellow: string;
+        "dark-red": string;
+        red: string;
+        "bright-pink": string;
+        "pale-pink": string;
+        "dark-green": string;
+        green: string;
+        toxic: string;
+        ultraviolet: string;
+        pinkish: string;
+        azure: string;
+        turquoise: string;
+        "darken-turquoise": string;
+        transparent: string;
+    };
+    components: {
+        badge: {
+            variation: string;
+        };
+        button: {
+            variation: string;
+        };
+        chip: {
+            variation: string;
+            textColor: string;
+        };
+        cropper: {
+            color: string;
+        };
+        datepicker: {
+            color: string;
+        };
+        draggable: {
+            variation: string;
+        };
+        checkbox: {
+            color: string;
+        };
+        radio: {
+            color: string;
+        };
+        range: {
+            color: string;
+        };
+        select: {
+            color: string;
+            selected: string;
+        };
+        fieldText: {
+            color: string;
+        };
+        fieldToggle: {
+            color: string;
+            bg: string;
+        };
+        bottomLoader: {
+            border: string;
+        };
+        noData: {
+            link: string;
+        };
+        notification: {
+            variation: string;
+        };
+        progress: {
+            color: string;
+            helpText: string;
+        };
+        separator: {
+            color: string;
+        };
+        spinDigit: {
+            color: string;
+        };
+        spinNumber: {
+            color: string;
+        };
+        title: {
+            color: string;
+        };
+        tooltip: {
+            color: string;
+            textColor: string;
+        };
+        dropdown: {
+            itemColor: string;
+        };
+        filter: {
+            color: string;
+            chipColor: string;
+            button: string;
+        };
+        overlay: {
+            bg: string;
+            border: string;
+        };
+        sidebar: {
+            chip: string;
+            activeLink: string;
+        };
+        tab: {
+            count: string;
+        };
+        tabs: {
+            color: string;
+            accentColor: string;
+        };
+        tableCard: {
+            backLink: string;
+        };
+        toast: {
+            variation: string;
+        };
+    } | undefined;
+    component: any;
 };
-export declare function useTheme(component?: string): ThemeReactive;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediacube-ui-v2",
-  "version": "0.0.289",
+  "version": "0.0.291",
   "license": "MIT",
   "description": "Design system for Mediacube services",
   "sideEffects": [