@code-coaching/vuetiful 0.4.1 → 0.5.0

package/dist/types/components/molecules/VDrawer.vue.d.ts

@@ -1,13 +1,5 @@
 import type { CssClasses } from "@/index";
 declare const _default: import("vue").DefineComponent<{
-    position: {
-        type: () => "left" | "top" | "right" | "bottom";
-        default: string;
-    };
-    duration: {
-        type: () => 150 | 300;
-        default: number;
-    };
     regionBackdrop: {
         type: () => CssClasses;
         default: string;
@@ -25,14 +17,6 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    position: {
-        type: () => "left" | "top" | "right" | "bottom";
-        default: string;
-    };
-    duration: {
-        type: () => 150 | 300;
-        default: number;
-    };
     regionBackdrop: {
         type: () => CssClasses;
         default: string;
@@ -50,8 +34,6 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    position: "left" | "top" | "right" | "bottom";
-    duration: 150 | 300;
     regionBackdrop: string;
     regionDrawer: string;
     labelledby: string;

package/dist/types/services/drawer.service.d.ts

@@ -1,7 +1,7 @@
 export interface DrawerSettings {
     id?: string;
     open?: boolean;
-    position?: 'left' | 'top' | 'right' | 'bottom';
+    position?: "left" | "top" | "right" | "bottom";
     duration?: 150 | 300;
     regionBackdrop?: string;
     regionDrawer?: string;
@@ -18,7 +18,6 @@ declare const useDrawer: () => {
         readonly regionDrawer?: string | undefined;
     };
     open: (settings?: DrawerSettings | undefined) => void;
-    close: () => boolean;
-    toggle: () => boolean;
+    close: () => void;
 };
 export { useDrawer };

package/dist/vuetiful.es.mjs

@@ -36,38 +36,35 @@ const useRail = () => {
 };
 const drawer = reactive({
   id: "default",
-  open: false
+  open: false,
+  position: "left",
+  duration: 300,
+  regionBackdrop: "",
+  regionDrawer: ""
 });
 const useDrawer = () => {
   const open = (settings) => {
+    var _a, _b, _c, _d, _e;
     drawer.open = true;
-    if (settings) {
-      Object.keys(settings).forEach((key) => {
-        drawer[key] = settings[key];
-      });
-    }
+    drawer.id = (_a = settings == null ? void 0 : settings.id) != null ? _a : "default";
+    drawer.duration = (_b = settings == null ? void 0 : settings.duration) != null ? _b : 300;
+    drawer.regionBackdrop = (_c = settings == null ? void 0 : settings.regionBackdrop) != null ? _c : "";
+    drawer.regionDrawer = (_d = settings == null ? void 0 : settings.regionDrawer) != null ? _d : "";
+    drawer.position = (_e = settings == null ? void 0 : settings.position) != null ? _e : "left";
+  };
+  const close = () => {
+    drawer.open = false;
   };
-  const close = () => drawer.open = false;
-  const toggle = () => drawer.open = !drawer.open;
   return {
     drawer: readonly(drawer),
     open,
-    close,
-    toggle
+    close
   };
 };
 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: ""
@@ -89,14 +86,17 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { drawer: drawer2, close } = useDrawer();
     const attrs = useAttrs();
-    const { position, duration, regionBackdrop, regionDrawer, labelledby, describedby } = toRefs(props);
+    const { 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 preset = computed(() => {
+      const position = drawer2.position || "left";
+      return presets[position];
+    });
     const elemBackdrop = ref();
     const elemDrawer = ref();
     const onBackdropInteraction = (event) => {
@@ -113,7 +113,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createVNode(Transition, {
-          name: `slide-${unref(position)}-${unref(duration)}`
+          name: `slide-${unref(drawer2).position}-${unref(drawer2).duration}`
         }, {
           default: withCtx(() => [
             unref(drawer2).open ? (openBlock(), createElementBlock("div", {
@@ -132,7 +132,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           _: 3
         }, 8, ["name"]),
         createVNode(Transition, {
-          name: `fade-${unref(duration)}`
+          name: `fade-${unref(drawer2).duration}`
         }, {
           default: withCtx(() => {
             var _a;