@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Channel/WarningName.vue

@@ -1,39 +1,39 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  name: string
-  warnings?: {
-    enabled: boolean
-    message: string
-    scope: string
-  }[]
-}>()
-
-const emit = defineEmits<{
-  (e: 'click'): void
-}>()
-
-const { mouseEnter, disabledTooltip } = useTooltipEllipsis()
-</script>
-
-<template>
-  <div class="min-w-0 flex items-center gap-1">
-    <el-tooltip :disabled="disabledTooltip" placement="top">
-      <span class="line-clamp-1 cursor-pointer text-primary underline" @click="emit('click')" @mouseenter="mouseEnter">
-        {{ name }}
-      </span>
-      <template #content>
-        <div class="max-h-200px max-w-240px overflow-auto">
-          {{ name }}
-        </div>
-      </template>
-    </el-tooltip>
-    <el-tooltip v-if="warnings?.enabled" placement="top">
-      <span>
-        <div class="i-lucide:alert-triangle size-4.5 text-warning" />
-      </span>
-      <template #content>
-        <div class="max-h-200px max-w-320px overflow-auto" v-html="warnings?.message" />
-      </template>
-    </el-tooltip>
-  </div>
-</template>
+<script lang="ts" setup>
+const props = defineProps<{
+  name: string
+  warnings?: {
+    enabled: boolean
+    message: string
+    scope: string
+  }[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+const { mouseEnter, disabledTooltip } = useTooltipEllipsis()
+</script>
+
+<template>
+  <div class="min-w-0 flex items-center gap-1">
+    <el-tooltip :disabled="disabledTooltip" placement="top">
+      <span class="line-clamp-1 cursor-pointer text-primary underline" @click="emit('click')" @mouseenter="mouseEnter">
+        {{ name }}
+      </span>
+      <template #content>
+        <div class="max-h-200px max-w-240px overflow-auto">
+          {{ name }}
+        </div>
+      </template>
+    </el-tooltip>
+    <el-tooltip v-if="warnings?.enabled" placement="top">
+      <span>
+        <div class="i-lucide:alert-triangle size-4.5 text-warning" />
+      </span>
+      <template #content>
+        <div class="max-h-200px max-w-320px overflow-auto" v-html="warnings?.message" />
+      </template>
+    </el-tooltip>
+  </div>
+</template>

package/src/components/Channel/WarningOutput.vue

@@ -1,40 +1,40 @@
-<script lang="ts" setup>
-const props = defineProps<{
-  output: any[]
-  warning?: string
-}>()
-</script>
-
-<template>
-  <div class="min-w-0 flex items-center gap-1">
-    <el-popover
-      v-if="output?.length > 0"
-      placement="top"
-      effect="dark"
-      :width="300"
-    >
-      <template #reference>
-        <div class="truncate">
-          {{ output[0] }}
-        </div>
-      </template>
-      <div v-for="item in output" :key="item" class="mt-1 flex gap-2">
-        <div class="truncate">
-          {{ item }}
-        </div>
-        <SSIconCopyButton :value="`${item}`" />
-      </div>
-    </el-popover>
-    <el-tooltip v-if="warning" placement="top">
-      <span>
-        <div class="i-lucide:alert-triangle size-4.5 text-warning" />
-      </span>
-      <template #content>
-        <div class="max-h-200px max-w-320px overflow-auto" v-html="warning" />
-      </template>
-    </el-tooltip>
-    <div v-else>
-      -
-    </div>
-  </div>
-</template>
+<script lang="ts" setup>
+const props = defineProps<{
+  output: any[]
+  warning?: string
+}>()
+</script>
+
+<template>
+  <div class="min-w-0 flex items-center gap-1">
+    <el-popover
+      v-if="output?.length > 0"
+      placement="top"
+      effect="dark"
+      :width="300"
+    >
+      <template #reference>
+        <div class="truncate">
+          {{ output[0] }}
+        </div>
+      </template>
+      <div v-for="item in output" :key="item" class="mt-1 flex gap-2">
+        <div class="truncate">
+          {{ item }}
+        </div>
+        <SSIconCopyButton :value="`${item}`" />
+      </div>
+    </el-popover>
+    <el-tooltip v-if="warning" placement="top">
+      <span>
+        <div class="i-lucide:alert-triangle size-4.5 text-warning" />
+      </span>
+      <template #content>
+        <div class="max-h-200px max-w-320px overflow-auto" v-html="warning" />
+      </template>
+    </el-tooltip>
+    <div v-else>
+      -
+    </div>
+  </div>
+</template>

package/src/components/CollapseTagsTooltip/CollapseTagsTooltip.vue

@@ -1,87 +1,87 @@
-<script lang="ts" setup>
-const props = withDefaults(defineProps<{
-  tags: string[]
-  limit?: number
-  isClose?: boolean
-  limitText?: number
-  maxWidthPopup?: number
-  maxHeight?: number
-}>(), {
-  limit: 3,
-  limitText: 15,
-  isClose: false,
-  maxWidthPopup: 300,
-  maxHeight: 300,
-})
-
-const emit = defineEmits(['deleteTag'])
-const _tags = useVModel(props, 'tags')
-
-const popupStyle = computed(() => {
-  return {
-    maxWidth: `${props.maxWidthPopup}px`,
-    width: 'auto',
-  }
-})
-const listTagShow = computed(() => {
-  return _tags.value.slice(0, props.limit)
-})
-
-const listTagCollapse = computed(() => {
-  return _tags.value.slice(props.limit)
-})
-
-function isDisableTooltip(tag: string) {
-  return tag.toString().length < props.limitText
-}
-
-function handleClose(tag: string | { label: string, value: string }) {
-  emit('deleteTag', tag)
-}
-
-function ellipseTextTag(tag: string) {
-  return tag.toString().length < props.limitText ? tag : `${tag.substring(0, props.limitText)}...`
-}
-</script>
-
-<template>
-  <div class="max-h-150px flex flex-wrap gap-1 overflow-auto">
-    <template v-for="tag in listTagShow" :key="tag">
-      <el-tooltip placement="top" :disabled="isDisableTooltip(tag)">
-        <el-tag :closable="isClose" @close="handleClose(tag)">
-          <slot name="contentTag" :tag="tag">
-            {{ ellipseTextTag(tag) }}
-          </slot>
-        </el-tag>
-        <template #content>
-          <slot name="contentTooltip" :content="tag">
-            {{ tag }}
-          </slot>
-        </template>
-      </el-tooltip>
-    </template>
-    <el-popover trigger="hover" placement="top" :popper-style="popupStyle">
-      <template #reference>
-        <el-tag v-if="listTagCollapse.length">
-          ...
-        </el-tag>
-      </template>
-      <div class="grid grid-cols-2 max-h-150px gap-1 overflow-auto p-2">
-        <template v-for="tag in listTagCollapse" :key="tag">
-          <el-tooltip placement="top" :disabled="isDisableTooltip(tag)">
-            <el-tag :closable="isClose" @close="handleClose(tag)">
-              <slot name="contentTag" :tag="tag">
-                {{ ellipseTextTag(tag) }}
-              </slot>
-            </el-tag>
-            <template #content>
-              <slot name="contentTooltip" :content="tag">
-                {{ tag }}
-              </slot>
-            </template>
-          </el-tooltip>
-        </template>
-      </div>
-    </el-popover>
-  </div>
-</template>
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  tags: string[]
+  limit?: number
+  isClose?: boolean
+  limitText?: number
+  maxWidthPopup?: number
+  maxHeight?: number
+}>(), {
+  limit: 3,
+  limitText: 15,
+  isClose: false,
+  maxWidthPopup: 300,
+  maxHeight: 300,
+})
+
+const emit = defineEmits(['deleteTag'])
+const _tags = useVModel(props, 'tags')
+
+const popupStyle = computed(() => {
+  return {
+    maxWidth: `${props.maxWidthPopup}px`,
+    width: 'auto',
+  }
+})
+const listTagShow = computed(() => {
+  return _tags.value.slice(0, props.limit)
+})
+
+const listTagCollapse = computed(() => {
+  return _tags.value.slice(props.limit)
+})
+
+function isDisableTooltip(tag: string) {
+  return tag.toString().length < props.limitText
+}
+
+function handleClose(tag: string | { label: string, value: string }) {
+  emit('deleteTag', tag)
+}
+
+function ellipseTextTag(tag: string) {
+  return tag.toString().length < props.limitText ? tag : `${tag.substring(0, props.limitText)}...`
+}
+</script>
+
+<template>
+  <div class="max-h-150px flex flex-wrap gap-1 overflow-auto">
+    <template v-for="tag in listTagShow" :key="tag">
+      <el-tooltip placement="top" :disabled="isDisableTooltip(tag)">
+        <el-tag :closable="isClose" @close="handleClose(tag)">
+          <slot name="contentTag" :tag="tag">
+            {{ ellipseTextTag(tag) }}
+          </slot>
+        </el-tag>
+        <template #content>
+          <slot name="contentTooltip" :content="tag">
+            {{ tag }}
+          </slot>
+        </template>
+      </el-tooltip>
+    </template>
+    <el-popover trigger="hover" placement="top" :popper-style="popupStyle">
+      <template #reference>
+        <el-tag v-if="listTagCollapse.length">
+          ...
+        </el-tag>
+      </template>
+      <div class="grid grid-cols-2 max-h-150px gap-1 overflow-auto p-2">
+        <template v-for="tag in listTagCollapse" :key="tag">
+          <el-tooltip placement="top" :disabled="isDisableTooltip(tag)">
+            <el-tag :closable="isClose" @close="handleClose(tag)">
+              <slot name="contentTag" :tag="tag">
+                {{ ellipseTextTag(tag) }}
+              </slot>
+            </el-tag>
+            <template #content>
+              <slot name="contentTooltip" :content="tag">
+                {{ tag }}
+              </slot>
+            </template>
+          </el-tooltip>
+        </template>
+      </div>
+    </el-popover>
+  </div>
+</template>

