@code-coaching/vuetiful 0.24.10 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.24.10",
+  "version": "0.26.0",
   "license": "MIT",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",
@@ -53,6 +53,7 @@
       "types": "./dist/types/index.d.ts"
     },
     "./themes/*": "./src/themes/*",
+    "./css/*": "./src/css/*",
     "./styles/*": "./src/styles/*",
     "./tailwind/*": "./src/tailwind/*"
   }

package/src/css/overrides/quasar.css

@@ -0,0 +1,310 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply mb-4 md:mb-8;
+}
+
+section.section {
+  @apply mb-6 md:mb-14;
+}
+header.header {
+  @apply mb-4 md:mb-10;
+}
+
+summary {
+  cursor: pointer;
+}
+
+html,
+body,
+#q-app {
+  /*
+  * This is done to prevent double scrollbars
+  */
+  height: 100%;
+  overflow: hidden;
+
+  /*
+  * Reset several font properties to browser defaults
+  */
+  font-size: 16px;
+  font-family: var(--theme-font-family-base), sans-serif;
+  -moz-osx-font-smoothing: auto;
+}
+
+.flex {
+  /*
+  * Quasar has a flex utility class that also adds flex-wrap: wrap;
+  * This class is used to reset back to flex-wrap: nowrap; the default behavior.
+  */
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+/*
+* This makes sure the Tailwind flex utility class is not overwritten
+* by the override above.
+*/
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+/* app global css */
+.q-avatar,
+.q-chip .q-avatar {
+  @apply rounded-token;
+  @apply transition-all;
+}
+
+.q-badge {
+  @apply rounded-token;
+
+  @apply transition-all;
+}
+
+.q-banner {
+  @apply rounded-container-token;
+  @apply transition-all;
+}
+
+.q-btn {
+  @apply rounded-token;
+  @apply transition-all;
+}
+
+.q-btn-group {
+  @apply rounded-token;
+  @apply transition-all;
+
+  width: fit-content;
+}
+
+.q-btn-dropdown {
+  @apply rounded-token;
+  @apply transition-all;
+}
+
+.q-menu {
+  @apply bg-surface-100-800-token;
+  @apply text-surface-900-50-token;
+
+  @apply rounded-container-token;
+  @apply transition-all;
+}
+
+.q-menu--dark {
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
+}
+
+.q-card {
+  @apply rounded-container-token;
+  @apply transition-all;
+}
+
+/* Overwrite the white shadow with the normal shadow */
+.q-card--dark {
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
+}
+
+.q-chip {
+  @apply rounded-token;
+  @apply transition-all;
+}
+
+.q-color-picker {
+  @apply rounded-container-token;
+  @apply transition-all;
+}
+
+.q-color-picker--dark {
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
+}
+
+.q-color-picker__header-bg {
+  @apply rounded-tl-container-token;
+  @apply rounded-tr-container-token;
+}
+
+.q-editor {
+  @apply rounded-container-token;
+  @apply transition-all;
+}
+
+/**
+  * Because of how .q-editor is styled
+  * the a tag needs to be styled here
+  * Add .light-actions or .dark-actions to the QEditor as a class
+  */
+.light-actions a {
+  @apply !text-white;
+}
+
+.dark-actions a {
+  @apply !text-black;
+}
+
+/**
+  * Because of how .q-select is styled
+  * the dropdown icon needs to be styled here
+  * Add .light-actions or .dark-actions to the QSelect as a class
+  */
+.light-actions i {
+  @apply !text-white;
+}
+.dark-actions i {
+  @apply !text-black;
+}
+
+/*
+* Because of how .q-expansion-item__container -> .q-item is styled
+* the background and text color need to be set here
+*/
+.q-list {
+  @apply bg-surface-100-800-token;
+  @apply text-surface-900-50-token;
+
+  @apply rounded-container-token;
+  @apply transition-all;
+}
+
+.q-list .q-card {
+  @apply bg-surface-100-800-token;
+  @apply text-surface-900-50-token;
+}
+
+.q-list > .q-expansion-item:first-child .q-focus-helper {
+  @apply rounded-tl-container-token;
+  @apply rounded-tr-container-token;
+}
+
+.q-list > .q-expansion-item:last-child .q-focus-helper {
+  @apply rounded-bl-container-token;
+  @apply rounded-br-container-token;
+}
+
+.q-list > .q-expansion-item:last-child .q-card {
+  @apply rounded-bl-container-token;
+  @apply rounded-br-container-token;
+}
+
+.q-drawer .q-list {
+  border-radius: 0;
+  height: 100%;
+}
+
+.q-input {
+  @apply rounded-container-token;
+  @apply transition-all;
+}
+
+.q-field__control::before {
+  @apply rounded-container-token;
+}
+
+.q-field--outlined .q-field__control::after {
+  @apply rounded-container-token;
+}
+
+.q-input,
+.q-select,
+.q-file,
+.q-time {
+  @apply rounded-container-token;
+}
+
+.q-item--dark {
+  color: currentColor;
+}
+
+.q-field__native {
+  color: currentColor !important;
+  background-color: transparent !important;
+}
+
+.q-time {
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
+
+  @apply bg-surface-100-800-token;
+  @apply text-surface-900-50-token;
+
+  @apply rounded-tl-container-token;
+  @apply rounded-tr-container-token;
+}
+
+.q-time__header {
+  @apply bg-surface-300-600-token;
+  @apply text-surface-900-50-token;
+
+  @apply rounded-tl-container-token;
+  @apply rounded-tr-container-token;
+}
+
+.q-time__clock-position--active,
+.q-time__clock-pointer {
+  @apply bg-surface-900-50-token;
+  @apply text-surface-50-900-token;
+}
+
+.q-date {
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
+
+  @apply bg-surface-100-800-token;
+  @apply text-surface-900-50-token;
+
+  @apply rounded-container-token;
+}
+
+.q-date__calendar-item .q-btn {
+  @apply bg-surface-100-800-token;
+  @apply text-surface-900-50-token;
+
+  @apply rounded-token;
+}
+
+.q-date__calendar-item .q-btn--unelevated {
+  @apply !bg-surface-900;
+  @apply !text-surface-50;
+}
+
+.q-date__navigation .q-btn {
+  @apply bg-transparent;
+  @apply text-surface-900-50-token;
+
+  @apply rounded-token;
+}
+
+.q-date__header {
+  @apply bg-surface-300-600-token;
+  @apply text-surface-900-50-token;
+}
+
+.q-date__months {
+  flex-wrap: wrap;
+}
+
+/**
+  * Prevent the outline from showing on focus when the input is within a QInput
+  */
+.q-field__native[type='text']:focus,
+.q-field__native[type='email']:focus,
+.q-field__native[type='url']:focus,
+.q-field__native[type='password']:focus,
+.q-field__native[type='number']:focus,
+.q-field__native[type='date']:focus,
+.q-field__native[type='datetime-local']:focus,
+.q-field__native[type='month']:focus,
+.q-field__native[type='search']:focus,
+.q-field__native[type='tel']:focus,
+.q-field__native[type='time']:focus,
+.q-field__native[type='week']:focus,
+.q-field__native[multiple]:focus,
+.q-field__native textarea:focus,
+.q-field__native select:focus {
+  --tw-ring-color: transparent;
+}

package/src/directives/click-outside-group.test.ts

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils';
+import { describe, test, vi, expect } from 'vitest'
+import { vClickOutsideGroup } from '.';
+
+interface HTMLElementWithClickOutsideHandler extends HTMLElement {
+  _clickOutsideHandler?: (event: MouseEvent) => void;
+}
+
+describe('vClickOutsideGroup Directive', () => {
+  test("should call the callback when clicking outside the element", async () => {
+    const callback = vi.fn();
+
+    const innerElement = document.createElement('div');
+    const outerElement = document.createElement('div');
+    outerElement.id = 'outer';
+    document.body.appendChild(outerElement);
+    document.body.appendChild(innerElement);
+    
+    const directiveBinding = { value: {
+      elementsInGroup: ['#outer'],
+      callback
+    } } as any;
+    vClickOutsideGroup.mounted(innerElement, directiveBinding);
+
+    innerElement.click();
+    expect(callback).not.toHaveBeenCalled();
+    outerElement.click();
+    expect(callback).not.toHaveBeenCalled();
+    document.body.click();
+    expect(callback).toHaveBeenCalled();
+  })
+
+  test("should remove _clickOutsideHandler when unmounted", async () => {
+    const callback = vi.fn();
+    const directiveBinding = { value: callback } as any;
+    const innerElement = document.createElement('div') as HTMLElementWithClickOutsideHandler;
+    document.body.appendChild(innerElement);
+    vClickOutsideGroup.mounted(innerElement, directiveBinding);
+
+    expect(innerElement._clickOutsideHandler).toBeDefined();
+    vClickOutsideGroup.beforeUnmount(innerElement);
+    expect(innerElement._clickOutsideHandler).toBeUndefined();
+  })
+});

package/src/directives/click-outside-group.ts

@@ -0,0 +1,39 @@
+import { DirectiveBinding } from 'vue';
+
+interface HTMLElementWithClickOutsideHandler extends HTMLElement {
+  _clickOutsideHandler?: (event: MouseEvent) => void;
+}
+
+const clickOutsideGroup = {
+  mounted(el: HTMLElementWithClickOutsideHandler, binding: DirectiveBinding) {
+    const { elementsInGroup = [], callback } = binding.value;
+
+    const elementsToIgnore = elementsInGroup.map((selector: string) => {
+      const allElements = document.querySelectorAll(selector);
+      const elements = Array.from(allElements) as HTMLElement[];
+      return elements;
+    });
+
+    const allElementsToIgnore = elementsToIgnore.flat();
+
+    const clickOutsideHandler = (event: MouseEvent) => {
+      const clickedIgnoreElement = allElementsToIgnore.some((el: HTMLElement) => el?.contains(event.target as Node));
+      if (!el.contains(event.target as Node) && !clickedIgnoreElement) {
+        callback();
+      }
+    };
+
+    document.addEventListener('click', clickOutsideHandler);
+
+    el._clickOutsideHandler = clickOutsideHandler;
+  },
+
+  beforeUnmount(el: HTMLElementWithClickOutsideHandler) {
+    if (el._clickOutsideHandler) {
+      document.removeEventListener('click', el._clickOutsideHandler);
+      delete el._clickOutsideHandler;
+    }
+  },
+};
+
+export default clickOutsideGroup;

package/src/directives/click-outside.test.ts

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils';
+import { describe, test, vi, expect } from 'vitest'
+import { vClickOutside } from '.';
+
+interface HTMLElementWithClickOutsideHandler extends HTMLElement {
+  _clickOutsideHandler?: (event: MouseEvent) => void;
+}
+
+describe('vClickOutside Directive', () => {
+  test("should call the callback when clicking outside the element", async () => {
+    const callback = vi.fn();
+
+    const innerElement = document.createElement('div');
+    document.body.appendChild(innerElement);
+
+    const directiveBinding = { value: callback } as any;
+    vClickOutside.mounted(innerElement, directiveBinding);
+
+    innerElement.click();
+    expect(callback).not.toHaveBeenCalled();
+    document.body.click();
+    expect(callback).toHaveBeenCalled();
+  })
+
+  test("should remove _clickOutsideHandler when unmounted", async () => {
+    const callback = vi.fn();
+
+    const innerElement = document.createElement('div') as HTMLElementWithClickOutsideHandler;
+    document.body.appendChild(innerElement);
+
+    const directiveBinding = { value: callback } as any;
+    vClickOutside.mounted(innerElement, directiveBinding);
+
+    expect(innerElement._clickOutsideHandler).toBeDefined();
+    vClickOutside.beforeUnmount(innerElement);
+    expect(innerElement._clickOutsideHandler).toBeUndefined();
+  })
+});

package/src/directives/click-outside.ts

@@ -0,0 +1,28 @@
+import { DirectiveBinding } from 'vue';
+
+interface HTMLElementWithClickOutsideHandler extends HTMLElement {
+  _clickOutsideHandler?: (event: MouseEvent) => void;
+}
+
+const clickOutside = {
+  mounted(el: HTMLElementWithClickOutsideHandler, binding: DirectiveBinding) {
+    const clickOutsideHandler = (event: MouseEvent) => {
+      if (!el.contains(event.target as Node)) {
+        binding.value();
+      }
+    };
+
+    document.addEventListener('click', clickOutsideHandler);
+
+    el._clickOutsideHandler = clickOutsideHandler;
+  },
+
+  beforeUnmount(el: HTMLElementWithClickOutsideHandler) {
+    if (el._clickOutsideHandler) {
+      document.removeEventListener('click', el._clickOutsideHandler);
+      delete el._clickOutsideHandler;
+    }
+  },
+};
+
+export default clickOutside;

package/src/directives/index.ts

@@ -1,3 +1,5 @@
+import vClickOutside from './click-outside';
+import vClickOutsideGroup from './click-outside-group';
 import vClipboard from './clipboard';
 
-export { vClipboard };
+export { vClickOutside, vClickOutsideGroup, vClipboard };

package/src/utils/theme/theme-switcher.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CssClasses, useTheme, VButton, VLightSwitch } from '@/index';
+import { CssClasses, VButton, VLightSwitch, useTheme, vClickOutsideGroup } from '@/index';
 import { ref } from 'vue';
 
 defineProps({
@@ -48,6 +48,10 @@ const showPopup = ref(false);
 
     <div
       v-if="showPopup"
+      v-click-outside-group="{
+        elementsInGroup: ['.vuetiful-theme-switcher__button'],
+        callback: () => (showPopup = false),
+      }"
       class="vuetiful-theme-switcher__popup absolute z-10 mt-1 space-y-4 p-4 shadow-xl rounded-container-token"
       :class="`${background} ${text} ${widthPopup} ${classList}`"
     >