@code-coaching/vuetiful 0.25.0 → 0.27.0

package/src/services/drawer.service.test.ts

@@ -1,45 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { useDrawer } from './drawer.service';
-
-const { drawer, open, close } = useDrawer();
-
-describe('useDrawer', () => {
-  describe('defaults', () => {
-    test('should have the default values', () => {
-      expect(drawer.id).toBe('default');
-      expect(drawer.open).toBe(false);
-      expect(drawer.position).toBe('left');
-      expect(drawer.duration).toBe(300);
-      expect(drawer.regionBackdrop).toBe('');
-      expect(drawer.regionDrawer).toBe('');
-    });
-  });
-
-  describe('open', () => {
-    test('should use the settings', () => {
-      open({
-        id: 'test',
-        open: true,
-        position: 'right',
-        duration: 150,
-        regionBackdrop: 'backdrop',
-        regionDrawer: 'drawer',
-      });
-      expect(drawer.id).toBe('test');
-      expect(drawer.open).toBe(true);
-      expect(drawer.position).toBe('right');
-      expect(drawer.duration).toBe(150);
-      expect(drawer.regionBackdrop).toBe('backdrop');
-      expect(drawer.regionDrawer).toBe('drawer');
-    });
-  });
-
-  describe('close', () => {
-    test('should set the drawer to close', () => {
-      open();
-      expect(drawer.open).toBe(true);
-      close();
-      expect(drawer.open).toBe(false);
-    });
-  });
-});

package/src/services/drawer.service.ts

@@ -1,46 +0,0 @@
-import { reactive, readonly } from 'vue';
-
-export interface DrawerSettings {
-  id?: string;
-  open?: boolean;
-
-  position?: 'left' | 'top' | 'right' | 'bottom';
-  duration?: 150 | 300;
-
-  regionBackdrop?: string;
-  regionDrawer?: string;
-
-  [key: string]: unknown;
-}
-
-const drawer = reactive<DrawerSettings>({
-  id: 'default',
-  open: false,
-  position: 'left',
-  duration: 300,
-  regionBackdrop: '',
-  regionDrawer: '',
-});
-
-const useDrawer = () => {
-  const open = (settings?: DrawerSettings) => {
-    drawer.open = true;
-    drawer.id = settings?.id ?? 'default';
-    drawer.duration = settings?.duration ?? 300;
-    drawer.regionBackdrop = settings?.regionBackdrop ?? '';
-    drawer.regionDrawer = settings?.regionDrawer ?? '';
-    drawer.position = settings?.position ?? 'left';
-  };
-
-  const close = () => {
-    drawer.open = false;
-  };
-
-  return {
-    drawer: readonly(drawer),
-    open,
-    close,
-  };
-};
-
-export { useDrawer };

package/src/services/highlight.service.test.ts

@@ -1,24 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { useHighlight } from './highlight.service';
-
-const { highlight } = useHighlight();
-
-describe('useHighlight', () => {
-  describe('highlight', () => {
-    describe('given a known language is passed', () => {
-      test('should trim and highlight the code', () => {
-        expect(highlight("  const name = 'John Duck'  ", 'javascript')).toEqual(
-          '<span class="hljs-keyword">const</span> name = <span class="hljs-string">&#x27;John Duck&#x27;</span>',
-        );
-      });
-    });
-
-    describe('given an unknown language is passed', () => {
-      test('should trim and auto highlight the code', () => {
-        expect(highlight("  const name = 'John Duck'  ", 'unknown')).toEqual(
-          '<span class="hljs-keyword">const</span> <span class="hljs-keyword">name</span> = <span class="hljs-string">&#x27;John Duck&#x27;</span>',
-        );
-      });
-    });
-  });
-});

package/src/services/highlight.service.ts

@@ -1,19 +0,0 @@
-import hljs from 'highlight.js';
-
-const highlighter = hljs;
-
-const useHighlight = () => {
-  const highlight = (code: string, language: string) => {
-    if (language && highlighter.getLanguage(language)) {
-      return highlighter.highlight(code, { language }).value.trim();
-    } else {
-      return highlighter.highlightAuto(code).value.trim();
-    }
-  };
-
-  return {
-    highlight,
-  };
-};
-
-export { useHighlight };

package/src/services/index.ts

@@ -1,8 +0,0 @@
-import { useDarkMode, Mode } from './dark-mode.service';
-import { useDrawer } from './drawer.service';
-import { useHighlight } from './highlight.service';
-import { useRail } from './rail.service';
-import { useSettings, VuetifulSettings } from './settings.service';
-
-export { useDarkMode, useDrawer, useHighlight, useRail, useSettings };
-export type { VuetifulSettings, Mode };

package/src/services/rail.service.test.ts

