@code-coaching/vuetiful 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",
     "prebuild": "node 'scripts/intellisense.js'",
@@ -9,6 +9,7 @@
     "docs:dev": "cd docs && npm run dev",
     "docs:build": "cd docs && npm run build",
     "docs:serve": "cd docs && npm run serve",
+    "format": "prettier --write \"**/*.{js,ts,vue,css,html,md,json}\" --ignore-path .gitignore",
     "test": "vitest",
     "coverage": "vitest run --coverage"
   },

package/src/assets/main.css

@@ -1,15 +1,15 @@
 @font-face {
-  font-family: 'myfont';
-  src: url('fonts/myfont.woff');
+  font-family: "myfont";
+  src: url("fonts/myfont.woff");
 }
 
-[class^='icon-'],
-[class*=' icon-'] {
-  font-family: 'myfont' !important;
+[class^="icon-"],
+[class*=" icon-"] {
+  font-family: "myfont" !important;
 }
 
 .icon-heart:before {
-  content: '\e9da';
+  content: "\e9da";
 }
 
 .global-example {

package/src/components/molecules/VDrawer.vue

@@ -8,15 +8,6 @@ const attrs = useAttrs();
 
 // #region Props
 const props = defineProps({
-  position: {
-    type: String as () => "left" | "top" | "right" | "bottom",
-    default: "left",
-  },
-  duration: {
-    type: Number as () => 150 | 300,
-    default: 300,
-  },
-
   // Regions
   regionBackdrop: {
     type: String as () => CssClasses,
@@ -39,7 +30,7 @@ const props = defineProps({
 });
 
 // prettier-ignore
-const { position, duration, regionBackdrop, regionDrawer, labelledby, describedby } = toRefs(props);
+const { regionBackdrop, regionDrawer, labelledby, describedby } = toRefs(props);
 // prettier-ignore
 const presets = {
 	top: { alignment: 'top-0', width: 'w-full', height: 'h-[50%]', rounded: 'rounded-bl-container-token rounded-br-container-token' },
@@ -47,7 +38,10 @@ const presets = {
 	left: { alignment: 'lef-0', width: 'w-[90%]', height: 'h-full', rounded: 'rounded-tr-container-token rounded-br-container-token' },
 	right: { alignment: 'right-0', width: 'w-[90%]', height: 'h-full', rounded: 'rounded-tl-container-token rounded-bl-container-token' }
 };
-const preset = computed(() => presets[position.value]);
+const preset = computed(() => {
+  const position = drawer.position || "left";
+  return presets[position];
+});
 // #endregion
 
 // #region template refs
@@ -70,7 +64,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <transition :name="`slide-${position}-${duration}`">
+  <transition :name="`slide-${drawer.position}-${drawer.duration}`">
     <div
       v-if="drawer.open"
       ref="elemDrawer"
@@ -83,7 +77,7 @@ onMounted(() => {
       <slot />
     </div>
   </transition>
-  <transition :name="`fade-${duration}`">
+  <transition :name="`fade-${drawer.duration}`">
     <div
       v-if="drawer.open"
       ref="elemBackdrop"

package/src/env.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="vite/client" />
 
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }

package/src/services/drawer.service.ts

@@ -1,10 +1,10 @@
-import { reactive, readonly } from 'vue';
+import { reactive, readonly } from "vue";
 
 export interface DrawerSettings {
   id?: string;
   open?: boolean;
 
-  position?: 'left' | 'top' | 'right' | 'bottom';
+  position?: "left" | "top" | "right" | "bottom";
   duration?: 150 | 300;
 
   regionBackdrop?: string;
@@ -14,29 +14,32 @@ export interface DrawerSettings {
 }
 
 const drawer = reactive<DrawerSettings>({
-  id: 'default',
+  id: "default",
   open: false,
+  position: "left",
+  duration: 300,
+  regionBackdrop: "",
+  regionDrawer: "",
 });
 
 const useDrawer = () => {
   const open = (settings?: DrawerSettings) => {
     drawer.open = true;
-    if (settings) {
-      Object.keys(settings).forEach((key: string) => {
-        drawer[key] = settings[key];
-      });
-    }
+    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);
-
-  const toggle = () => (drawer.open = !drawer.open);
+  const close = () => {
+    drawer.open = false;
+  };
 
   return {
     drawer: readonly(drawer),
     open,
     close,
-    toggle,
   };
 };
 

package/src/styles/core.css

@@ -1,65 +1,65 @@
 /* Stylesheet: core.css */
 
 @layer base {
-	/* === Body Styles === */
+  /* === Body Styles === */
 
-	body {
-		@apply bg-surface-50-900-token;
-	}
+  body {
+    @apply bg-surface-50-900-token;
+  }
 
-	/* === Selection === */
+  /* === Selection === */
 
-	::selection {
-		@apply bg-primary-500/30;
-	}
+  ::selection {
+    @apply bg-primary-500/30;
+  }
 
-	/* === Focus === */
+  /* === Focus === */
 
-	/* Outline (do not change) */
-	/* http://www.outlinenone.com/ */
+  /* 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);
-	}
+  /* 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 === */
+  /* === Scrollbars === */
 
-	::-webkit-scrollbar {
-		@apply w-2;
-	}
-	::-webkit-scrollbar-track {
-		@apply !bg-surface-50-900-token px-[1px];
-	}
-	::-webkit-scrollbar-thumb {
-		@apply rounded-token bg-surface-400-500-token;
-	}
+  ::-webkit-scrollbar {
+    @apply w-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);
-	}
+  /* 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 */
-	}
+  /* Hide Scrollbars */
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .hide-scrollbar {
+    -ms-overflow-style: none; /* IE/Edge */
+    scrollbar-width: none; /* Firefox */
+  }
 
-	/* === Horizontal Rules === */
+  /* === Horizontal Rules === */
 
-	hr:not(.divider) {
-		@apply block border-t border-solid border-surface-300-600-token;
-	}
-	.divider-vertical {
-		@apply inline-block border-l border-solid border-surface-300-600-token min-h-[10px] mx-auto;
-	}
+  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 +1,17 @@
 /* Tailwind Elements: alerts.css */
 
 @layer components {
-	.alert {
-		@apply flex flex-col items-start lg:items-center lg:flex-row p-4 space-y-4 lg:space-y-0 lg:space-x-4;
-		/* 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;
-	}
+  .alert {
+    @apply flex flex-col items-start space-y-4 p-4 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-4;
+    /* 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 +1,31 @@
 /* Tailwind Elements: badges.css */
 
 @layer components {
-	.badge {
-		/* Core */
-		@apply inline-flex justify-center items-center space-x-2 whitespace-nowrap;
-		/* Text */
-		@apply font-semibold text-xs;
-		/* Padding */
-		@apply px-2 py-1;
-		/* Theme: Rounded */
-		@apply rounded-token;
-	}
+  .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 w-5 h-5 flex justify-center items-center rounded-full;
-		/* Text */
-		@apply font-semibold text-xs;
-		/* Shadow */
-		@apply shadow;
-	}
+  .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 === */
+  /* === Variants === */
 
-	/* Glass */
-	.badge-glass {
-		@apply bg-surface-500/20 dark:bg-surface-500/20 backdrop-blur-lg;
-		@apply ring-[1px] ring-neutral-900/5 dark:ring-neutral-50/5 ring-inset;
-	}
+  /* 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 +1,26 @@
 /* Tailwind Elements: breadcrumbs.css */
 
 @layer components {
-	.breadcrumb,
-	.breadcrumb-nonresponsive {
-		@apply flex items-center space-x-4 w-full hide-scrollbar overflow-x-auto;
-	}
+  .breadcrumb,
+  .breadcrumb-nonresponsive {
+    @apply hide-scrollbar flex w-full items-center space-x-4 overflow-x-auto;
+  }
 
-	.crumb {
-		@apply flex justify-center items-center space-x-2;
-	}
-	.crumb-separator {
-		@apply flex text-surface-700-200-token opacity-50;
-	}
+  .crumb {
+    @apply flex items-center justify-center space-x-2;
+  }
+  .crumb-separator {
+    @apply flex opacity-50 text-surface-700-200-token;
+  }
 
-	/* === Auto-Responsive === */
+  /* === 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;
-	}
+  .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 +1,103 @@
 /* Tailwind Elements: button.css */
 
 @layer components {
-	/* === States === */
+  /* === States === */
 
-	button:disabled {
-		@apply !opacity-50 !cursor-not-allowed active:scale-100 hover:brightness-100;
-	}
+  button:disabled {
+    @apply !cursor-not-allowed !opacity-50 hover:brightness-100 active:scale-100;
+  }
 
-	.button-base-styles {
-		/* Size (match base)  */
-		@apply text-base px-5 py-[9px];
-		/* Core */
-		@apply text-center whitespace-nowrap;
-		/* Flex Columns */
-		@apply inline-flex justify-center items-center space-x-2;
-		/* States */
-		@apply hover:brightness-[1.15];
-		/* Transitions */
-		@apply transition-all;
-	}
+  .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. */
+  /* === Button === */
+  /* Standard button/anchor tag elements. */
 
-	.btn {
-		@apply button-base-styles rounded-token active:scale-[95%] active:brightness-90;
-	}
+  .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 text-sm px-3 py-1.5;
-	}
-	.btn-lg {
-		@apply text-lg px-7 py-3;
-	}
-	.btn-xl {
-		@apply text-xl px-9 py-4;
-	}
+  /* 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. */
+  /* === Icon Button === */
+  /* A circular button meant for housing icons. */
 
-	.btn-icon {
-		/* Extend Base Button Clases */
-		@apply btn;
-		/* Size (match base) */
-		@apply text-base aspect-square w-[43px];
-		/* Rounded */
-		@apply rounded-full;
-	}
+  .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 text-sm aspect-square w-[33px];
-	}
-	.btn-icon-base {
-		@apply text-base aspect-square w-[43px];
-	}
-	.btn-icon-lg {
-		@apply text-lg aspect-square w-[53px];
-	}
-	.btn-icon-xl {
-		@apply text-xl aspect-square w-[63px];
-	}
+  /* 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 border-0 btn variant-filled btn-sm mr-2;
-	}
+  /* File Input Button */
+  input[type="file"]:not(.file-dropzone-input)::file-selector-button {
+    @apply btn variant-filled btn-sm mr-2 border-0;
+  }
 
-	/* === Button Groups === */
+  /* === 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;
-	}
+  .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 !no-underline !text-inherit;
-	}
+  /* 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-t-0 border-l border-surface-500/20;
-	}
-	.btn-group-vertical * + * {
-		@apply border-t border-l-0 border-surface-500/20;
-	}
+  /* Set Neutral Divider */
+  .btn-group * + * {
+    @apply border-t-0 border-l border-surface-500/20;
+  }
+  .btn-group-vertical * + * {
+    @apply border-t border-l-0 border-surface-500/20;
+  }
 }

package/src/styles/elements/cards.css

@@ -1,32 +1,32 @@
 /* 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;
-	}
+  .card {
+    /* background */
+    @apply bg-surface-100-800-token;
+    /* Ring */
+    @apply ring-outline-token;
+    /* Theme: Rounded */
+    @apply rounded-container-token;
+  }
 
-	/* === Regions === */
+  /* === Regions === */
 
-	.card-header {
-		@apply p-4 pb-0;
-	}
+  .card-header {
+    @apply p-4 pb-0;
+  }
 
-	.card-footer {
-		@apply p-4 pt-0;
-	}
+  .card-footer {
+    @apply p-4 pt-0;
+  }
 
-	/* === States === */
+  /* === States === */
 
-	a.card {
-		@apply transition-all hover:brightness-105;
-	}
+  a.card {
+    @apply transition-all hover:brightness-105;
+  }
 
-	.card-hover {
-		@apply transition-all hover:scale-[101%] hover:shadow-xl;
-	}
+  .card-hover {
+    @apply transition-all hover:scale-[101%] hover:shadow-xl;
+  }
 }