@code-coaching/vuetiful 0.25.0 → 0.27.0

package/README.md

@@ -1,73 +1,65 @@
-# Vuetiful
+# vuetiful
 
-A Vite based Vue3 component library - utilizing TailwindCSS.
+## Recommended IDE Setup
 
-TailwindCSS is added as a dependency in the consuming app, but is not mandatory to use.
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 
-# Compatability
+## Type Support for `.vue` Imports in TS
 
-- Vite based Vue3 apps
-- Vite based Quasar apps
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
 
-# Features
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
 
-## Components
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
 
-### Atoms
+## Project Setup
 
-- [x] Avatar
-- [x] Badge
-- [x] Button
-- [ ] Conic Gradients
-- [x] Chip
-- [ ] File Button
-- [ ] File Dropzone
-- [ ] Input Chip
-- [x] Lightswitch (dark mode)
-- [ ] Placeholder
-- [ ] Progress Bar
-- [ ] Progress Radial
-- [x] Radio (group, item, label, description)
-- [ ] Range Slider
-- [x] Switch
+```sh
+pnpm install
+```
 
-### Molecules
+### Compile and Hot-Reload for Development
 
-- [x] Accordion
-- [x] Alert
-- [ ] Autocomplete
-- [x] Code Block (with syntax highlighting and copy to clipboard)
-- [ ] Breadcrumb
-- [ ] Card
-- [x] Drawer
-- [ ] List
-- [x] Listbox
-- [ ] Modal
-- [ ] Paginator
-- [ ] Popup
-- [x] Preview
-- [x] Rail (rail, rail tile)
-- [x] Shell
-- [ ] Stepper
-- [x] Tabs
-- [ ] Table
-- [ ] Table of Contents
-- [ ] Toast
-- [x] Themes
-  - TODO - move from utils to molecules
+```sh
+pnpm dev
+```
 
-## Directives
+### Type-Check, Compile and Minify for Production
 
-- [x] Clipboard
+```sh
+pnpm build
+```
 
-## Utilities
+### Run Unit Tests with [Vitest](https://vitest.dev/)
 
-- [x] Platform (detects if SSR or Browser)
+```sh
+pnpm test:unit
+```
 
-# Docs
+### Run End-to-End Tests with [Playwright](https://playwright.dev)
 
-[Vuetiful Docs](https://vuetiful.dev)
+```sh
+# Install browsers for the first run
+npx playwright install
 
-# Credits
+# When testing on CI, must build the project first
+pnpm build
 
-Inspiration for this project comes from [Skeleton](https://skeleton.dev) - a UI Toolkit for SvelteKit. If you are looking for a SvelteKit UI Toolkit, I highly recommend it.
+# Runs the end-to-end tests
+pnpm test:e2e
+# Runs the tests only on Chromium
+pnpm test:e2e -- --project=chromium
+# Runs the tests of a specific file
+pnpm test:e2e -- tests/example.spec.ts
+# Runs the tests in debug mode
+pnpm test:e2e -- --debug
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+pnpm lint
+```

package/dist/css/animations.css

@@ -0,0 +1,2 @@
+@import './transitions/slide.css';
+@import './transitions/fade.css';

package/{src → dist}/css/overrides/quasar.css

@@ -24,14 +24,14 @@ body,
   /*
   * This is done to prevent double scrollbars
   */
-  height: 100%;
-  overflow: hidden;
+  /* height: 100%; */
+  /* overflow: hidden; */
 
   /*
   * Reset several font properties to browser defaults
   */
   font-size: 16px;
-  font-family: var(--theme-font-family-base), sans-serif;
+  font-family: var(--base-font-family), sans-serif;
   -moz-osx-font-smoothing: auto;
 }
 
@@ -58,81 +58,90 @@ body,
 /* app global css */
 .q-avatar,
 .q-chip .q-avatar {
-  @apply rounded-token;
+  @apply rounded;
   @apply transition-all;
 }
 
 .q-badge {
-  @apply rounded-token;
+  @apply rounded;
 
   @apply transition-all;
 }
 
 .q-banner {
-  @apply rounded-container-token;
+  @apply rounded-container;
   @apply transition-all;
 }
 
 .q-btn {
-  @apply rounded-token;
+  @apply rounded;
   @apply transition-all;
 }
 
 .q-btn-group {
-  @apply rounded-token;
+  @apply rounded;
   @apply transition-all;
 
   width: fit-content;
 }
 
 .q-btn-dropdown {
-  @apply rounded-token;
+  @apply rounded;
   @apply transition-all;
 }
 
 .q-menu {
-  @apply bg-surface-100-800-token;
-  @apply text-surface-900-50-token;
+  @apply bg-surface-100-900;
+  @apply text-surface-950-50;
 
-  @apply rounded-container-token;
+  @apply rounded-container;
   @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);
