@code-coaching/vuetiful 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",
     "prebuild": "node 'scripts/intellisense.js'",

package/src/components/index.ts

@@ -1,4 +1,4 @@
 import { VButton } from "./atoms";
-import { VRail, VRailTile, VShell } from "./molecules";
+import { VDrawer, VRail, VRailTile, VShell } from "./molecules";
 
-export { VButton, VRail, VRailTile, VShell };
+export { VButton, VRail, VRailTile, VShell, VDrawer };

package/src/components/molecules/VDrawer.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { CssClasses } from "@/index";
+import { useDrawer } from "@/services";
+import { Ref, computed, onMounted, ref, toRefs, useAttrs } from "vue";
+
+const { drawer, close } = useDrawer();
+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,
+    default: "",
+  },
+  regionDrawer: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+
+  // a11y
+  labelledby: {
+    type: String,
+    default: "",
+  },
+  describedby: {
+    type: String,
+    default: "",
+  },
+});
+
+// prettier-ignore
+const { position, duration, 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' },
+	bottom: { alignment: 'bottom-0', width: 'w-full', height: ' h-[50%]', rounded: 'rounded-tl-container-token rounded-tr-container-token' },
+	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]);
+// #endregion
+
+// #region template refs
+const elemBackdrop: Ref<HTMLElement> = ref() as Ref<HTMLElement>;
+const elemDrawer: Ref<HTMLElement> = ref() as Ref<HTMLElement>;
+// #endregion
+
+// #region Event Handlers
+const onBackdropInteraction = (event: Event) => {
+  if (event.target === elemBackdrop.value) close();
+};
+
+const onKeydownWindow = (event: KeyboardEvent) => {
+  if (event.code === "Escape") close();
+};
+onMounted(() => {
+  window.addEventListener("keydown", onKeydownWindow);
+});
+// #endregion
+</script>
+
+<template>
+  <transition :name="`slide-${position}-${duration}`">
+    <div
+      v-if="drawer.open"
+      ref="elemDrawer"
+      :class="`drawer absolute overflow-y-auto shadow-xl transition-transform bg-surface-100-800-token ${preset.width} ${preset.height} ${preset.rounded} ${preset.alignment} z-50 ${regionDrawer}`"
+      role="dialog"
+      aria-modal="true"
+      :aria-labelledby="labelledby"
+      :aria-describedby="describedby"
+    >
+      <slot />
+    </div>
+  </transition>
+  <transition :name="`fade-${duration}`">
+    <div
+      v-if="drawer.open"
+      ref="elemBackdrop"
+      :class="`drawer-backdrop backdrop-blur-xs fixed top-0 left-0 right-0 bottom-0 flex bg-surface-backdrop-token ${regionBackdrop} z-40 ${
+        attrs.class ?? ''
+      }`"
+      @mousedown="onBackdropInteraction"
+      @touchstart="onBackdropInteraction"
+    ></div>
+  </transition>
+</template>

package/src/components/molecules/VRailTile.vue

@@ -37,7 +37,7 @@ const { selectedRailTile } = useRail();
 const active = inject("active");
 const hover = inject("hover");
 
-const onClickHandler = (event: MouseEvent) => {
+const onClickHandler = () => {
   if (!props.value) return;
   selectedRailTile.value = props.value;
   emit("click");
@@ -51,10 +51,7 @@ const onKeyHandler = (event: KeyboardEvent) => {
 </script>
 
 <template>
-  <div
-    @click="onClickHandler"
-    @keydown="onKeyHandler"
-  >
+  <div @click="onClickHandler" @keydown="onKeyHandler">
     <component
       :is="tag"
       v-bind="attrs"

package/src/components/molecules/index.ts

@@ -1,5 +1,6 @@
+import VDrawer from "./VDrawer.vue";
 import VRail from "./VRail.vue";
 import VRailTile from "./VRailTile.vue";
 import VShell from "./VShell.vue";
 
-export { VRail, VRailTile, VShell };
+export { VRail, VRailTile, VShell, VDrawer };

package/src/directives/index.ts

@@ -1,5 +1,3 @@
-import vClipboard from './clipboard'
+import vClipboard from "./clipboard";
 
-export {
-  vClipboard
-}
+export { vClipboard };

package/src/services/drawer.service.ts

@@ -0,0 +1,43 @@
+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,
+});
+
+const useDrawer = () => {
+  const open = (settings?: DrawerSettings) => {
+    drawer.open = true;
+    if (settings) {
+      Object.keys(settings).forEach((key: string) => {
+        drawer[key] = settings[key];
+      });
+    }
+  };
+
+  const close = () => (drawer.open = false);
+
+  const toggle = () => (drawer.open = !drawer.open);
+
+  return {
+    drawer: readonly(drawer),
+    open,
+    close,
+    toggle,
+  };
+};
+
+export { useDrawer };

package/src/services/index.ts

@@ -1,3 +1,4 @@
 import { useRail } from "./rail.service";
+import { useDrawer } from "./drawer.service";
 
-export { useRail };
+export { useRail, useDrawer };

package/src/styles/all.css

@@ -3,19 +3,22 @@
 /* NOTE: The order shown below is required */
 
 /* Tailwind Directives */
-@import 'tailwind.css';
+@import "tailwind.css";
 
 /* Global Styles */
-@import 'core.css';
+@import "core.css";
 
 /* Typographical Settings */
-@import 'typography.css';
+@import "typography.css";
 
 /* Imports all Tailwind Elements */
-@import 'elements.css';
+@import "elements.css";
 
 /* Imports all Variant Styles */
-@import 'variants.css';
+@import "variants.css";
+
+/* Imports all Transitions */
+@import "transitions.css";
 
 /* Imports all Component Styles */
-@import '../../dist/style.css'
+@import "../../dist/style.css";

package/src/styles/transitions/fade.css

@@ -0,0 +1,14 @@
+.fade-150-enter-active,
+.fade-150-leave-active {
+  transition: opacity 150ms;
+}
+.fade-300-enter-active,
+.fade-300-leave-active {
+  transition: opacity 300ms;
+}
+.fade-150-enter-from,
+.fade-150-leave-to,
+.fade-300-enter-from,
+.fade-300-leave-to {
+  opacity: 0;
+}

package/src/styles/transitions/slide.css

@@ -0,0 +1,83 @@
+.slide-left-150-enter-active {
+  animation: slide-left 150ms;
+}
+.slide-left-150-leave-active {
+  animation: slide-left 150ms reverse;
+}
+.slide-left-300-enter-active {
+  animation: slide-left 300ms;
+}
+.slide-left-300-leave-active {
+  animation: slide-left 300ms reverse;
+}
+@keyframes slide-left {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.slide-top-150-enter-active {
+  animation: slide-top 150ms;
+}
+.slide-top-150-leave-active {
+  animation: slide-top 150ms reverse;
+}
+.slide-top-300-enter-active {
+  animation: slide-top 300ms;
+}
+.slide-top-300-leave-active {
+  animation: slide-top 300ms reverse;
+}
+@keyframes slide-top {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.slide-right-150-enter-active {
+  animation: slide-right 150ms;
+}
+.slide-right-150-leave-active {
+  animation: slide-right 150ms reverse;
+}
+.slide-right-300-enter-active {
+  animation: slide-right 300ms;
+}
+.slide-right-300-leave-active {
+  animation: slide-right 300ms reverse;
+}
+@keyframes slide-right {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.slide-bottom-150-enter-active {
+  animation: slide-bottom 150ms;
+}
+.slide-bottom-150-leave-active {
+  animation: slide-bottom 150ms reverse;
+}
+.slide-bottom-300-enter-active {
+  animation: slide-bottom 300ms;
+}
+.slide-bottom-300-leave-active {
+  animation: slide-bottom 300ms reverse;
+}
+@keyframes slide-bottom {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

package/src/styles/transitions.css

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