@revojs/ui 0.2.12 → 0.2.13

package/dist/vue/components/shell.vue

@@ -0,0 +1,38 @@
+<template>
+    <header class="z-10 shrink-0 border-b border-border bg-background" :class="sticky ? 'sticky top-0' : ''">
+        <Stack direction="horizontal" align="center" gap="1" padding="1">
+            <slot name="prefix" />
+
+            <h1 v-if="label || $slots.heading" class="min-w-0 flex-1 truncate p-3 text-sm font-semibold">
+                <slot name="heading">{{ label }}</slot>
+            </h1>
+            <template v-else-if="headingLabel">
+                <h1 class="sr-only">{{ headingLabel }}</h1>
+
+                <span aria-hidden="true" class="min-w-0 flex-1" />
+            </template>
+            <span v-else aria-hidden="true" class="min-w-0 flex-1" />
+
+            <slot name="actions"><slot /></slot>
+        </Stack>
+
+        <Stack
+            v-if="$slots.navigation"
+            is="nav"
+            :aria-label="navigationLabel"
+            direction="horizontal"
+            gap="1"
+            padding="1"
+            class="overflow-x-auto border-t border-border [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        >
+            <slot name="navigation" />
+        </Stack>
+    </header>
+</template>
+
+<script setup lang="ts">
+import type { ShellProps } from "../../components/shell";
+import Stack from "./stack.vue";
+
+const { label, headingLabel, sticky = true, navigationLabel = "Page navigation" } = defineProps<ShellProps>();
+</script>

package/dist/vue/components/textarea.vue

@@ -0,0 +1,49 @@
+<template>
+    <textarea
+        ref="control"
+        class="block w-full min-w-0 rounded-ui outline-ring placeholder:opacity-50 focus-visible:outline-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2 aria-invalid:ring-destructive"
+        :class="[texts[text], resizes[resize], variants[variant]]"
+        :value="modelValue"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+        :aria-invalid="invalid ?? ($attrs as HTMLAttributes)['aria-invalid']"
+        @input="$emit('update:modelValue', ($event.currentTarget as HTMLTextAreaElement).value)"
+    ></textarea>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef, type HTMLAttributes } from "vue";
+import type { TextareaProps, TextareaResize, TextareaText, TextareaVariant } from "../../components/textarea";
+
+const {
+    modelValue = "",
+    text = "sm",
+    resize = "vertical",
+    variant = "default",
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = undefined,
+} = defineProps<TextareaProps>();
+
+defineEmits<{ "update:modelValue": [value: string] }>();
+
+const control = useTemplateRef("control");
+
+defineExpose({ focus: () => control.value?.focus() });
+
+const texts: Record<TextareaText, string> = { sm: "text-sm", md: "text-base" };
+
+const resizes: Record<TextareaResize, string> = {
+    none: "resize-none",
+    vertical: "resize-y",
+    horizontal: "resize-x",
+    both: "resize",
+};
+
+const variants: Record<TextareaVariant, string> = {
+    default: "bg-secondary p-3 ring-1 ring-input ring-inset",
+    plain: "bg-transparent p-0",
+};
+</script>

package/dist/vue/components/upload.vue

@@ -13,30 +13,34 @@
             @dragleave="leave"
             @drop.prevent="drop"
         >
