@xy-planning-network/trees 0.13.4 → 0.13.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.13.4",
+  "version": "0.13.5",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",

package/src/lib-components/forms/TextArea.vue

@@ -44,6 +44,7 @@ const { aria, inputID, isRequired, errorState, onInvalid, inputValidation } =
           : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-xy-blue-500',
       ]"
       :placeholder="placeholder"
+      :rows="rows"
       v-bind="$attrs"
       @input="inputValidation"
       @invalid="onInvalid"

package/src/lib-components/overlays/Slideover.vue

@@ -7,12 +7,38 @@ import {
   TransitionRoot,
 } from "@headlessui/vue"
 import { XIcon } from "@heroicons/vue/outline"
-import { watch } from "vue"
+import { computed, watch } from "vue"
 
-defineProps<{
-  header: string
-  description: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    header: string
+    description: string
+    size?: "sm" | "md" | "lg"
+  }>(),
+  {
+    size: "sm",
+  }
+)
+
+const layout = computed(() => {
+  switch (props.size) {
+    case "lg":
+      return {
+        maxWidth: "max-w-6xl",
+        padding: "py-6 px-4 sm:px-20 sm:py-14",
+      }
+    case "md":
+      return {
+        maxWidth: "max-w-4xl",
+        padding: "py-6 px-4 sm:px-16 sm:py-12",
+      }
+    default: // span="sm"
+      return {
+        maxWidth: "max-w-md",
+        padding: "py-6 px-4 sm:px-6 sm:py-4",
+      }
+  }
+})
 
 const open = defineModel<boolean>({ required: true })
 
@@ -48,11 +74,11 @@ watch(open, (isOpen) => {
             leave-from="translate-x-0"
             leave-to="translate-x-full"
           >
-            <div class="w-screen max-w-md">
+            <div :class="['w-screen', layout.maxWidth]">
               <div
                 class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll"
               >
-                <div class="py-6 px-4 bg-xy-blue-700 sm:px-6">
+                <div :class="['bg-xy-blue-700', layout.padding]">
                   <div class="flex items-center justify-between">
                     <DialogTitle as="h3" class="text-white">
                       {{ header }}
@@ -74,7 +100,7 @@ watch(open, (isOpen) => {
                     ></p>
                   </div>
                 </div>
-                <div class="relative flex-1 py-6 px-4 sm:px-6">
+                <div :class="['relative flex-1', layout.padding]">
                   <slot></slot>
                 </div>
 

package/types/composables/forms.d.ts

@@ -47,6 +47,7 @@ export interface NumericInput extends Input {
 }
 export interface TextareaInput extends Input {
     modelValue?: string | number | null;
+    rows?: number;
 }
 export interface OptionsInput extends Input {
     modelValue?: string | number | null;

package/types/lib-components/overlays/Slideover.vue.d.ts

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     header: string;
     description: string;
+    size?: "sm" | "md" | "lg";
 };
 type __VLS_PublicProps = {
     modelValue: boolean;
@@ -12,7 +13,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+}>, {
+    size: "sm" | "md" | "lg";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;
     footer?(_: {}): any;
 }>;