@revojs/ui 0.1.58

package/dist/vue/components/upload.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="flex w-full flex-col gap-2">
+        <span v-if="label" class="text-sm font-medium">
+            {{ label }}<span v-if="required" aria-hidden="true"> *</span>
+        </span>
+
+        <div
+            class="relative flex min-h-32 flex-col items-center justify-center gap-3 border border-dashed p-5 text-center transition-colors"
+            :class="[
+                config.radius,
+                `border-${config.light.input}`,
+                variants[state],
+                `dark:border-${config.dark.input}`,
+                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>
+
+            <input
+                ref="input"
+                class="sr-only"
+                type="file"
+                :accept="accept"
+                :name="name"
+                :required="required"
+                :disabled="disabled"
+                @change="change"
+            />
+        </div>
+
+        <span v-if="description" class="text-sm opacity-60">{{ description }}</span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import config from "#config/ui";
+import { computed, ref, useTemplateRef } from "vue";
+import type { ControlInteraction } from "../../components/control.ts";
+import type { UploadState } from "../../components/upload.ts";
+import Button from "./button.vue";
+
+const {
+    modelValue = undefined,
+    label = undefined,
+    description = undefined,
+    accept = undefined,
+    name = undefined,
+    required = false,
+    disabled = false,
+} = defineProps<{
+    modelValue?: Blob | File;
+    label?: string;
+    description?: string;
+    accept?: string;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+    "update:modelValue": [value?: Blob | File];
+}>();
+
+const input = useTemplateRef("input");
+
+const isOver = ref(false);
+
+const interaction = computed<ControlInteraction>(() => (disabled ? "disabled" : "enabled"));
+
+const state = computed<UploadState>(() => (isOver.value ? "over" : "idle"));
+
+const interactionVariants: Record<ControlInteraction, string> = {
+    disabled: "opacity-50",
+    enabled: "",
+};
+
+const variants: Record<UploadState, Array<string>> = {
+    idle: [`bg-${config.light.muted}`, `dark:bg-${config.dark.muted}`],
+    over: [`bg-${config.light.accent}`, `dark:bg-${config.dark.accent}`],
+};
+
+function change() {
+    const file = input.value?.files?.item(0);
+
+    if (file) {
+        emit("update:modelValue", file);
+    }
+}
+
+function drop(event: DragEvent) {
+    isOver.value = false;
+
+    if (!disabled) {
+        const file = event.dataTransfer?.files.item(0);
+
+        if (file) {
+            emit("update:modelValue", file);
+        }
+    }
+}
+
+function leave(event: DragEvent) {
+    const element = event.currentTarget as HTMLElement;
+    const target = event.relatedTarget as Node | null;
+
+    if (!target || !element.contains(target)) {
+        isOver.value = false;
+    }
+}
+
+function remove() {
+    if (input.value) {
+        input.value.value = "";
+    }
+
+    emit("update:modelValue", undefined);
+}
+</script>

package/dist/vue/index.d.ts

@@ -0,0 +1,25 @@
+export { default as Breadcrumb } from "./components/breadcrumb.vue";
+export { default as Button } from "./components/button.vue";
+export { default as Card } from "./components/card.vue";
+export { default as Checkbox } from "./components/checkbox.vue";
+export { default as Collection } from "./components/collection.vue";
+export { default as Container } from "./components/container.vue";
+export { default as Counter } from "./components/counter.vue";
+export { default as Dialog } from "./components/dialog.vue";
+export { default as Divider } from "./components/separator.vue";
+export { default as Field } from "./components/field.vue";
+export { default as Heading } from "./components/heading.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 Navigate } from "./components/navigate.vue";
+export { default as Popover } from "./components/popover.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";
+export { default as Rating } from "./components/rating.vue";
+export { default as Select } from "./components/select.vue";
+export { default as Separator } from "./components/separator.vue";
+export { default as Sheet } from "./components/sheet.vue";
+export { default as Switch } from "./components/switch.vue";
+export { default as Upload } from "./components/upload.vue";

package/dist/vue/index.js

@@ -0,0 +1,25 @@
+import Breadcrumb from "./components/breadcrumb.vue";
+import Button from "./components/button.vue";
+import Card from "./components/card.vue";
+import Checkbox from "./components/checkbox.vue";
+import Collection from "./components/collection.vue";
+import Container from "./components/container.vue";
+import Counter from "./components/counter.vue";
+import Dialog from "./components/dialog.vue";
+import Divider, { default as Separator } from "./components/separator.vue";
+import Field from "./components/field.vue";
+import Heading from "./components/heading.vue";
+import Icon from "./components/icon.vue";
+import Input from "./components/input.vue";
+import Link from "./components/link.vue";
+import Navigate from "./components/navigate.vue";
+import Popover from "./components/popover.vue";
+import Progress from "./components/progress.vue";
+import Radio from "./components/radio.vue";
+import Range from "./components/range.vue";
+import Rating from "./components/rating.vue";
+import Select from "./components/select.vue";
+import Sheet from "./components/sheet.vue";
+import Switch from "./components/switch.vue";
+import Upload from "./components/upload.vue";
+export { Breadcrumb, Button, Card, Checkbox, Collection, Container, Counter, Dialog, Divider, Field, Heading, Icon, Input, Link, Navigate, Popover, Progress, Radio, Range, Rating, Select, Separator, Sheet, Switch, Upload };

package/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "@revojs/ui",
+    "version": "0.1.58",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/tellua/revojs.git"
+    },
+    "files": [
+        "dist"
+    ],
+    "type": "module",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "./module": {
+            "types": "./dist/module/index.d.ts",
+            "import": "./dist/module/index.js"
+        },
+        "./vue": {
+            "types": "./dist/vue/index.d.ts",
+            "import": "./dist/vue/index.js"
+        }
+    },
+    "scripts": {
+        "build": "vite build",
+        "watch": "vite build --watch"
+    },
+    "dependencies": {
+        "@iconify/types": "^2.0.0",
+        "@iconify/utils": "^3.1.7",
+        "revojs": "*"
+    },
+    "devDependencies": {
+        "@revojs/tsconfig": "*",
+        "@vitejs/plugin-vue": "^6.0.9"
+    },
+    "optionalDependencies": {
+        "vue": "^3.5.42"
+    }
+}