-            <Stack v-if="modelValue" direction="horizontal" align="center" justify="between" gap="0">
-                <span class="min-w-0 flex-1 p-3">
-                    <span class="block truncate px-1">{{
-                        "name" in modelValue ? modelValue.name : "File selected"
-                    }}</span>
-                </span>
-
-                <Button
-                    size="icon"
-                    variant="secondary"
-                    :text="text"
-                    :icon-prefix="CloseIcon"
-                    aria-label="Remove file"
-                    :disabled="disabled"
-                    @click="remove"
-                />
-            </Stack>
-            <Stack v-else align="center" gap="3" padding="5" class="text-center">
-                <Icon :is="UploadIcon" :size="24" />
-
-                <span class="text-sm opacity-60"> Drag and drop a file here </span>
-
-                <Button label="Browse files" variant="outline" :disabled="disabled" @click="input?.click()" />
-            </Stack>
+            <slot v-if="modelValue" name="file" :file="modelValue" :remove="remove" :disabled="disabled">
+                <Stack direction="horizontal" align="center" justify="between" gap="0">
+                    <span class="min-w-0 flex-1 p-3">
+                        <span class="block truncate px-1">{{
+                            "name" in modelValue ? modelValue.name : "File selected"
+                        }}</span>
+                    </span>
+
+                    <Button
+                        size="icon"
+                        variant="secondary"
+                        :text="text"
+                        :icon-prefix="CloseIcon"
+                        aria-label="Remove file"
+                        :disabled="disabled"
+                        @click="remove"
+                    />
+                </Stack>
+            </slot>
+            <slot v-else name="empty" :browse="browse" :disabled="disabled" :dragging="isOver">
+                <Stack align="center" gap="3" padding="5" class="text-center">
+                    <Icon :is="UploadIcon" :size="24" />
+
+                    <span class="text-sm opacity-60"> Drag and drop a file here </span>
+
+                    <Button label="Browse files" variant="outline" :disabled="disabled" @click="browse" />
+                </Stack>
+            </slot>
 
             <input
                 ref="input"
@@ -84,6 +88,11 @@ const emit = defineEmits<{
     "update:modelValue": [value?: Blob | File];
 }>();
 
+defineSlots<{
+    empty?: (props: { browse: () => void; disabled: boolean; dragging: boolean }) => unknown;
+    file?: (props: { file: Blob | File; remove: () => void; disabled: boolean }) => unknown;
+}>();
+
 const input = useTemplateRef("input");
 
 const isOver = ref(false);
@@ -107,6 +116,12 @@ const texts: Record<UploadText, string> = {
     md: "text-base",
 };
 
