@vc-shell/framework 1.0.289 → 1.0.291

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [1.0.291](https://github.com/VirtoCommerce/vc-shell/compare/v1.0.290...v1.0.291) (2024-09-23)
+
+
+### Features
+
+* support of css theming ([dba4097](https://github.com/VirtoCommerce/vc-shell/commit/dba409744b57dd1a999e009700e3b356fe230969))
+
+
+
+## [1.0.290](https://github.com/VirtoCommerce/vc-shell/compare/v1.0.289...v1.0.290) (2024-09-13)
+
+
+### Features
+
+* **shared:** user-dropdown-button - add baseMenuItemsHandler prop and handle default menu items ([e5f4017](https://github.com/VirtoCommerce/vc-shell/commit/e5f40174dae9445ed074493d824e3c95c37c7150))
+
+
+
 ## [1.0.289](https://github.com/VirtoCommerce/vc-shell/compare/v1.0.288...v1.0.289) (2024-09-10)
 
 

package/core/composables/index.ts

@@ -13,3 +13,4 @@ export { useBeforeUnload } from "./useBeforeUnload";
 export { useLanguages } from "./useLanguages";
 export { useBreadcrumbs } from "./useBreadcrumbs";
 export { useAppInsights } from "./useAppInsights";
+export { useTheme } from "./useTheme";

package/core/composables/useTheme/index.ts

@@ -0,0 +1,60 @@
+import { useColorMode, useCycleList } from "@vueuse/core";
+import { computed, watchEffect, ref, type Ref } from "vue";
+
+export interface IUseTheme {
+  themes: Ref<string[]>;
+  current: Ref<string>;
+  next: () => void;
+  register: (customNames: string | string[]) => void;
+  unregister: (customNames: string | string[]) => void;
+  setTheme: (theme: string) => void;
+}
+
+const registeredThemes: Ref<string[]> = ref([]);
+export const useTheme = (): IUseTheme => {
+  function register(customNames: string | string[]) {
+    (typeof customNames === "string" ? [customNames] : customNames).forEach((name) => {
+      if (!registeredThemes.value.includes(name)) {
+        registeredThemes.value.push(name);
+      }
+    });
+  }
+
+  function unregister(customNames: string | string[]) {
+    (typeof customNames === "string" ? [customNames] : customNames).forEach((name) => {
+      const index = registeredThemes.value.indexOf(name);
+      if (index >= 0) {
+        registeredThemes.value.splice(index, 1);
+      }
+    });
+  }
+
+  function setTheme(theme: string) {
+    state.value = theme;
+  }
+
+  const mode = useColorMode({
+    modes: {
+      ...registeredThemes.value.reduce(
+        (acc, name) => {
+          acc[name] = name;
+          return acc;
+        },
+        {} as Record<string, string>,
+      ),
+    },
+  });
+
+  const { state, next } = useCycleList(registeredThemes.value, { initialValue: mode });
+
+  watchEffect(() => (mode.value = state.value));
+
+  return {
+    themes: computed(() => registeredThemes.value),
+    current: state,
+    next,
+    register,
+    unregister,
+    setTheme,
+  };
+};

package/core/directives/loading/styles.css

@@ -1,3 +1,8 @@
+:root {
+  --v-loading-bg-color: var(--additional-50);
+  --v-loading-bg: rgb(from var(--v-loading-bg-color) r g b / 75%);
+}
+
 .v-loading {
   position: relative;
   cursor: wait;
@@ -11,7 +16,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: rgba(255, 255, 255, 75%);
+  background-color: var(--v-loading-bg);
   backdrop-filter: blur(3px);
 }
 

package/dist/core/composables/index.d.ts

@@ -13,4 +13,5 @@ export { useBeforeUnload } from "./useBeforeUnload";
 export { useLanguages } from "./useLanguages";
 export { useBreadcrumbs } from "./useBreadcrumbs";
 export { useAppInsights } from "./useAppInsights";
+export { useTheme } from "./useTheme";
 //# sourceMappingURL=index.d.ts.map

package/dist/core/composables/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../core/composables/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../core/composables/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/core/composables/useTheme/index.d.ts

@@ -0,0 +1,11 @@
+import { type Ref } from "vue";
+export interface IUseTheme {
+    themes: Ref<string[]>;
+    current: Ref<string>;
+    next: () => void;
+    register: (customNames: string | string[]) => void;
+    unregister: (customNames: string | string[]) => void;
+    setTheme: (theme: string) => void;
+}
+export declare const useTheme: () => IUseTheme;
+//# sourceMappingURL=index.d.ts.map

package/dist/core/composables/useTheme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../core/composables/useTheme/index.ts"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAE3D,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;IACtB,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACrB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,UAAU,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACrD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAGD,eAAO,MAAM,QAAQ,QAAO,SA8C3B,CAAC"}