vlite3 1.4.14 → 1.4.16

package/components/CategoryManager/CategoryManager.vue2.js

@@ -22,8 +22,8 @@ import qe from "../IconPicker.vue.js";
 /* empty css                                 */
 /* empty css                 */
 /* empty css                                         */
-/* empty css                                    */
-/* empty css                                        */
+/* empty css                                     */
+/* empty css                                         */
 import "../../core/config.js";
 /* empty css                                    */
 /* empty css                      */

package/components/CommandPalette/CommandPaletteContent.vue2.js

@@ -4,7 +4,7 @@ import k from "../Icon.vue.js";
 import { $t as E } from "../../utils/i18n.js";
 import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
 import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
-import ee from "./CommandPaletteItem.vue2.js";
+import ee from "./CommandPaletteItem.vue.js";
 const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3 border-b border-border/80 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
   key: 0,
   class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",

package/components/CommandPalette/{CommandPaletteItem.vue2.js → CommandPaletteItem.vue.js}

@@ -1,5 +1,5 @@
 import t from "./CommandPaletteItem.vue3.js";
-/* empty css                       */
+/* empty css                        */
 import o from "../../_virtual/_plugin-vue_export-helper.js";
 const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-66b1ae06"]]);
 export {

package/components/NavbarCommandPalette.vue.js

@@ -3,7 +3,7 @@ import L from "./Icon.vue.js";
 import v from "./Modal.vue.js";
 import N from "./CommandPalette/CommandPaletteContent.vue.js";
 import { $t as U } from "../utils/i18n.js";
-/* empty css                                      */
+/* empty css                                       */
 const V = { class: "block truncate -text-fs-1.5" }, S = { class: "ml-auto inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-mono font-medium border border-border/80 bg-background text-muted-foreground ml-1" }, A = /* @__PURE__ */ x({
   __name: "NavbarCommandPalette",
   props: {

package/components/RichTextEditor/RichTextEditor.vue.js

@@ -1,9 +1,9 @@
 import { defineComponent as te, ref as v, shallowRef as ne, watch as oe, computed as h, onMounted as le, onUnmounted as ae, openBlock as C, createElementBlock as L, normalizeClass as re, toDisplayString as I, createCommentVNode as U, createElementVNode as w, createVNode as q, unref as a, normalizeStyle as ie } from "vue";
 /* empty css                         */
-import se from "./RichTextToolbar.vue2.js";
-/* empty css                    */
-import de from "./RichTextLinkPopover.vue2.js";
-/* empty css                        */
+import se from "./RichTextToolbar.vue.js";
+/* empty css                     */
+import de from "./RichTextLinkPopover.vue.js";
+/* empty css                         */
 import { useRichTextImageUpload as ue } from "./composables/useRichTextImageUpload.js";
 import { useRichTextLinks as ce } from "./composables/useRichTextLinks.js";
 const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { class: "rte-wrapper" }, ye = { class: "rte-body-wrap" }, ge = ["id", "contenteditable", "aria-label", "aria-readonly", "aria-disabled", "aria-invalid"], be = ["id"], Se = /* @__PURE__ */ te({

package/components/RichTextEditor/RichTextLinkPopover.vue3.js

@@ -1,5 +1,5 @@
-import o from "./RichTextLinkPopover.vue2.js";
-/* empty css                        */
+import o from "./RichTextLinkPopover.vue.js";
+/* empty css                         */
 export {
   o as default
 };

package/components/RichTextEditor/RichTextToolbar.vue3.js

@@ -1,5 +1,5 @@
-import o from "./RichTextToolbar.vue2.js";
-/* empty css                    */
+import o from "./RichTextToolbar.vue.js";
+/* empty css                     */
 export {
   o as default
 };

package/components/Screen/ScreenFilter.vue.js

@@ -21,8 +21,8 @@ import "iconify-icon-picker/style.css";
 /* empty css                                 */
 /* empty css                 */
 /* empty css                                         */
-/* empty css                                    */
-/* empty css                                        */
+/* empty css                                     */
+/* empty css                                         */
 import "../../core/config.js";
 /* empty css                                    */
 /* empty css                      */

package/components/ThemeProvider/ThemeProvider.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as p, useId as C, computed as o, provide as h, openBlock as r, createElementBlock as y, normalizeStyle as b, normalizeClass as S, createBlock as d, resolveDynamicComponent as s, withCtx as n, createTextVNode as u, toDisplayString as m, renderSlot as g } from "vue";
-import { buildThemeVariables as k, buildThemeStyleBlock as T, buildCardOverrideStyles as _ } from "./themeVars.js";
-import { THEME_STYLES_KEY as B } from "../../composables/useThemeStyles.js";
-import { isDarkColor as E } from "../../utils/colorUtils.js";
-const P = /* @__PURE__ */ p({
+import { defineComponent as m, computed as o, provide as u, openBlock as a, createElementBlock as v, normalizeClass as c, createBlock as f, resolveDynamicComponent as p, withCtx as h, createTextVNode as C, toDisplayString as b, renderSlot as g } from "vue";
+import { buildThemeVariables as S, buildThemeStyleBlock as y, buildCardOverrideStyles as T } from "./themeVars.js";
+import { THEME_STYLES_KEY as k } from "../../composables/useThemeStyles.js";
+import { isDarkColor as B } from "../../utils/colorUtils.js";
+const P = /* @__PURE__ */ m({
   __name: "ThemeProvider",
   props: {
     bgColor: { default: void 0 },
@@ -14,36 +14,31 @@ const P = /* @__PURE__ */ p({
     maxWidth: { default: void 0 },
     rootClass: { default: void 0 }
   },
-  setup(a) {
-    const e = a, t = `vlite-theme-provider-${C()}`, i = o(() => e.bgColor ? E(e.bgColor) : !1), l = o(() => k(e)), c = o(
-      () => T(l.value, t)
-    ), v = o(
-      () => e.bgColor ? _(e.bgColor, i.value, `#${t}`) : ""
+  setup(t) {
+    const e = t, r = o(() => e.bgColor ? B(e.bgColor) : !1), l = o(() => S(e)), i = o(
+      () => y(l.value, ".vlite-theme-provider")
+    ), d = o(
+      () => e.bgColor ? T(e.bgColor, r.value, ".vlite-theme-provider") : ""
+    ), s = o(
+      () => [i.value, d.value].filter(Boolean).join(`
+`)
     );
-    return h(B, l), (f, x) => (r(), y("div", {
-      id: t,
-      class: S([
+    return u(k, l), (n, _) => (a(), v("div", {
+      class: c([
         "vlite-theme-provider",
-        a.rootClass,
+        t.rootClass,
         "transition-colors duration-300",
-        { dark: i.value }
-      ]),
-      style: b(l.value)
+        { dark: r.value }
+      ])
     }, [
-      (r(), d(s("style"), null, {
-        default: n(() => [
-          u(m(c.value), 1)
+      (a(), f(p("style"), null, {
+        default: h(() => [
+          C(b(s.value), 1)
         ]),
         _: 1
       })),
-      (r(), d(s("style"), null, {
-        default: n(() => [
-          u(m(v.value), 1)
-        ]),
-        _: 1
-      })),
-      g(f.$slots, "default")
-    ], 6));
+      g(n.$slots, "default")
+    ], 2));
   }
 });
 export {

package/components/ThemeProvider/themeVars.d.ts

@@ -11,7 +11,7 @@ export declare const DEFAULT_MAX_WIDTH = 1440;
 export declare function buildCardOverrideStyles(bg: string, isDark: boolean, scope?: string): string;
 /**
  * Build a `<style>` text block that re-applies every generated CSS custom
- * property with `!important`, scoped to a unique `#id` selector.
+ * property with `!important`, scoped to a provider root selector.
  *
  * Why this exists:
  *
@@ -25,11 +25,9 @@ export declare function buildCardOverrideStyles(bg: string, isDark: boolean, sco
  *   `[data-theme="dark"]` block. That silently nukes the provider's
  *   inline values and the brand color disappears.
  *
- *   The fix is a redundant layer that has the *highest* priority
- *   CSS offers: an ID selector combined with `!important`. With
- *   `#<id> { --var: v !important; }` nothing else in the cascade
- *   can override the theme — not Tailwind defaults, not ERP global
- *   styles, not third-party stylesheets.
+ *   The fix is a redundant layer that has the same behavior as
+ *   `ShopThemeProvider`: a generated style rule that writes every
+ *   theme token with `!important` on the provider root.
  *
  * Pure: no DOM, no Vue. Returns a CSS string ready to be dropped
  * inside a `<component :is="'style'">{{ block }}</component>` block.
@@ -38,20 +36,18 @@ export declare function buildCardOverrideStyles(bg: string, isDark: boolean, sco
  * provider root `font-size` that drives the same inherited base-size behavior
  * as `ShopThemeProvider`.
  */
-export declare function buildThemeStyleBlock(vars: ThemeStyles, id: string): string;
+export declare function buildThemeStyleBlock(vars: ThemeStyles, selector?: string): string;
 /**
- * Note: We previously tried to stamp `!important` directly onto every value
- * in the theme variables object, so that Vue inline bindings (`:style="themeStyles"`)
- * would carry the `!important` flag.
+ * Note: We keep `!important` out of the theme variables object itself.
  *
  * However, Vue's DOM patching (`style.setProperty(key, value)`) strictly rejects
  * the `value` argument if it contains `!important`. Thus, any inline style
  * object with `!important` silently fails and drops the styles entirely in SPA
  * environments.
  *
- * Therefore, we provide the raw variables (without `!important`) to `useThemeStyles()`
- * consumers, and rely exclusively on the `<style>` block generated by
- * `buildThemeStyleBlock` to enforce `!important` overrides across the application.
+ * Therefore, we provide raw variables (without `!important`) to `useThemeStyles()`
+ * consumers, and rely on the `<style>` block generated by `buildThemeStyleBlock`
+ * to enforce `!important` overrides across the application.
  */
 /**
  * Compute the full theme-styles record from a {@link ThemeProviderProps}.

package/components/ThemeProvider/themeVars.js

@@ -345,15 +345,17 @@ ${l} .bg-card-light .bg-card-light .bg-card-light {
 `;
 }
 const O = (r) => r.replace(/[{};]/g, "");
-function U(r, o) {
+function U(r, o = ".vlite-theme-provider") {
   if (!o) return "";
   const l = [];
   for (const [e, f] of Object.entries(r)) {
     if (!e.startsWith("--") && e !== "font-size") continue;
     const c = O(f);
-    c && l.push(`  ${e}: ${c} !important;`);
+    c && l.push(
+      c.includes("!important") ? `  ${e}: ${c};` : `  ${e}: ${c} !important;`
+    );
   }
-  return l.length === 0 ? "" : `#${o} {
+  return l.length === 0 ? "" : `${o} {
 ${l.join(`
 `)}
 }

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "1.4.14",
+  "version": "1.4.16",
   "type": "module",
   "main": "index.js",
   "module": "index.js",