@code-coaching/vuetiful 0.3.0 → 0.4.0

package/dist/vuetiful.es.mjs

@@ -1,5 +1,5 @@
-import { defineComponent, useAttrs, openBlock, createBlock, resolveDynamicComponent, normalizeClass, unref, withCtx, createElementBlock, Fragment, createTextVNode, toDisplayString, createCommentVNode, renderSlot, provide, createElementVNode, ref, inject, mergeProps, computed, withDirectives, readonly, onMounted, resolveComponent, createVNode, renderList, pushScopeId, popScopeId } from "vue";
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+import { defineComponent, useAttrs, openBlock, createBlock, resolveDynamicComponent, normalizeClass, unref, withCtx, createElementBlock, Fragment, createTextVNode, toDisplayString, createCommentVNode, renderSlot, ref, reactive, readonly, toRefs, computed, onMounted, createVNode, Transition, provide, createElementVNode, inject, mergeProps, withDirectives, resolveComponent, renderList, pushScopeId, popScopeId } from "vue";
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "VButton",
   props: {
     tag: {
@@ -28,6 +28,131 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const selectedRailTile = ref("");
+const useRail = () => {
+  return {
+    selectedRailTile
+  };
+};
+const drawer = reactive({
+  id: "default",
+  open: false
+});
+const useDrawer = () => {
+  const open = (settings) => {
+    drawer.open = true;
+    if (settings) {
+      Object.keys(settings).forEach((key) => {
+        drawer[key] = settings[key];
+      });
+    }
+  };
+  const close = () => drawer.open = false;
+  const toggle = () => drawer.open = !drawer.open;
+  return {
+    drawer: readonly(drawer),
+    open,
+    close,
+    toggle
+  };
+};
+const _hoisted_1$4 = ["aria-labelledby", "aria-describedby"];
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "VDrawer",
+  props: {
+    position: {
+      type: String,
+      default: "left"
+    },
+    duration: {
+      type: Number,
+      default: 300
+    },
+    regionBackdrop: {
+      type: String,
+      default: ""
+    },
+    regionDrawer: {
+      type: String,
+      default: ""
+    },
+    labelledby: {
+      type: String,
+      default: ""
+    },
+    describedby: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const { drawer: drawer2, close } = useDrawer();
+    const attrs = useAttrs();
+    const { position, duration, regionBackdrop, regionDrawer, labelledby, describedby } = toRefs(props);
+    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]);
+    const elemBackdrop = ref();
+    const elemDrawer = ref();
+    const onBackdropInteraction = (event) => {
+      if (event.target === elemBackdrop.value)
+        close();
+    };
+    const onKeydownWindow = (event) => {
+      if (event.code === "Escape")
+        close();
+    };
+    onMounted(() => {
+      window.addEventListener("keydown", onKeydownWindow);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(Transition, {
+          name: `slide-${unref(position)}-${unref(duration)}`
+        }, {
+          default: withCtx(() => [
+            unref(drawer2).open ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              ref_key: "elemDrawer",
+              ref: elemDrawer,
+              class: normalizeClass(`drawer absolute overflow-y-auto shadow-xl transition-transform bg-surface-100-800-token ${unref(preset).width} ${unref(preset).height} ${unref(preset).rounded} ${unref(preset).alignment} z-50 ${unref(regionDrawer)}`),
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": unref(labelledby),
+              "aria-describedby": unref(describedby)
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 10, _hoisted_1$4)) : createCommentVNode("", true)
+          ]),
+          _: 3
+        }, 8, ["name"]),
+        createVNode(Transition, {
+          name: `fade-${unref(duration)}`
+        }, {
+          default: withCtx(() => {
+            var _a;
+            return [
+              unref(drawer2).open ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                ref_key: "elemBackdrop",
+                ref: elemBackdrop,
+                class: normalizeClass(`drawer-backdrop backdrop-blur-xs fixed top-0 left-0 right-0 bottom-0 flex bg-surface-backdrop-token ${unref(regionBackdrop)} z-40 ${(_a = unref(attrs).class) != null ? _a : ""}`),
+                onMousedown: onBackdropInteraction,
+                onTouchstart: onBackdropInteraction
+              }, null, 34)) : createCommentVNode("", true)
+            ];
+          }),
+          _: 1
+        }, 8, ["name"])
+      ], 64);
+    };
+  }
+});
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "VRail",
   props: {
@@ -80,12 +205,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const selectedRailTile = ref("");
-const useRail = () => {
-  return {
-    selectedRailTile
-  };
-};
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "VRailTile",
   props: {
@@ -117,7 +236,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const { selectedRailTile: selectedRailTile2 } = useRail();
     const active = inject("active");
     const hover = inject("hover");
-    const onClickHandler = (event) => {
+    const onClickHandler = () => {
       if (!props.value)
         return;
       selectedRailTile2.value = props.value;
@@ -235,10 +354,11 @@ const _sfc_main$3 = defineComponent({
 var components = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
-  VButton: _sfc_main$6,
+  VButton: _sfc_main$7,
   VRail: _sfc_main$5,
   VRailTile: _sfc_main$4,
-  VShell: _sfc_main$3
+  VShell: _sfc_main$3,
+  VDrawer: _sfc_main$6
 });
 var main = "";
 var tailwind = "";
@@ -46918,7 +47038,7 @@ var themeSwitcher_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _sfc_main = defineComponent({
   components: {
     DarkModeSwitch,
-    VButton: _sfc_main$6
+    VButton: _sfc_main$7
   },
   props: {
     bgLight: {
@@ -47161,4 +47281,4 @@ function install(app) {
   }
 }
 var index = { install };
-export { _sfc_main$2 as CodeBlock, DarkModeSwitch, themeSwitcher as ThemeSwitcher, _sfc_main$6 as VButton, _sfc_main$5 as VRail, _sfc_main$4 as VRailTile, _sfc_main$3 as VShell, index as default, useDarkMode, useRail, useTheme, clipboard as vClipboard };
+export { _sfc_main$2 as CodeBlock, DarkModeSwitch, themeSwitcher as ThemeSwitcher, _sfc_main$7 as VButton, _sfc_main$6 as VDrawer, _sfc_main$5 as VRail, _sfc_main$4 as VRailTile, _sfc_main$3 as VShell, index as default, useDarkMode, useDrawer, useRail, useTheme, clipboard as vClipboard };