@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Field.vue

@@ -1,193 +1,193 @@
-<script lang="ts" setup>
-import { isEmpty, isNil, isNumber } from 'remeda'
-
-const { label, value, type, labelPosition, tagType, showTooltip, contentTooltip, size } = withDefaults(defineProps<{
-  label?: string
-  value?: string | boolean | string[] | number
-  type?: 'text' | 'status' | 'link' | 'tags' | 'tag' | 'progress' | 'dropdown' | 'icon' | 'aiIcon'
-  copy?: boolean
-  tagType?: string
-  labelPosition?: 'left' | 'top'
-  labelWidth?: string
-  showTooltip?: boolean
-  contentTooltip?: string
-  size?: 'large' | 'default' | 'small'
-}>(), {
-  type: 'text',
-})
-
-const emit = defineEmits('open')
-
-function mapStatus(status: string) {
-  switch (status.toLowerCase()) {
-    case 'running':
-    case 'available':
-    case 'enable':
-    case 'used':
-    case 'complete':
-    case 'completed':
-    case 'valid':
-    case 'on':
-    case 'synced':
-    case 'installed':
-      return {
-        color: 'text-success!',
-        icon: 'i-carbon:checkmark-outline',
-      }
-    case 'dead':
-    case 'freezed':
-    case 'expired':
-    case 'disable':
-    case 'disabled':
-    case 'error':
-    case 'sync error':
-    case 'invalid':
-    case 'incomplete':
-    case 'off':
-    case 'not installed':
-      return {
-        color: 'text-danger!',
-        icon: 'i-carbon:close-outline',
-      }
-    case 'paused':
-    case 'payment_pending':
-    case 'unpaid':
-    case 'stopped':
-    case 'no-response':
-      return {
-        color: 'text-warning!',
-        icon: 'i-carbon:close-outline',
-      }
-    case 'not sync':
-      return {
-        color: 'text-info!',
-        icon: 'i-carbon:subtract-alt',
-      }
-    case 'syncing':
-      return {
-        color: 'text-warning!',
-        icon: 'i-carbon:update-now',
-      }
-    default:
-      return {
-        color: '',
-        icon: '',
-      }
-  }
-}
-
-function checkEmpty(value: any): boolean {
-  if (isNil(value))
-    return true
-  else if (isEmpty(value) && !isNumber(value))
-    return true
-
-  return false
-}
-
-const { mouseEnter, disabledTooltip } = useTooltipEllipsis()
-</script>
-
-<template>
-  <div class="mb-1 min-w-0" :class="[{ 'flex items-center gap-1': labelPosition === 'left' }]">
-    <div :style="{ width: labelWidth }">
-      <slot name="label">
-        <el-text
-          :size
-          tag="b"
-          class="block font-extrabold"
-          :style="{ width: labelWidth }"
-        >
-          {{ label }}
-        </el-text>
-      </slot>
-    </div>
-    <slot name="content">
-      <template v-if="!checkEmpty(value) || type === 'aiIcon'">
-        <div v-if="type === 'link'">
-          <el-text
-            :size
-            tag="ins"
-            class="cursor-pointer"
-            type="primary"
-            truncated
-            @click="emit('open')"
-          >
-            {{ value }}
-          </el-text>
-        </div>
-        <template v-else-if="type === 'status'">
-          <el-tooltip effect="dark" :content="contentTooltip" :disabled="!showTooltip">
-            <div :class="mapStatus(value).color" class="flex items-center gap-1">
-              <div :class="mapStatus(value).icon" />
-              <el-text :size truncated :class="mapStatus(value).color">
-                {{ uppercaseFirst(value) }}
-              </el-text>
-            </div>
-          </el-tooltip>
-        </template>
-        <div v-else-if="type === 'tags' && value.length > 0">
-          <SSCollapseTagsTooltip :tags="value" />
-        </div>
-        <div v-else-if="type === 'tag'">
-          <el-tag :type="tagType === 'video' ? 'info' : tagType === 'audio' ? 'warning' : 'primary'" effect="light" round>
-            {{ uppercaseFirst(tagType) }}
-          </el-tag>
-        </div>
-        <div v-else-if="type === 'progress'">
-          <el-progress :text-inside="true" :stroke-width="16" :percentage="value" />
-        </div>
-        <div v-else-if="type === 'dropdown'">
-          <el-dropdown placement="bottom">
-            <el-button> {{ value?.length }} </el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <template v-for="(i, idx) in value || []" :key="idx">
-                  <div class="truncate p-1 px-2 text-14px">
-                    {{ i }}
-                  </div>
-                </template>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-        <div v-else-if="type === 'icon'">
-          <div v-if="value" class="i-carbon:checkmark-filled text-success" />
-          <div v-else class="i-carbon:subtract-alt text-error" />
-        </div>
-        <div v-else-if="type === 'aiIcon'">
-          <div v-if="value" class="flex items-center gap-2">
-            <div class="i-carbon:checkmark-filled text-16px text-success" />
-            <div class="font-semibold">
-              Used
-            </div>
-          </div>
-          <div v-else class="flex items-center gap-2">
-            <div class="i-carbon:close-outline text-16px" />
-            <div class="font-semibold">
-              Unused
-            </div>
-          </div>
-        </div>
-        <div v-else class="min-w-0 flex items-center gap-1">
-          <el-tooltip :disabled="disabledTooltip">
-            <div class="truncate text-14px" @mouseenter="mouseEnter">
-              {{ value }}
-            </div>
-            <template #content>
-              <div class="max-h-200px max-w-240px overflow-auto">
-                {{ value }}
-              </div>
-            </template>
-          </el-tooltip>
-          <SSIconCopyButton v-if="copy" :value="value" />
-        </div>
-      </template>
-      <template v-else>
-        <el-text :size>
-          -
-        </el-text>
-      </template>
-    </slot>
-  </div>
-</template>
+<script lang="ts" setup>
+import { isEmpty, isNil, isNumber } from 'remeda'
+
+const { label, value, type, labelPosition, tagType, showTooltip, contentTooltip, size } = withDefaults(defineProps<{
+  label?: string
+  value?: string | boolean | string[] | number
+  type?: 'text' | 'status' | 'link' | 'tags' | 'tag' | 'progress' | 'dropdown' | 'icon' | 'aiIcon'
+  copy?: boolean
+  tagType?: string
+  labelPosition?: 'left' | 'top'
+  labelWidth?: string
+  showTooltip?: boolean
+  contentTooltip?: string
+  size?: 'large' | 'default' | 'small'
+}>(), {
+  type: 'text',
+})
+
+const emit = defineEmits('open')
+
+function mapStatus(status: string) {
+  switch (status.toLowerCase()) {
+    case 'running':
+    case 'available':
+    case 'enable':
+    case 'used':
+    case 'complete':
+    case 'completed':
+    case 'valid':
+    case 'on':
+    case 'synced':
+    case 'installed':
+      return {
+        color: 'text-success!',
+        icon: 'i-carbon:checkmark-outline',
+      }
+    case 'dead':
+    case 'freezed':
+    case 'expired':
+    case 'disable':
+    case 'disabled':
+    case 'error':
+    case 'sync error':
+    case 'invalid':
+    case 'incomplete':
+    case 'off':
+    case 'not installed':
+      return {
+        color: 'text-danger!',
+        icon: 'i-carbon:close-outline',
+      }
+    case 'paused':
+    case 'payment_pending':
+    case 'unpaid':
+    case 'stopped':
+    case 'no-response':
+      return {
+        color: 'text-warning!',
+        icon: 'i-carbon:close-outline',
+      }
+    case 'not sync':
+      return {
+        color: 'text-info!',
+        icon: 'i-carbon:subtract-alt',
+      }
+    case 'syncing':
+      return {
+        color: 'text-warning!',
+        icon: 'i-carbon:update-now',
+      }
+    default:
+      return {
+        color: '',
+        icon: '',
+      }
+  }
+}
+
+function checkEmpty(value: any): boolean {
+  if (isNil(value))
+    return true
+  else if (isEmpty(value) && !isNumber(value))
+    return true
+
+  return false
+}
+
+const { mouseEnter, disabledTooltip } = useTooltipEllipsis()
+</script>
+
+<template>
+  <div class="mb-1 min-w-0" :class="[{ 'flex items-center gap-1': labelPosition === 'left' }]">
+    <div :style="{ width: labelWidth }">
+      <slot name="label">
+        <el-text
+          :size
+          tag="b"
+          class="block font-extrabold"
+          :style="{ width: labelWidth }"
+        >
+          {{ label }}
+        </el-text>
+      </slot>
+    </div>
+    <slot name="content">
+      <template v-if="!checkEmpty(value) || type === 'aiIcon'">
+        <div v-if="type === 'link'">
+          <el-text
+            :size
+            tag="ins"
+            class="cursor-pointer"
+            type="primary"
+            truncated
+            @click="emit('open')"
+          >
+            {{ value }}
+          </el-text>
+        </div>
+        <template v-else-if="type === 'status'">
+          <el-tooltip effect="dark" :content="contentTooltip" :disabled="!showTooltip">
+            <div :class="mapStatus(value).color" class="flex items-center gap-1">
+              <div :class="mapStatus(value).icon" />
+              <el-text :size truncated :class="mapStatus(value).color">
+                {{ uppercaseFirst(value) }}
+              </el-text>
+            </div>
+          </el-tooltip>
+        </template>
+        <div v-else-if="type === 'tags' && value.length > 0">
+          <SSCollapseTagsTooltip :tags="value" />
+        </div>
+        <div v-else-if="type === 'tag'">
+          <el-tag :type="tagType === 'video' ? 'info' : tagType === 'audio' ? 'warning' : 'primary'" effect="light" round>
+            {{ uppercaseFirst(tagType) }}
+          </el-tag>
+        </div>
+        <div v-else-if="type === 'progress'">
+          <el-progress :text-inside="true" :stroke-width="16" :percentage="value" />
+        </div>
+        <div v-else-if="type === 'dropdown'">
+          <el-dropdown placement="bottom">
+            <el-button> {{ value?.length }} </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <template v-for="(i, idx) in value || []" :key="idx">
+                  <div class="truncate p-1 px-2 text-14px">
+                    {{ i }}
+                  </div>
+                </template>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+        <div v-else-if="type === 'icon'">
+          <div v-if="value" class="i-carbon:checkmark-filled text-success" />
+          <div v-else class="i-carbon:subtract-alt text-error" />
+        </div>
+        <div v-else-if="type === 'aiIcon'">
+          <div v-if="value" class="flex items-center gap-2">
+            <div class="i-carbon:checkmark-filled text-16px text-success" />
+            <div class="font-semibold">
+              Used
+            </div>
+          </div>
+          <div v-else class="flex items-center gap-2">
+            <div class="i-carbon:close-outline text-16px" />
+            <div class="font-semibold">
+              Unused
+            </div>
+          </div>
+        </div>
+        <div v-else class="min-w-0 flex items-center gap-1">
+          <el-tooltip :disabled="disabledTooltip">
+            <div class="truncate text-14px" @mouseenter="mouseEnter">
+              {{ value }}
+            </div>
+            <template #content>
+              <div class="max-h-200px max-w-240px overflow-auto">
+                {{ value }}
+              </div>
+            </template>
+          </el-tooltip>
+          <SSIconCopyButton v-if="copy" :value="value" />
+        </div>
+      </template>
+      <template v-else>
+        <el-text :size>
+          -
+        </el-text>
+      </template>
+    </slot>
+  </div>
+</template>