+function browse() {
+    if (!disabled) {
+        input.value?.click();
+    }
+}
+
 function change() {
     const file = input.value?.files?.item(0);
 
@@ -137,6 +152,10 @@ function leave(event: DragEvent) {
 }
 
 function remove() {
+    if (disabled) {
+        return;
+    }
+
     if (input.value) {
         input.value.value = "";
     }

package/dist/vue/index.d.ts

@@ -8,11 +8,15 @@ export { default as Counter } from "./components/counter.vue";
 export { default as Dialog } from "./components/dialog.vue";
 export { default as Field } from "./components/field.vue";
 export { default as Heading } from "./components/heading.vue";
+export { default as Shell } from "./components/shell.vue";
 export { default as Icon } from "./components/icon.vue";
 export { default as Input } from "./components/input.vue";
 export { default as Link } from "./components/link.vue";
+export { default as Entry } from "./components/entry.vue";
+export { default as Notification } from "./components/notification.vue";
 export { default as Navigate } from "./components/navigate.vue";
 export { default as Popover } from "./components/popover.vue";
+export { default as Pagination } from "./components/pagination.vue";
 export { default as Progress } from "./components/progress.vue";
 export { default as Radio } from "./components/radio.vue";
 export { default as Range } from "./components/range.vue";
@@ -23,5 +27,6 @@ export { default as Sheet } from "./components/sheet.vue";
 export { default as Stack } from "./components/stack.vue";
 export { default as Switch } from "./components/switch.vue";
 export { default as Upload } from "./components/upload.vue";
+export { default as Textarea } from "./components/textarea.vue";
 export { useFocusTrap } from "./utilities/use-focus-trap";
 export { useScrollLock } from "./utilities/use-scroll-lock";

package/dist/vue/index.js

@@ -10,11 +10,15 @@ import Counter from "./components/counter.vue";
 import Dialog from "./components/dialog.vue";
 import Field from "./components/field.vue";
 import Heading from "./components/heading.vue";
+import Shell from "./components/shell.vue";
 import Icon from "./components/icon.vue";
 import Input from "./components/input.vue";
 import Link from "./components/link.vue";
+import Entry from "./components/entry.vue";
+import Notification from "./components/notification.vue";
 import Navigate from "./components/navigate.vue";
 import Popover from "./components/popover.vue";
+import Pagination from "./components/pagination.vue";
 import Progress from "./components/progress.vue";
 import Radio from "./components/radio.vue";
 import Range from "./components/range.vue";
@@ -25,4 +29,5 @@ import Sheet from "./components/sheet.vue";
 import Stack from "./components/stack.vue";
 import Switch from "./components/switch.vue";
 import Upload from "./components/upload.vue";
-export { Breadcrumb, Button, Card, Checkbox, Collection, Container, Counter, Dialog, Field, Heading, Icon, Input, Link, Navigate, Popover, Progress, Radio, Range, Rating, Select, Separator, Sheet, Stack, Switch, Upload, useFocusTrap, useScrollLock };
+import Textarea from "./components/textarea.vue";
+export { Breadcrumb, Button, Card, Checkbox, Collection, Container, Counter, Dialog, Entry, Field, Heading, Icon, Input, Link, Navigate, Notification, Pagination, Popover, Progress, Radio, Range, Rating, Select, Separator, Sheet, Shell, Stack, Switch, Textarea, Upload, useFocusTrap, useScrollLock };

package/dist/vue/utilities/use-control-attributes.d.ts

@@ -0,0 +1,11 @@
+import { type InputHTMLAttributes } from "vue";
+export declare function useControlAttributes(): {
+    rootAttributes: Readonly<import("vue").Ref<{
+        class: import("vue").ClassValue;
+        style: import("vue").StyleValue;
+    }, {
+        class: import("vue").ClassValue;
+        style: import("vue").StyleValue;
+    }>>;
+    controlAttributes: Readonly<import("vue").Ref<InputHTMLAttributes, InputHTMLAttributes>>;
+};

package/dist/vue/utilities/use-control-attributes.js

@@ -0,0 +1,14 @@
+import { toRef, useAttrs } from "vue";
+//#region src/vue/utilities/use-control-attributes.ts
+function useControlAttributes() {
+	const attributes = useAttrs();
+	return {
+		rootAttributes: toRef(() => ({
+			class: attributes.class,
+			style: attributes.style
+		})),
+		controlAttributes: toRef(() => Object.fromEntries(Object.entries(attributes).filter(([key]) => key !== "class" && key !== "style")))
+	};
+}
+//#endregion
+export { useControlAttributes };

package/dist/vue/utilities/use-modal-dialog.d.ts

@@ -0,0 +1,9 @@
+import { type MaybeRefOrGetter, type Ref } from "vue";
+export declare function useModalDialog(element: Ref<HTMLDialogElement | null>, modelValue: MaybeRefOrGetter<boolean | undefined>, update: (value: boolean) => void, dismissible: MaybeRefOrGetter<boolean>): {
+    isOpen: import("vue").ComputedRef<boolean>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    dismiss: (event: Event) => void;
+    handleClose: () => void;
+};

package/dist/vue/utilities/use-modal-dialog.js

@@ -0,0 +1,48 @@
+import { useScrollLock } from "./use-scroll-lock.js";
+import { computed, ref, toValue, watchEffect } from "vue";
+//#region src/vue/utilities/use-modal-dialog.ts
+function useModalDialog(element, modelValue, update, dismissible) {
+	function open() {
+		internalOpen.value = true;
+		update(true);
+	}
+	function close() {
+		internalOpen.value = false;
+		element.value?.close();
+		update(false);
+	}
+	function toggle() {
+		if (isOpen.value) close();
+		else open();
+	}
+	function dismiss(event) {
+		if (!toValue(dismissible)) {
+			event.preventDefault();
+			return;
+		}
+		close();
+	}
+	function handleClose() {
+		if (element.value?.open) return;
+		internalOpen.value = false;
+		if (isOpen.value) update(false);
+	}
+	const internalOpen = ref(false);
+	const isOpen = computed(() => toValue(modelValue) ?? internalOpen.value);
+	useScrollLock(isOpen);
+	watchEffect(() => {
+		if (!element.value?.isConnected) return;
+		if (isOpen.value && !element.value.open) element.value.showModal();
+		else if (!isOpen.value && element.value.open) element.value.close();
+	}, { flush: "post" });
+	return {
+		isOpen,
+		open,
+		close,
+		toggle,
+		dismiss,
+		handleClose
+	};
+}
+//#endregion
+export { useModalDialog };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@revojs/ui",
-    "version": "0.2.12",
+    "version": "0.2.13",
     "license": "MIT",
     "repository": {
         "type": "git",