grantthomas-nuxt 1.0.6 → 1.0.7

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@grantthomas/nuxt",
   "configKey": "grantThomasNuxt",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/CrudFilter.vue

@@ -236,6 +236,7 @@ const displayForChip = (item) => {
         :items="filter.options"
         :clearable="true"
         item-value="value"
+        :hide-details="true"
         item-title="label"
         :multiple="true"
         clear-icon="mdi-backspace"

package/dist/runtime/components/CrudUploadFieldSelection.vue

@@ -54,6 +54,12 @@ const isImage = computed(() => {
   }
   return false;
 });
+const isAudio = computed(() => {
+  if (props.item) {
+    return props.item[props.mimeKey].includes("audio");
+  }
+  return false;
+});
 const url = computed(() => {
   if (props.item) {
     return uploadToUrl(props.item, isImage.value ? "thumbnail" : "original");
@@ -109,6 +115,10 @@ const containerClasses = computed(() => {
              :width="50"
              :height="50"
              class="flex-shrink-1"></video>
+      <div v-else-if="isAudio" class="bg-white d-flex justify-center align-center flex-column" style="height: 100px; width: 100px;">
+        <v-icon :icon="mimeTypeToMdiIcon(item[mimeKey])" size="40" color="success" class="mb-2"></v-icon>
+        <audio controls :src="url" style="width: 90px; height: 30px;" class="audio-mini"></audio>
+      </div>
       <div v-else class="bg-white d-flex justify-center align-center" style="height: 100px; width: 100px;">
         <v-icon :icon="mimeTypeToMdiIcon(item[mimeKey])" size="40" color="primary" class="m-auto"></v-icon>
       </div>
@@ -143,6 +153,7 @@ const containerClasses = computed(() => {
                   :width="item.width ?? 100"
                   :height="item.height  ?? 'auto'"
         />
+        <audio v-else-if="isAudio" controls :src="url" style="width: 300px;" class="mb-2"></audio>
         <div style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-all;"
              class="font-weight-bold text-wrap">{{ item[fileNameKey] }}
         </div>
@@ -163,16 +174,17 @@ const containerClasses = computed(() => {
     <v-avatar
       style="position: absolute; bottom: 5px; left: 5px;"
       size="20"
-      :color="isVideo ? 'error' : (isImage ? 'info' : 'warning')">
+      :color="isVideo ? 'error' : (isImage ? 'info' : (isAudio ? 'success' : 'warning'))">
       <v-icon v-if="isImage" dark
               size="10">mdi-image
       </v-icon>
       <v-icon v-else-if="isVideo" dark size="15">mdi-video</v-icon>
+      <v-icon v-else-if="isAudio" dark size="12">mdi-music</v-icon>
       <v-icon v-else dark size="15">mdi-file</v-icon>
     </v-avatar>
   </div>
 </template>
 
 <style scoped>
-.cursor{cursor:pointer}
+.cursor{cursor:pointer}.audio-mini{font-size:10px;max-width:90px}.audio-mini::-webkit-media-controls-panel{height:30px}
 </style>

package/dist/runtime/composables/useCrudConverters.d.ts

@@ -8,7 +8,7 @@ export declare function useCrudConverters(): {
     flattenQuery: (obj: Record<string, any> | null, prefix?: string) => Record<string, any>;
     parseQuery: (query: string) => Record<string, any>;
     stringifyQuery: (params: Record<string, any>, prefix?: string, options?: StringifyOptions) => string;
-    getFileType: (file: any) => 1 | 2 | 3 | 4 | 5 | 6 | null;
+    getFileType: (file: any) => 1 | 2 | 3 | 4 | 5 | 6 | 7 | null;
     mimeTypeToMdiIcon: (mimeType: string) => string;
     toBase64: (file: any) => Promise<unknown>;
     convertAddress: (item: {

package/dist/runtime/composables/useCrudConverters.js

@@ -41,6 +41,12 @@ export function useCrudConverters() {
       case "image/heic":
       case "image/heic-sequence":
         return "mdi-file-image";
+      case "audio/mpeg":
+      case "audio/mp3":
+      case "audio/wav":
+      case "audio/ogg":
+      case "audio/aac":
+        return "mdi-file-music";
       case "application/pdf":
         return "mdi-file-pdf";
       case "application/msword":
@@ -172,6 +178,12 @@ export function useCrudConverters() {
         return 5;
       case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
         return 6;
+      case "audio/mpeg":
+      case "audio/mp3":
+      case "audio/wav":
+      case "audio/ogg":
+      case "audio/aac":
+        return 7;
     }
     return null;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "grantthomas-nuxt",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Crud module for Nuxt 3 interacting with sibling .net project",
   "repository": "Tap-Leagues/GrantThomas.Nuxt",
   "license": "MIT",