@sigmaott/base-library-next 2.2.6 → 2.2.8

package/src/components/profile/TableColumns.vue

@@ -1,137 +1,137 @@
-<script lang="ts" setup>
-
-</script>
-
-<template>
-  <el-table-column :label="$t('profile.name')" prop="name" width="250" show-overflow-tooltip sortable>
-    <template #default="scope">
-      {{ scope.row.name }}
-    </template>
-  </el-table-column>
-  <el-table-column label="Video" prop="video" width="515">
-    <template #default="scope">
-      <el-scrollbar max-height="135px" class="pr-4px">
-        <SharedMediaInfoViewer
-          v-for="(item, idx) in scope.row.video || []" :key="idx" :media="item"
-          class="w-96% justify-center"
-        />
-      </el-scrollbar>
-      <!-- <SharedPopoverProfile :media="scope.row.video" /> -->
-    </template>
-  </el-table-column>
-  <el-table-column label="Audio" prop="audio" min-width="350">
-    <template #default="scope">
-      <div v-if="scope.row?.audio?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
-        No Item
-      </div>
-
-      <div v-else class="flex gap-2px">
-        <template v-for="(item) in scope.row.audio?.slice(0, 2) || []" :key="item.id">
-          <div v-if="scope.row.audio?.length > 2" class="item-list-row max-w-150px flex items-center gap-1">
-            <div class="i-ep:headset min-w-14px text-primary" />
-            <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
-          </div>
-          <el-popover
-            v-else
-            placement="bottom"
-            trigger="hover"
-            :width="500"
-          >
-            <template #reference>
-              <div class="item-list-row max-w-150px flex items-center gap-1">
-                <div class="i-ep:headset min-w-14px text-primary" />
-                <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
-              </div>
-            </template>
-            <el-scrollbar>
-              <SharedMediaInfoViewer
-                v-for="(i, idx) in scope.row.audio || []" :key="idx" class="w-96% justify-center"
-                :media="i"
-              />
-            </el-scrollbar>
-          </el-popover>
-        </template>
-        <el-popover
-          v-if="scope.row.audio?.length > 2"
-          placement="bottom"
-          trigger="hover"
-          :width="500"
-        >
-          <template #reference>
-            <span class="item-list-row">
-              ...
-            </span>
-          </template>
-          <el-scrollbar height="200px">
-            <SharedMediaInfoViewer
-              v-for="(i, idx) in scope.row.audio || []" :key="idx" class="w-96% justify-center"
-              :media="i"
-            />
-          </el-scrollbar>
-        </el-popover>
-        <!-- <SharedPopoverProfile :media="scope.row.audio" /> -->
-      </div>
-    </template>
-  </el-table-column>
-  <el-table-column label="Data" prop="data" min-width="350">
-    <template #default="scope">
-      <div v-if="scope.row?.data?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
-        No Item
-      </div>
-      <div v-else class="flex gap-2px">
-        <template v-for="(item) in scope.row.data?.slice(0, 2) || []" :key="item.id">
-          <div v-if="scope.row.data?.length > 2" class="item-list-row max-w-150px flex items-center gap-1">
-            <div class="i-ep:menu min-w-14px text-primary" />
-            <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
-          </div>
-          <el-popover
-            v-else
-            placement="bottom"
-            trigger="hover"
-            :width="500"
-          >
-            <template #reference>
-              <div class="item-list-row max-w-150px flex items-center gap-1">
-                <div class="i-ep:menu min-w-14px text-primary" />
-                <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
-              </div>
-            </template>
-            <el-scrollbar>
-              <SharedMediaInfoViewer
-                v-for="(i, idx) in scope.row.data || []" :key="idx" class="w-96% justify-center"
-                :media="i"
-              />
-            </el-scrollbar>
-          </el-popover>
-        </template>
-        <el-popover
-          v-if="scope.row.data?.length > 2"
-          placement="bottom"
-          trigger="hover"
-          :width="500"
-        >
-          <template #reference>
-            <span class="item-list-row">
-              ...
-            </span>
-          </template>
-          <el-scrollbar height="200px">
-            <SharedMediaInfoViewer
-              v-for="(i, idx) in scope.row.data || []" :key="idx" class="w-96% justify-center"
-              :media="i"
-            />
-          </el-scrollbar>
-        </el-popover>
-      </div>
-    </template>
-  </el-table-column>
-</template>
-
-<style scoped>
-.item-list-row {
-  padding: 5px;
-  position: relative;
-  border: 1px solid rgba(64, 158, 255, 0.4);
-  border-radius: 4px;
-}
-</style>
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <el-table-column :label="$t('profile.name')" prop="name" width="250" show-overflow-tooltip sortable>
+    <template #default="scope">
+      {{ scope.row.name }}
+    </template>
+  </el-table-column>
+  <el-table-column label="Video" prop="video" width="515">
+    <template #default="scope">
+      <el-scrollbar max-height="135px" class="pr-4px">
+        <SharedMediaInfoViewer
+          v-for="(item, idx) in scope.row.video || []" :key="idx" :media="item"
+          class="w-96% justify-center"
+        />
+      </el-scrollbar>
+      <!-- <SharedPopoverProfile :media="scope.row.video" /> -->
+    </template>
+  </el-table-column>
+  <el-table-column label="Audio" prop="audio" min-width="350">
+    <template #default="scope">
+      <div v-if="scope.row?.audio?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+        No Item
+      </div>
+
+      <div v-else class="flex gap-2px">
+        <template v-for="(item) in scope.row.audio?.slice(0, 2) || []" :key="item.id">
+          <div v-if="scope.row.audio?.length > 2" class="item-list-row max-w-150px flex items-center gap-1">
+            <div class="i-ep:headset min-w-14px text-primary" />
+            <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+          </div>
+          <el-popover
+            v-else
+            placement="bottom"
+            trigger="hover"
+            :width="500"
+          >
+            <template #reference>
+              <div class="item-list-row max-w-150px flex items-center gap-1">
+                <div class="i-ep:headset min-w-14px text-primary" />
+                <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+              </div>
+            </template>
+            <el-scrollbar>
+              <SharedMediaInfoViewer
+                v-for="(i, idx) in scope.row.audio || []" :key="idx" class="w-96% justify-center"
+                :media="i"
+              />
+            </el-scrollbar>
+          </el-popover>
+        </template>
+        <el-popover
+          v-if="scope.row.audio?.length > 2"
+          placement="bottom"
+          trigger="hover"
+          :width="500"
+        >
+          <template #reference>
+            <span class="item-list-row">
+              ...
+            </span>
+          </template>
+          <el-scrollbar height="200px">
+            <SharedMediaInfoViewer
+              v-for="(i, idx) in scope.row.audio || []" :key="idx" class="w-96% justify-center"
+              :media="i"
+            />
+          </el-scrollbar>
+        </el-popover>
+        <!-- <SharedPopoverProfile :media="scope.row.audio" /> -->
+      </div>
+    </template>
+  </el-table-column>
+  <el-table-column label="Data" prop="data" min-width="350">
+    <template #default="scope">
+      <div v-if="scope.row?.data?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+        No Item
+      </div>
+      <div v-else class="flex gap-2px">
+        <template v-for="(item) in scope.row.data?.slice(0, 2) || []" :key="item.id">
+          <div v-if="scope.row.data?.length > 2" class="item-list-row max-w-150px flex items-center gap-1">
+            <div class="i-ep:menu min-w-14px text-primary" />
+            <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+          </div>
+          <el-popover
+            v-else
+            placement="bottom"
+            trigger="hover"
+            :width="500"
+          >
+            <template #reference>
+              <div class="item-list-row max-w-150px flex items-center gap-1">
+                <div class="i-ep:menu min-w-14px text-primary" />
+                <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+              </div>
+            </template>
+            <el-scrollbar>
+              <SharedMediaInfoViewer
+                v-for="(i, idx) in scope.row.data || []" :key="idx" class="w-96% justify-center"
+                :media="i"
+              />
+            </el-scrollbar>
+          </el-popover>
+        </template>
+        <el-popover
+          v-if="scope.row.data?.length > 2"
+          placement="bottom"
+          trigger="hover"
+          :width="500"
+        >
+          <template #reference>
+            <span class="item-list-row">
+              ...
+            </span>
+          </template>
+          <el-scrollbar height="200px">
+            <SharedMediaInfoViewer
+              v-for="(i, idx) in scope.row.data || []" :key="idx" class="w-96% justify-center"
+              :media="i"
+            />
+          </el-scrollbar>
+        </el-popover>
+      </div>
+    </template>
+  </el-table-column>
+</template>
+
+<style scoped>
+.item-list-row {
+  padding: 5px;
+  position: relative;
+  border: 1px solid rgba(64, 158, 255, 0.4);
+  border-radius: 4px;
+}
+</style>