package/src/components/CollapseTagsTooltip/index.ts

@@ -1 +1 @@
-export { default as SSCollapseTagsTooltip } from './CollapseTagsTooltip.vue'
+export { default as SSCollapseTagsTooltip } from './CollapseTagsTooltip.vue'

package/src/components/CopyButton.vue

@@ -1,46 +1,46 @@
-<script setup lang="ts">
-import ClipboardJS from 'clipboard'
-import type { ButtonType } from 'element-plus'
-
-const props = withDefaults(defineProps<{
-  value: string
-  type?: ButtonType
-  circle?: boolean
-  noText?: boolean
-}>(), {
-  type: 'default',
-  circle: true,
-})
-
-const copyRef = ref()
-const { t } = useI18n()
-
-onMounted(() => {
-  const clipboard = new ClipboardJS(copyRef.value.ref, {
-    text: () => props.value,
-  })
-
-  clipboard.on('success', (e) => {
-    ElMessage.success(`${t('Copy')} ${props.noText ? '' : ` (${props.value.toString().length < 40 ? props.value.toString() : `${props.value.substring(0, 40)}...`})`}`)
-  })
-
-  clipboard.on('error', (e) => {
-    ElMessage.error(e.text)
-  })
-})
-</script>
-
-<template>
-  <el-button ref="copyRef" v-bind="$attrs" :circle="props.circle" :type="props.type" class="copy-btn">
-    <el-icon :size="16">
-      <div class="i-ep:copy-document" />
-    </el-icon>
-  </el-button>
-</template>
-
-<i18n lang="yaml">
-en:
-  Copy: Copied
-vi:
-  Copy: Đã sao chép
-</i18n>
+<script setup lang="ts">
+import ClipboardJS from 'clipboard'
+import type { ButtonType } from 'element-plus'
+
+const props = withDefaults(defineProps<{
+  value: string
+  type?: ButtonType
+  circle?: boolean
+  noText?: boolean
+}>(), {
+  type: 'default',
+  circle: true,
+})
+
+const copyRef = ref()
+const { t } = useI18n()
+
+onMounted(() => {
+  const clipboard = new ClipboardJS(copyRef.value.ref, {
+    text: () => props.value,
+  })
+
+  clipboard.on('success', (e) => {
+    ElMessage.success(`${t('Copy')} ${props.noText ? '' : ` (${props.value.toString().length < 40 ? props.value.toString() : `${props.value.substring(0, 40)}...`})`}`)
+  })
+
+  clipboard.on('error', (e) => {
+    ElMessage.error(e.text)
+  })
+})
+</script>
+
+<template>
+  <el-button ref="copyRef" v-bind="$attrs" :circle="props.circle" :type="props.type" class="copy-btn">
+    <el-icon :size="16">
+      <div class="i-ep:copy-document" />
+    </el-icon>
+  </el-button>
+</template>
+
+<i18n lang="yaml">
+en:
+  Copy: Copied
+vi:
+  Copy: Đã sao chép
+</i18n>