+  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 rounded-container;
   @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);
+  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 rounded;
   @apply transition-all;
 }
 
 .q-color-picker {
-  @apply rounded-container-token;
+  @apply rounded-container;
   @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);
+  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;
+  @apply rounded-tl-container;
+  @apply rounded-tr-container;
 }
 
 .q-editor {
-  @apply rounded-container-token;
+  @apply rounded-container;
   @apply transition-all;
 }
 
@@ -166,31 +175,31 @@ body,
 * 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 bg-surface-100-900;
+  @apply text-surface-950-50;
 
-  @apply rounded-container-token;
+  @apply rounded-container;
   @apply transition-all;
 }
 
 .q-list .q-card {
-  @apply bg-surface-100-800-token;
-  @apply text-surface-900-50-token;
+  @apply bg-surface-100-900;
+  @apply text-surface-950-50;
 }
 
 .q-list > .q-expansion-item:first-child .q-focus-helper {
-  @apply rounded-tl-container-token;
-  @apply rounded-tr-container-token;
+  @apply rounded-tl-container;
+  @apply rounded-tr-container;
 }
 
 .q-list > .q-expansion-item:last-child .q-focus-helper {
-  @apply rounded-bl-container-token;
-  @apply rounded-br-container-token;
+  @apply rounded-bl-container;
+  @apply rounded-br-container;
 }
 
 .q-list > .q-expansion-item:last-child .q-card {
-  @apply rounded-bl-container-token;
-  @apply rounded-br-container-token;
+  @apply rounded-bl-container;
+  @apply rounded-br-container;
 }
 
 .q-drawer .q-list {
@@ -199,23 +208,23 @@ body,
 }
 
 .q-input {
-  @apply rounded-container-token;
+  @apply rounded-container;
   @apply transition-all;
 }
 
 .q-field__control::before {
-  @apply rounded-container-token;
+  @apply rounded-container;
 }
 
 .q-field--outlined .q-field__control::after {
-  @apply rounded-container-token;
+  @apply rounded-container;
 }
 
 .q-input,
 .q-select,
 .q-file,
 .q-time {
-  @apply rounded-container-token;
+  @apply rounded-container;
 }
 
 .q-item--dark {
@@ -228,43 +237,49 @@ body,
 }
 
 .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);
+  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 bg-surface-100-900;
+  @apply text-surface-950-50;
 
-  @apply rounded-tl-container-token;
-  @apply rounded-tr-container-token;
+  @apply rounded-tl-container;
+  @apply rounded-tr-container;
 }
 
 .q-time__header {
-  @apply bg-surface-300-600-token;
-  @apply text-surface-900-50-token;
+  @apply bg-surface-300-700;
+  @apply text-surface-950-50;
 
-  @apply rounded-tl-container-token;
-  @apply rounded-tr-container-token;
+  @apply rounded-tl-container;
+  @apply rounded-tr-container;
 }
 
 .q-time__clock-position--active,
 .q-time__clock-pointer {
-  @apply bg-surface-900-50-token;
-  @apply text-surface-50-900-token;
+  @apply bg-surface-900-100;
+  @apply text-surface-50-950;
 }
 
 .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);
+  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 bg-surface-100-900;
+  @apply text-surface-950-50;
 