@@ -1,13 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { useRail } from './rail.service';
-
-const { selectedRailTile } = useRail();
-
-describe('useRail', () => {
-  describe('selectedRailTile', () => {
-    test('should expose selectedRailTile', () => {
-      selectedRailTile.value = 'John Duck';
-      expect(selectedRailTile.value).toBe('John Duck');
-    });
-  });
-});

package/src/services/rail.service.ts

@@ -1,11 +0,0 @@
-import { ref } from 'vue';
-
-const selectedRailTile = ref('');
-
-const useRail = () => {
-  return {
-    selectedRailTile,
-  };
-};
-
-export { useRail };

package/src/services/settings.service.test.ts

@@ -1,17 +0,0 @@
-import { afterEach, describe, expect, test, vi } from 'vitest';
-
-describe('useSettings', () => {
-  afterEach(() => {
-    vi.resetModules();
-  });
-  describe('updateSettings', () => {
-    test('should update settings', async () => {
-      const { useSettings } = await import('./settings.service');
-      const { updateSettings, settings } = useSettings();
-
-      expect(settings.global.unstyled).toBe(false);
-      updateSettings({ global: { unstyled: true } });
-      expect(settings.global.unstyled).toBe(true);
-    });
-  });
-});

package/src/services/settings.service.ts

@@ -1,136 +0,0 @@
-import { reactive } from 'vue';
-
-interface UnstyledSettings {
-  unstyled: boolean;
-}
-
-interface GlobalSettings extends UnstyledSettings {}
-interface RadioGroupSettings extends UnstyledSettings {}
-interface RadioItemSettings extends UnstyledSettings {}
-interface AccordionSettings extends UnstyledSettings {}
-interface AccordionItemSettings extends UnstyledSettings {}
-interface AlertSettings extends UnstyledSettings {}
-interface AvatarSettings extends UnstyledSettings {}
-interface BadgeSettings extends UnstyledSettings {}
-interface ButtonSettings extends UnstyledSettings {}
-interface ListboxSettings extends UnstyledSettings {}
-interface ListboxItemSettings extends UnstyledSettings {}
-interface CodeBlockSettings extends UnstyledSettings {}
-interface SwitchSettings extends UnstyledSettings {}
-interface CardSettings extends UnstyledSettings {}
-interface CardHeaderSettings extends UnstyledSettings {}
-interface CardBodySettings extends UnstyledSettings {}
-interface CardFooterSettings extends UnstyledSettings {}
-interface TabsSettings extends UnstyledSettings {}
-interface TabSettings extends UnstyledSettings {}
-
-export interface VuetifulSettings {
-  global: GlobalSettings;
-  components: Partial<{
-    avatar: AvatarSettings;
-    alert: AlertSettings;
-    badge: BadgeSettings;
-    button: ButtonSettings;
-    codeBlock: CodeBlockSettings;
-    switch: SwitchSettings;
-
-    accordion: AccordionSettings;
-    accordionItem: AccordionItemSettings;
-
-    listbox: ListboxSettings;
-    listboxItem: ListboxItemSettings;
-
-    radioGroup: RadioGroupSettings;
-    radioItem: RadioItemSettings;
-
-    card: CardSettings;
-    cardHeader: CardHeaderSettings;
-    cardBody: CardBodySettings;
-    cardFooter: CardFooterSettings;
-
-    tabs: TabsSettings;
-    tab: TabSettings;
-  }>;
-}
-
-const settings = reactive({
-  global: {
-    unstyled: false,
-  },
-  components: {
-    radioGroup: {
-      unstyled: false,
-    },
-    radioItem: {
-      unstyled: false,
-    },
-    switch: {
-      unstyled: false,
-    },
-    avatar: {
-      unstyled: false,
-    },
-    badge: {
-      unstyled: false,
-    },
-    button: {
-      unstyled: false,
-    },
-    chip: {
-      unstyled: false,
-    },
-    codeBlock: {
-      unstyled: false,
-    },
-    listbox: {
-      unstyled: false,
-    },
-    listboxItem: {
-      unstyled: false,
-    },
-    accordion: {
-      unstyled: false,
-    },
-    accordionItem: {
-      unstyled: false,
-    },
-    alert: {
-      unstyled: false,
-    },
-    card: {
-      unstyled: false,
-    },
-    cardHeader: {
-      unstyled: false,
-    },
-    cardBody: {
-      unstyled: false,
-    },
-    cardFooter: {
-      unstyled: false,
-    },
-    tabs: {
-      unstyled: false,
-    },
-    tab: {
-      unstyled: false,
-    },
-  },
-});
-
-const useSettings = () => {
-  const updateSettings = (partialSettings: Partial<VuetifulSettings>) => {
-    for (const key in partialSettings) {
-      if (key in settings) {
-        Object.assign((settings as any)[key], (partialSettings as any)[key]);
-      }
-    }
-  };
-
-  return {
-    updateSettings,
-    settings,
-  };
-};
-
-export { useSettings };

