@webitel/ui-sdk 23.12.75 → 23.12.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.75",
+  "version": "23.12.77",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/modules/Appearance/components/__tests__/wt-dark-mode-switcher.spec.js

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils';
+import WtDarkModeSwitcher from '../wt-dark-mode-switcher.vue';
+
+describe('WtDarkModeSwitcher', () => {
+  it('should render component', () => {
+    const wrapper = shallowMount(WtDarkModeSwitcher, {});
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('toggles dark mode class', async () => {
+    const wrapper = shallowMount(WtDarkModeSwitcher, {});
+    expect(window.document.documentElement.classList.contains('theme--dark'))
+    .toBe(false);
+    await wrapper.findComponent({ name: 'wt-switcher' }).trigger('change');
+    expect(window.document.documentElement.classList.contains('theme--dark'))
+    .toBe(true);
+  });
+});

package/src/modules/Appearance/components/wt-dark-mode-switcher.vue

@@ -0,0 +1,46 @@
+<script setup>
+
+import { ref } from 'vue';
+import { useStore } from 'vuex';
+import WtIcon from '../../../components/wt-icon/wt-icon.vue';
+import WtSwitcher from '../../../components/wt-switcher/wt-switcher.vue';
+
+const store = useStore();
+
+const mode = ref(localStorage.getItem('colorScheme') || 'light');
+
+const setThemeToStore = (theme) => {
+  store.dispatch('appearance/SET_THEME', theme);
+};
+
+const toggleDarkMode = () => {
+  if (mode.value === 'light') {
+    mode.value = 'dark';
+    localStorage.setItem('colorScheme', 'dark');
+    document.documentElement.classList.add('theme--dark');
+  } else {
+    mode.value = 'light';
+    localStorage.setItem('colorScheme', 'light');
+    document.documentElement.classList.remove('theme--dark');
+  }
+  setThemeToStore(mode.value);
+};
+</script>
+
+<template>
+  <div class="wt-dark-mode-switcher">
+    <wt-icon icon="dark-mode" />
+    <wt-switcher
+      :value="mode === 'dark'"
+      @change="toggleDarkMode"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.wt-dark-mode-switcher {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+</style>

package/src/modules/Appearance/store/AppearanceStoreModule.js

@@ -0,0 +1,19 @@
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+
+export default class AppearanceStoreModule extends BaseStoreModule {
+  state = {
+    theme: null,
+  }
+
+  actions = {
+    SET_THEME: (context, theme) => {
+      context.commit('SET_THEME', theme);
+    },
+  }
+
+  mutations = {
+    SET_THEME: (state, theme) => {
+      state.theme = theme;
+    },
+  }
+}

package/src/modules/Appearance/store/__tests__/AppearanceStoreModule.spec.js

@@ -0,0 +1,15 @@
+import { createStore } from 'vuex';
+import AppearanceStoreModule from '../AppearanceStoreModule';
+
+describe('AppearanceStoreModule', () => {
+  let store;
+
+  beforeEach(() => {
+    store = createStore(new AppearanceStoreModule().getModule());
+  });
+
+  it('should set theme', async () => {
+    await store.dispatch('SET_THEME', 'dark');
+    expect(store.state.theme).toBe('dark');
+  });
+});