nuxt-unified-ui 0.2.6 → 0.2.7

package/app/assets/css/nuxt-ui-fixes.css

@@ -1,5 +1,13 @@
 
 
+/* theme */
+
+@theme {
+  --breakpoint-tablet: 48rem;
+  --breakpoint-desktop: 80rem;
+}
+
+
 /* localization */
 
 @utility rtl {

package/app/components/un-form.vue

@@ -16,6 +16,7 @@ import FormElementSelect from '../elements/form-element-select.vue';
 import FormElementSeries from '../elements/form-element-series.vue';
 import FormElementCheckbox from '../elements/form-element-checkbox.vue';
 import FormElementDate from '../elements/form-element-date.vue';
+import FormElementMedia from '../elements/form-element-media.vue';
 
 
 const elementsMap = {
@@ -25,6 +26,7 @@ const elementsMap = {
   'series': FormElementSeries,
   'date': FormElementDate,
   'checkbox': FormElementCheckbox,
+  'media': FormElementMedia,
 };
 
 

package/app/elements/form-element-media.vue

@@ -0,0 +1,102 @@
+<script setup>
+
+/* interface */
+
+const props = defineProps({
+  field: Object,
+});
+
+const modelValue = defineModel();
+
+
+/* media */
+
+const { data: media, pending } = useUFetch(
+  computed(() => `/media/${modelValue.value}`),
+  {
+    method: computed(() => !modelValue.value ? '' : 'get'),
+  },
+);
+
+
+const fieldTitle = computed(() => {
+  return media.value?.name;
+});
+
+
+/* upload */
+
+const isUploading = ref(false);
+
+
+const { open: openFilePicker, onChange, reset: resetFilePicker } = useFileDialog({
+  accept: () => props.field.accept,
+});
+
+
+onChange(async files => {
+
+  const file = files?.[0];
+
+  if (!file) {
+    return;
+  }
+
+
+  const body = new FormData();
+  body.append('file', file);
+
+  const response = await ufetch('/media/upload', {
+    loading: isUploading,
+    method: 'post',
+    body,
+  });
+
+
+  modelValue.value = response?._id;
+  resetFilePicker();
+
+  toastSuccess({
+    title: 'فایل با موفقیت آپلود شد.',
+  });
+
+});
+
+</script>
+
+
+<template>
+  <u-form-field v-bind="radPick(props.field, [ 'label' ])">
+    <div class="flex items-start gap-2 ltr">
+
+      <template v-if="media?.type?.startsWith('image')">
+        <u-popover mode="hover">
+
+          <img
+            :src="makeMediaFullPath(media?.path)"
+            class="size-8 rounded object-cover"
+          />
+
+          <template #content>
+            <img
+              :src="makeMediaFullPath(media?.path)"
+              class="w-64 rounded"
+            />
+          </template>
+
+        </u-popover>
+      </template>
+
+      <u-input
+        class="w-full ltr"
+        icon="lucide:file"
+        v-bind="radOmit(props.field, [ 'key', 'identifier', 'label' ])"
+        readonly
+        :loading="pending || isUploading"
+        :model-value="fieldTitle"
+        @click="openFilePicker()"
+      />
+
+    </div>
+  </u-form-field>
+</template>

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "nuxt-unified-ui",
   "type": "module",
-  "version": "0.2.6",
-  "main": "./nuxt.config.js",
+  "version": "0.2.7",
+  "main": "./nuxt.config.ts",
   "exports": {
-    ".": "./nuxt.config.js",
+    ".": "./nuxt.config.ts",
     "./nuxt-ui-fixes.css": "./app/assets/css/nuxt-ui-fixes.css"
   },
   "files": [
-    "nuxt.config.js",
+    "nuxt.config.ts",
     "package.json",
     "app",
     "modules"
@@ -24,6 +24,6 @@
     "unified-mongo-filter": "0.4.0"
   },
   "peerDependencies": {
-    "nuxt": ">4.2.2"
+    "nuxt": ">4.2.0"
   }
 }