@revojs/ui 0.2.11 → 0.2.13

package/dist/vue/components/upload.vue

@@ -1,32 +1,46 @@
 <template>
-    <Stack>
-        <span v-if="label" class="text-sm font-medium">
-            {{ label }}<span v-if="required" aria-hidden="true"> *</span>
+    <Stack class="w-full" :class="texts[text]">
+        <span v-if="label" class="font-normal">
+            {{ label }}<span v-if="required" aria-hidden="true" class="text-destructive"> *</span>
         </span>
 
         <Stack
-            align="center"
-            justify="center"
-            gap="3"
-            class="relative min-h-32 rounded-ui border border-input border-dashed p-5 text-center transition-colors"
+            gap="0"
+            class="relative rounded-ui"
             :class="[variants[state], interactionVariants[interaction]]"
             @dragenter.prevent="isOver = true"
             @dragover.prevent="isOver = true"
             @dragleave="leave"
             @drop.prevent="drop"
         >
-            <template v-if="modelValue">
-                <span class="max-w-full truncate text-sm">
-                    {{ "name" in modelValue ? modelValue.name : "File selected" }}
-                </span>
-
-                <Button label="Remove" variant="ghost" :disabled="disabled" @click="remove" />
-            </template>
-            <template v-else>
-                <span class="text-sm opacity-60"> Drag and drop a file here </span>
-
-                <Button label="Browse files" variant="outline" :disabled="disabled" @click="input?.click()" />
-            </template>
+            <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"
@@ -38,25 +52,47 @@
                 :disabled="disabled"
                 @change="change"
             />
+
+            <span
+                aria-hidden="true"
+                class="pointer-events-none absolute inset-0 rounded-ui ring-1 ring-input ring-inset"
+            />
         </Stack>
 
-        <span v-if="description" class="text-sm opacity-60">{{ description }}</span>
+        <span v-if="description" class="opacity-60">{{ description }}</span>
     </Stack>
 </template>
 
 <script setup lang="ts">
+import UploadIcon from "~icons/hugeicons/file-upload";
+import CloseIcon from "~icons/hugeicons/multiplication-sign";
 import { computed, ref, useTemplateRef } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
-import type { UploadProps, UploadState } from "../../components/upload";
+import type { UploadProps, UploadState, UploadText } from "../../components/upload";
 import Button from "./button.vue";
+import Icon from "./icon.vue";
 import Stack from "./stack.vue";
 
-const { modelValue, label, description, accept, name, required = false, disabled = false } = defineProps<UploadProps>();
+const {
+    modelValue,
+    label,
+    description,
+    text = "sm",
+    accept,
+    name,
+    required = false,
+    disabled = false,
+} = defineProps<UploadProps>();
 
 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);
@@ -71,10 +107,21 @@ const interactionVariants: Record<ControlInteraction, string> = {
 };
 
 const variants: Record<UploadState, string> = {
-    idle: "bg-muted",
+    idle: "bg-secondary",
     over: "bg-accent",
 };
 
+const texts: Record<UploadText, string> = {
+    sm: "text-sm",
+    md: "text-base",
+};
+
+function browse() {
+    if (!disabled) {
+        input.value?.click();
+    }
+}
+
 function change() {
     const file = input.value?.files?.item(0);
 
@@ -105,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.11",
+    "version": "0.2.13",
     "license": "MIT",
     "repository": {
         "type": "git",