-  @apply rounded-container-token;
+  @apply rounded-container;
 }
 
 .q-date__calendar-item .q-btn {
-  @apply bg-surface-100-800-token;
-  @apply text-surface-900-50-token;
+  @apply bg-surface-100-900;
+  @apply text-surface-950-50;
 
-  @apply rounded-token;
+  @apply rounded;
 }
 
 .q-date__calendar-item .q-btn--unelevated {
@@ -274,14 +289,14 @@ body,
 
 .q-date__navigation .q-btn {
   @apply bg-transparent;
-  @apply text-surface-900-50-token;
+  @apply text-surface-950-50;
 
-  @apply rounded-token;
+  @apply rounded;
 }
 
 .q-date__header {
-  @apply bg-surface-300-600-token;
-  @apply text-surface-900-50-token;
+  @apply bg-surface-300-700;
+  @apply text-surface-950-50;
 }
 
 .q-date__months {

package/{src/styles → dist/css}/transitions/slide.css

@@ -10,6 +10,12 @@
 .slide-left-300-leave-active {
   animation: slide-left 300ms reverse;
 }
+.slide-left-900-enter-active {
+  animation: slide-left 900ms;
+}
+.slide-left-900-leave-active {
+  animation: slide-left 900ms reverse;
+}
 @keyframes slide-left {
   0% {
     transform: translateX(-100%);

package/dist/types/components/atoms/VAvatar.vue.d.ts

@@ -1,96 +1,45 @@
-import { CssClasses } from '@/index';
-declare const _default: import("vue").DefineComponent<{
-    initials: {
-        type: StringConstructor;
-        default: string;
-    };
-    fill: {
-        type: () => CssClasses;
-        default: string;
-    };
-    classInitials: {
-        type: StringConstructor;
-        default: string;
-    };
-    src: {
-        type: StringConstructor;
-        default: string;
-    };
-    alt: {
-        type: StringConstructor;
-        default: string;
-    };
-    fallback: {
-        type: StringConstructor;
-        default: string;
-    };
-    classImage: {
-        type: StringConstructor;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<"xs" | "sm" | "md" | "lg" | "xl">;
-        default: string;
-    };
-    variant: {
-        type: import("vue").PropType<"" | "filled" | "filled-primary" | "filled-secondary" | "filled-tertiary" | "filled-success" | "filled-warning" | "filled-error" | "filled-surface" | "ringed" | "ringed-primary" | "ringed-secondary" | "ringed-tertiary" | "ringed-success" | "ringed-warning" | "ringed-error" | "ringed-surface" | "ghost" | "ghost-primary" | "ghost-secondary" | "ghost-tertiary" | "ghost-success" | "ghost-warning" | "ghost-error" | "ghost-surface" | "soft" | "soft-primary" | "soft-secondary" | "soft-tertiary" | "soft-success" | "soft-warning" | "soft-error" | "soft-surface" | "glass" | "glass-primary" | "glass-secondary" | "glass-tertiary" | "glass-success" | "glass-warning" | "glass-error" | "glass-surface">;
-        default: string;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    initials: {
-        type: StringConstructor;
-        default: string;
-    };
-    fill: {
-        type: () => CssClasses;
-        default: string;
-    };
-    classInitials: {
-        type: StringConstructor;
-        default: string;
-    };
-    src: {
-        type: StringConstructor;
-        default: string;
-    };
-    alt: {
-        type: StringConstructor;
-        default: string;
-    };
-    fallback: {
-        type: StringConstructor;
-        default: string;
-    };
-    classImage: {
-        type: StringConstructor;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<"xs" | "sm" | "md" | "lg" | "xl">;
-        default: string;
-    };
-    variant: {
-        type: import("vue").PropType<"" | "filled" | "filled-primary" | "filled-secondary" | "filled-tertiary" | "filled-success" | "filled-warning" | "filled-error" | "filled-surface" | "ringed" | "ringed-primary" | "ringed-secondary" | "ringed-tertiary" | "ringed-success" | "ringed-warning" | "ringed-error" | "ringed-surface" | "ghost" | "ghost-primary" | "ghost-secondary" | "ghost-tertiary" | "ghost-success" | "ghost-warning" | "ghost-error" | "ghost-surface" | "soft" | "soft-primary" | "soft-secondary" | "soft-tertiary" | "soft-success" | "soft-warning" | "soft-error" | "soft-surface" | "glass" | "glass-primary" | "glass-secondary" | "glass-tertiary" | "glass-success" | "glass-warning" | "glass-error" | "glass-surface">;
-        default: string;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>>, {
-    variant: "" | "filled" | "filled-primary" | "filled-secondary" | "filled-tertiary" | "filled-success" | "filled-warning" | "filled-error" | "filled-surface" | "ringed" | "ringed-primary" | "ringed-secondary" | "ringed-tertiary" | "ringed-success" | "ringed-warning" | "ringed-error" | "ringed-surface" | "ghost" | "ghost-primary" | "ghost-secondary" | "ghost-tertiary" | "ghost-success" | "ghost-warning" | "ghost-error" | "ghost-surface" | "soft" | "soft-primary" | "soft-secondary" | "soft-tertiary" | "soft-success" | "soft-warning" | "soft-error" | "soft-surface" | "glass" | "glass-primary" | "glass-secondary" | "glass-tertiary" | "glass-success" | "glass-warning" | "glass-error" | "glass-surface";
-    unstyled: boolean;
-    fill: string;
-    size: "xs" | "sm" | "md" | "lg" | "xl";
+type AvatarProps = {
+    class?: string;
+    initials?: string;
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    classImage?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AvatarProps>, {
+    src: string;
+    alt: string;
+    fallback: string;
+    classImage: string;
+    initials: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AvatarProps>, {
+    src: string;
+    alt: string;
+    fallback: string;
+    classImage: string;
+    initials: string;
+}>>>, {
     initials: string;
-    classInitials: string;
     src: string;
     alt: string;
     fallback: string;
     classImage: string;
-}>;
+}, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/types/components/atoms/VBadge.vue.d.ts

@@ -1,23 +1,36 @@
-declare const _default: import("vue").DefineComponent<{
-    variant: {
-        type: import("vue").PropType<"" | "filled" | "filled-primary" | "filled-secondary" | "filled-tertiary" | "filled-success" | "filled-warning" | "filled-error" | "filled-surface" | "ringed" | "ringed-primary" | "ringed-secondary" | "ringed-tertiary" | "ringed-success" | "ringed-warning" | "ringed-error" | "ringed-surface" | "ghost" | "ghost-primary" | "ghost-secondary" | "ghost-tertiary" | "ghost-success" | "ghost-warning" | "ghost-error" | "ghost-surface" | "soft" | "soft-primary" | "soft-secondary" | "soft-tertiary" | "soft-success" | "soft-warning" | "soft-error" | "soft-surface" | "glass" | "glass-primary" | "glass-secondary" | "glass-tertiary" | "glass-success" | "glass-warning" | "glass-error" | "glass-surface">;
-        default: string;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    variant: {
-        type: import("vue").PropType<"" | "filled" | "filled-primary" | "filled-secondary" | "filled-tertiary" | "filled-success" | "filled-warning" | "filled-error" | "filled-surface" | "ringed" | "ringed-primary" | "ringed-secondary" | "ringed-tertiary" | "ringed-success" | "ringed-warning" | "ringed-error" | "ringed-surface" | "ghost" | "ghost-primary" | "ghost-secondary" | "ghost-tertiary" | "ghost-success" | "ghost-warning" | "ghost-error" | "ghost-surface" | "soft" | "soft-primary" | "soft-secondary" | "soft-tertiary" | "soft-success" | "soft-warning" | "soft-error" | "soft-surface" | "glass" | "glass-primary" | "glass-secondary" | "glass-tertiary" | "glass-success" | "glass-warning" | "glass-error" | "glass-surface">;
-        default: string;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>>, {
-    variant: "" | "filled" | "filled-primary" | "filled-secondary" | "filled-tertiary" | "filled-success" | "filled-warning" | "filled-error" | "filled-surface" | "ringed" | "ringed-primary" | "ringed-secondary" | "ringed-tertiary" | "ringed-success" | "ringed-warning" | "ringed-error" | "ringed-surface" | "ghost" | "ghost-primary" | "ghost-secondary" | "ghost-tertiary" | "ghost-success" | "ghost-warning" | "ghost-error" | "ghost-surface" | "soft" | "soft-primary" | "soft-secondary" | "soft-tertiary" | "soft-success" | "soft-warning" | "soft-error" | "soft-surface" | "glass" | "glass-primary" | "glass-secondary" | "glass-tertiary" | "glass-success" | "glass-warning" | "glass-error" | "glass-surface";
-    unstyled: boolean;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    class?: string | undefined;
+}>, {
+    class: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    class?: string | undefined;
+}>, {
+    class: string;
+}>>>, {
+    class: string;
+}, {}>, {
+    default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};