package/src/components/CopyText.vue

@@ -1,40 +1,40 @@
-<script setup lang="ts">
-import ClipboardJS from 'clipboard'
-import type { ButtonType } from 'element-plus'
-
-const props = withDefaults(defineProps<{
-  value: string
-  showTooltip?: boolean
-}>(), {
-  showTooltip: true,
-})
-
-const copyRef = ref()
-const { t } = useI18n()
-onMounted(() => {
-  const clipboard = new ClipboardJS(copyRef.value, {
-    text: () => props.value,
-  })
-
-  clipboard.on('success', (e) => {
-    ElMessage.success(`${t('Copy')} (${e.text})`)
-  })
-
-  clipboard.on('error', (e) => {
-    ElMessage.error(e.text)
-  })
-})
-</script>
-
-<template>
-  <span ref="copyRef" v-bind="$attrs" class="cursor-pointer">
-    <SSTooltipEllipsis :content="value" />
-  </span>
-</template>
-
-<i18n lang="yaml">
-en:
-  Copy: Copied
-vi:
-  Copy: Đã sao chép
-</i18n>
+<script setup lang="ts">
+import ClipboardJS from 'clipboard'
+import type { ButtonType } from 'element-plus'
+
+const props = withDefaults(defineProps<{
+  value: string
+  showTooltip?: boolean
+}>(), {
+  showTooltip: true,
+})
+
+const copyRef = ref()
+const { t } = useI18n()
+onMounted(() => {
+  const clipboard = new ClipboardJS(copyRef.value, {
+    text: () => props.value,
+  })
+
+  clipboard.on('success', (e) => {
+    ElMessage.success(`${t('Copy')} (${e.text})`)
+  })
+
+  clipboard.on('error', (e) => {
+    ElMessage.error(e.text)
+  })
+})
+</script>
+
+<template>
+  <span ref="copyRef" v-bind="$attrs" class="cursor-pointer">
+    <SSTooltipEllipsis :content="value" />
+  </span>
+</template>
+
+<i18n lang="yaml">
+en:
+  Copy: Copied
+vi:
+  Copy: Đã sao chép
+</i18n>