package/src/styles/all.css

@@ -1,24 +0,0 @@
-/* Stylesheet: all.css */
-/* Import AFTER your theme, but BEFORE your global stylesheet. */
-/* NOTE: The order shown below is required */
-
-/* Tailwind Directives */
-@import 'tailwind.css';
-
-/* Global Styles */
-@import 'core.css';
-
-/* Typographical Settings */
-@import 'typography.css';
-
-/* Imports all Tailwind Elements */
-@import 'elements.css';
-
-/* Imports all Variant Styles */
-@import 'variants.css';
-
-/* Imports all Transitions */
-@import 'transitions.css';
-
-/* Imports all Component Styles */
-@import '../../dist/style.css';

package/src/styles/core.css

@@ -1,66 +0,0 @@
-/* Stylesheet: core.css */
-
-@layer base {
-  /* === Body Styles === */
-
-  body {
-    @apply bg-surface-50-900-token;
-  }
-
-  /* === Selection === */
-
-  ::selection {
-    @apply bg-primary-500/30;
-  }
-
-  /* === Focus === */
-
-  /* Outline (do not change) */
-  /* http://www.outlinenone.com/ */
-
-  /* Mobile tap highlight */
-  /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
-  html {
-    -webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
-  }
-
-  /* === Scrollbars === */
-
-  ::-webkit-scrollbar {
-    @apply w-2;
-    @apply h-2;
-  }
-  ::-webkit-scrollbar-track {
-    @apply px-[1px] !bg-surface-50-900-token;
-  }
-  ::-webkit-scrollbar-thumb {
-    @apply bg-surface-400-500-token rounded-token;
-  }
-
-  /* Firefox */
-  /* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
-  html {
-    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.05);
-  }
-  html.dark {
-    scrollbar-color: rgba(255, 255, 255, 0.1) rgba(0, 0, 0, 0.05);
-  }
-
-  /* Hide Scrollbars */
-  .hide-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-  .hide-scrollbar {
-    -ms-overflow-style: none; /* IE/Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-
-  /* === Horizontal Rules === */
-
-  hr:not(.divider) {
-    @apply block border-t border-solid border-surface-300-600-token;
-  }
-  .divider-vertical {
-    @apply mx-auto inline-block min-h-[10px] border-l border-solid border-surface-300-600-token;
-  }
-}

package/src/styles/elements/alerts.css

@@ -1,17 +0,0 @@
-/* Tailwind Elements: alerts.css */
-
-@layer components {
-  .alert {
-    @apply flex flex-col items-start space-y-4 p-4 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0;
-    /* Text */
-    @apply text-surface-900-50-token;
-    /* Rounded */
-    @apply rounded-container-token;
-  }
-  .alert-message {
-    @apply flex-auto space-y-2;
-  }
-  .alert-actions {
-    @apply flex items-center space-x-2;
-  }
-}

package/src/styles/elements/badges.css

@@ -1,31 +0,0 @@
-/* Tailwind Elements: badges.css */
-
-@layer components {
-  .badge {
-    /* Core */
-    @apply inline-flex items-center justify-center space-x-2 whitespace-nowrap;
-    /* Text */
-    @apply text-xs font-semibold;
-    /* Padding */
-    @apply px-2 py-1;
-    /* Theme: Rounded */
-    @apply rounded-token;
-  }
-
-  .badge-icon {
-    /* Core */
-    @apply flex h-5 w-5 items-center justify-center rounded-full;
-    /* Text */
-    @apply text-xs font-semibold;
-    /* Shadow */
-    @apply shadow;
-  }
-
-  /* === Variants === */
-
-  /* Glass */
-  .badge-glass {
-    @apply bg-surface-500/20 backdrop-blur-lg dark:bg-surface-500/20;
-    @apply ring-[1px] ring-inset ring-neutral-900/5 dark:ring-neutral-50/5;
-  }
-}

package/src/styles/elements/breadcrumbs.css

@@ -1,26 +0,0 @@
-/* Tailwind Elements: breadcrumbs.css */
-
-@layer components {
-  .breadcrumb,
-  .breadcrumb-nonresponsive {
-    @apply hide-scrollbar flex w-full items-center space-x-4 overflow-x-auto;
-  }
-
-  .crumb {
-    @apply flex items-center justify-center space-x-2;
-  }
-  .crumb-separator {
-    @apply flex opacity-50 text-surface-700-200-token;
-  }
-
-  /* === Auto-Responsive === */
-
-  .breadcrumb li {
-    @apply hidden md:block;
-  }
-  .breadcrumb li:nth-last-child(3),
-  .breadcrumb li:nth-last-child(2),
-  .breadcrumb li:nth-last-child(1) {
-    @apply block;
-  }
-}

package/src/styles/elements/buttons.css

@@ -1,103 +0,0 @@
-/* Tailwind Elements: button.css */
-
-@layer components {
-  /* === States === */
-
-  button:disabled {
-    @apply !cursor-not-allowed !opacity-50 hover:brightness-100 active:scale-100;
-  }
-
-  .button-base-styles {
-    /* Size (match base)  */
-    @apply px-5 py-[9px] text-base;
-    /* Core */
-    @apply whitespace-nowrap text-center;
-    /* Flex Columns */
-    @apply inline-flex items-center justify-center space-x-2;
-    /* States */
-    @apply hover:brightness-[1.15];
-    /* Transitions */
-    @apply transition-all;
-  }
-
-  /* === Button === */
-  /* Standard button/anchor tag elements. */
-
-  .btn {
-    @apply button-base-styles rounded-token active:scale-[95%] active:brightness-90;
-  }
-
-  /* Button: Sizes */
-  /* Note: Default values are built into `.btn` */
-  .btn-sm {
-    @apply px-3 py-1.5 text-sm;
-  }
-  .btn-lg {
-    @apply px-7 py-3 text-lg;
-  }
-  .btn-xl {
-    @apply px-9 py-4 text-xl;
-  }
-
-  /* === Icon Button === */
-  /* A circular button meant for housing icons. */
-
-  .btn-icon {
-    /* Extend Base Button Clases */
-    @apply btn;
-    /* Size (match base) */
-    @apply aspect-square w-[43px] text-base;
-    /* Rounded */
-    @apply rounded-full;
-  }
-
-  /* Icon Button: Size */
-  .btn-icon-sm {
-    @apply aspect-square w-[33px] text-sm;
-  }
-  .btn-icon-base {
-    @apply aspect-square w-[43px] text-base;
-  }
-  .btn-icon-lg {
-    @apply aspect-square w-[53px] text-lg;
-  }
-  .btn-icon-xl {
-    @apply aspect-square w-[63px] text-xl;
-  }
-
-  /* File Input Button */
-  input[type='file']:not(.file-dropzone-input)::file-selector-button {
-    @apply variant-filled btn btn-sm mr-2 border-0;
-  }
-
-  /* === Button Groups === */
-
-  .btn-group {
-    @apply inline-flex flex-row space-x-0 overflow-hidden rounded-token;
-    /* Safari: hover overflow fix for border radius */
-    isolation: isolate;
-  }
-  .btn-group-vertical {
-    @apply btn-group flex-col space-y-0 rounded-container-token;
-    /* Safari: hover overflow fix for border radius */
-    isolation: isolate;
-  }
-
-  /* Button / Anchors */
-  .btn-group button,
-  .btn-group a,
-  .btn-group-vertical button,
-  .btn-group-vertical a {
-    @apply button-base-styles hover:bg-surface-50/[3%] active:bg-surface-900/[3%];
-    /* Reset Anchor Styles */
-    @apply !text-inherit !no-underline;
-  }
-
-  /* Set Neutral Divider */
-  .btn-group * + * {
-    @apply border-l border-t-0 border-surface-500/20;
-  }
-  .btn-group-vertical * + * {
-    @apply border-l-0 border-t border-surface-500/20;
-  }
-}

package/src/styles/elements/cards.css

@@ -1,32 +0,0 @@
-/* Tailwind Elements: cards.css */
-
-@layer components {
-  .card {
-    /* background */
-    @apply bg-surface-100-800-token;
-    /* Ring */
-    @apply ring-outline-token;
-    /* Theme: Rounded */
-    @apply rounded-container-token;
-  }
-
-  /* === Regions === */
-
-  .card-header {
-    @apply p-4 pb-0;
-  }
-
-  .card-footer {
-    @apply p-4 pt-0;
-  }
-
-  /* === States === */
-
-  a.card {
-    @apply transition-all hover:brightness-105;
-  }
-
-  .card-hover {
-    @apply transition-all hover:scale-[101%] hover:shadow-xl;
-  }
-}

package/src/styles/elements/chips.css

@@ -1,22 +0,0 @@
-/* Tailwind Elements: chips.css */
-
-@layer components {
-  .chip {
-    @apply cursor-pointer whitespace-nowrap px-3 py-1.5;
-    /* Text */
-    @apply text-center text-xs;
-    /* Rounded */
-    @apply rounded;
-    /* Flex Columns */
-    @apply inline-flex items-center justify-center space-x-2;
-    /* States */
-    @apply hover:brightness-[1.15];
-    /* Transitions */
-    @apply transition-all;
-  }
-
-  .chip-disabled,
-  .chip:disabled {
-    @apply !cursor-not-allowed !opacity-50 active:scale-100;
-  }
-}