package/src/components/shared/AudioInfoViewer.vue

@@ -1,101 +1,101 @@
-<script lang="ts" setup>
-import { fileSizeFilter } from './fileSizeFilter'
-
-defineProps<{
-  audio: any
-}>()
-</script>
-
-<template>
-  <div class="item-list-row flex justify-center">
-    <ul class="flex flex-wrap justify-center">
-      <li>
-        <el-icon>
-          <div class="i-ep:headset text-primary" />
-        </el-icon>
-        <el-icon v-if="audio.codec === 'copy'" class="text-indigo-500" name="document-copy">
-          <div class="i-ep:document-copy text-indigo-500" />
-        </el-icon>&nbsp;
-        <span class="item__name" :title="audio.name">{{
-          (audio && audio.name) || '-'
-        }}</span>
-      </li>
-      <span class="text-gray-400">&nbsp;|&nbsp;</span>
-      <li title="Codec">
-        <el-icon>
-          <div class="i-ep:grid text-indigo-500" />
-        </el-icon>&nbsp;
-        <span class="item__name">{{ audio.codec }}</span>
-      </li>
-      <span class="text-gray-400">&nbsp;|&nbsp;</span>
-      <li title="Bitrate">
-        <el-icon>
-          <div class="i-ep:scale-to-original text-teal-600" />
-        </el-icon>&nbsp;
-        <span>{{ audio.bitrate ? fileSizeFilter(audio.bitrate) : fileSizeFilter(audio.audioBitrate) }}/s</span>
-      </li>
-      <span class="text-gray-400">&nbsp;|&nbsp;</span>
-      <li title="Sample rate">
-        <el-icon>
-          <div class="i-ep:message-box text-indigo-500" />
-        </el-icon>&nbsp;
-        <span>{{ audio.sampleRate || '-' }}</span>
-      </li>
-      <span class="text-gray-400">&nbsp;|&nbsp;</span>
-      <li title="Profile">
-        <el-icon>
-          <div class="i-ep:credit-card" :class="!audio.profile || 'text-teal-600'" />
-        </el-icon>&nbsp;
-        <span>{{ audio.profile || '-' }}</span>
-      </li>
-      <span class="text-gray-400">&nbsp;|&nbsp;</span>
-      <li title="Channel">
-        <el-icon>
-          <div class="i-ep:scale-to-original text-teal-600" />
-        </el-icon>&nbsp;
-        <span>{{ audio.channel || '-' }}</span>
-      </li>
-    </ul>
-
-    <div v-if="$slots && $slots.anchor" class="anchor">
-      <slot name="anchor" />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.item-list-row {
-  margin: 5px;
-  padding: 5px;
-  position: relative;
-  border: 1px solid rgba(230, 162, 60, 0.4);
-  border-radius: 4px;
-
-  ul {
-    li {
-      white-space: nowrap;
-      display: flex;
-      align-items: center;
-    }
-
-    .item__name {
-      max-width: 85px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .anchor {
-    padding: 5px;
-    margin: -5px -5px -5px 5px;
-    display: flex;
-    flex-direction: column;
-    border-left: 1px solid;
-    border-color: inherit;
-    background-color: rgba(230, 162, 60, 0.2);
-    border-top-right-radius: inherit;
-    border-bottom-right-radius: inherit;
-  }
-}
-</style>
+<script lang="ts" setup>
+import { fileSizeFilter } from './fileSizeFilter'
+
+defineProps<{
+  audio: any
+}>()
+</script>
+
+<template>
+  <div class="item-list-row flex justify-center">
+    <ul class="flex flex-wrap justify-center">
+      <li>
+        <el-icon>
+          <div class="i-ep:headset text-primary" />
+        </el-icon>
+        <el-icon v-if="audio.codec === 'copy'" class="text-indigo-500" name="document-copy">
+          <div class="i-ep:document-copy text-indigo-500" />
+        </el-icon>&nbsp;
+        <span class="item__name" :title="audio.name">{{
+          (audio && audio.name) || '-'
+        }}</span>
+      </li>
+      <span class="text-gray-400">&nbsp;|&nbsp;</span>
+      <li title="Codec">
+        <el-icon>
+          <div class="i-ep:grid text-indigo-500" />
+        </el-icon>&nbsp;
+        <span class="item__name">{{ audio.codec }}</span>
+      </li>
+      <span class="text-gray-400">&nbsp;|&nbsp;</span>
+      <li title="Bitrate">
+        <el-icon>
+          <div class="i-ep:scale-to-original text-teal-600" />
+        </el-icon>&nbsp;
+        <span>{{ audio.bitrate ? fileSizeFilter(audio.bitrate) : fileSizeFilter(audio.audioBitrate) }}/s</span>
+      </li>
+      <span class="text-gray-400">&nbsp;|&nbsp;</span>
+      <li title="Sample rate">
+        <el-icon>
+          <div class="i-ep:message-box text-indigo-500" />
+        </el-icon>&nbsp;
+        <span>{{ audio.sampleRate || '-' }}</span>
+      </li>
+      <span class="text-gray-400">&nbsp;|&nbsp;</span>
+      <li title="Profile">
+        <el-icon>
+          <div class="i-ep:credit-card" :class="!audio.profile || 'text-teal-600'" />
+        </el-icon>&nbsp;
+        <span>{{ audio.profile || '-' }}</span>
+      </li>
+      <span class="text-gray-400">&nbsp;|&nbsp;</span>
+      <li title="Channel">
+        <el-icon>
+          <div class="i-ep:scale-to-original text-teal-600" />
+        </el-icon>&nbsp;
+        <span>{{ audio.channel || '-' }}</span>
+      </li>
+    </ul>
+
+    <div v-if="$slots && $slots.anchor" class="anchor">
+      <slot name="anchor" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.item-list-row {
+  margin: 5px;
+  padding: 5px;
+  position: relative;
+  border: 1px solid rgba(230, 162, 60, 0.4);
+  border-radius: 4px;
+
+  ul {
+    li {
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+    }
+
+    .item__name {
+      max-width: 85px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .anchor {
+    padding: 5px;
+    margin: -5px -5px -5px 5px;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid;
+    border-color: inherit;
+    background-color: rgba(230, 162, 60, 0.2);
+    border-top-right-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+}
+</style>