package/src/components/CopyTextButton.vue

@@ -1,40 +1,40 @@
-<script setup lang="ts">
-import { ElMessage } from 'element-plus'
-import ClipboardJS from 'clipboard'
-
-const props = defineProps<{
-  value: string
-}>()
-
-const copyRef = ref()
-
-onMounted(() => {
-  const textValue = props.value
-
-  const clipboard = new ClipboardJS(copyRef.value, {
-    text: () => props.value,
-  })
-
-  clipboard.on('success', (e) => {
-    ElMessage.success(textValue.toString().length < 40 ? textValue : `${textValue.substring(0, 40)}...`)
-  })
-
-  clipboard.on('error', (e) => {
-    ElMessage.error('Copy failed')
-  })
-})
-
-const { t } = useI18n()
-</script>
-
-<template>
-  <el-tooltip
-    placement="top"
-    effect="dark"
-    :content="t('Actions.copy')"
-  >
-    <div v-bind="$attrs" ref="copyRef" class="w-full cursor-pointer truncate text-sm text-blue hover:text-blue-3">
-      {{ value }}
-    </div>
-  </el-tooltip>
-</template>
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import ClipboardJS from 'clipboard'
+
+const props = defineProps<{
+  value: string
+}>()
+
+const copyRef = ref()
+
+onMounted(() => {
+  const textValue = props.value
+
+  const clipboard = new ClipboardJS(copyRef.value, {
+    text: () => props.value,
+  })
+
+  clipboard.on('success', (e) => {
+    ElMessage.success(textValue.toString().length < 40 ? textValue : `${textValue.substring(0, 40)}...`)
+  })
+
+  clipboard.on('error', (e) => {
+    ElMessage.error('Copy failed')
+  })
+})
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <el-tooltip
+    placement="top"
+    effect="dark"
+    :content="t('Actions.copy')"
+  >
+    <div v-bind="$attrs" ref="copyRef" class="w-full cursor-pointer truncate text-sm text-blue hover:text-blue-3">
+      {{ value }}
+    </div>
+  </el-tooltip>
+</template>