@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/IconCopyButton.vue

@@ -1,43 +1,43 @@
-<script setup lang="ts">
-import ClipboardJS from 'clipboard'
-
-const props = withDefaults(defineProps<{
-  value: string
-  size?: number
-}>(), {
-  size: 16,
-})
-
-const copyRef = ref()
-const { t } = useI18n()
-onMounted(() => {
-  const clipboard = new ClipboardJS(copyRef.value.$el, {
-    text: () => props.value,
-  })
-
-  clipboard.on('success', (e) => {
-    ElMessage.success(`${t('Copy')} (${props.value.toString().length < 40 ? props.value.toString() : `${props.value.substring(0, 40)}...`})`)
-  })
-
-  clipboard.on('error', (e) => {
-    ElMessage.error(`${t('CopyFailed')}`)
-  })
-})
-</script>
-
-<template>
-  <el-icon ref="copyRef" class="cursor-copy" :size="size">
-    <div class="i-ep:copy-document" />
-  </el-icon>
-</template>
-
-<i18n lang="yaml">
-en:
-  ContentHover: Copy value
-  Copy: Copied
-  CopyFailed: Copy failed
-vi:
-  ContentHover: Sao chép nội dung
-  Copy: Đã sao chép
-  CopyFailed: Sao chép không thành công
-</i18n>
+<script setup lang="ts">
+import ClipboardJS from 'clipboard'
+
+const props = withDefaults(defineProps<{
+  value: string
+  size?: number
+}>(), {
+  size: 16,
+})
+
+const copyRef = ref()
+const { t } = useI18n()
+onMounted(() => {
+  const clipboard = new ClipboardJS(copyRef.value.$el, {
+    text: () => props.value,
+  })
+
+  clipboard.on('success', (e) => {
+    ElMessage.success(`${t('Copy')} (${props.value.toString().length < 40 ? props.value.toString() : `${props.value.substring(0, 40)}...`})`)
+  })
+
+  clipboard.on('error', (e) => {
+    ElMessage.error(`${t('CopyFailed')}`)
+  })
+})
+</script>
+
+<template>
+  <el-icon ref="copyRef" class="cursor-copy" :size="size">
+    <div class="i-ep:copy-document" />
+  </el-icon>
+</template>
+
+<i18n lang="yaml">
+en:
+  ContentHover: Copy value
+  Copy: Copied
+  CopyFailed: Copy failed
+vi:
+  ContentHover: Sao chép nội dung
+  Copy: Đã sao chép
+  CopyFailed: Sao chép không thành công
+</i18n>

package/src/components/InformationLabel.vue

@@ -1,67 +1,67 @@
-<script setup lang="ts">
-import { isNil } from 'remeda'
-
-const props = withDefaults(defineProps<{
-  label: string
-  info?: any
-  information?: string
-  required?: boolean
-  minWidth?: string
-  maxWidth?: string
-  useHTMLString?: boolean
-}>(), {
-  label: '',
-  information: '',
-})
-
-const { label, info, maxWidth } = toRefs(props)
-const { openHelpPanel } = useSharedHelpPanel()
-const visible = ref(false)
-function renderMathJax() {
-  visible.value = true
-  nextTick(() => {
-    if (window.MathJax) {
-      window.MathJax.typeset()
-    }
-  })
-}
-</script>
-
-<template>
-  <div class="inline-flex items-center gap-[2px]">
-    <slot name="label">
-      <span :class="minWidth ?? ''">{{ label }}</span>
-    </slot>
-    <template v-if="!isNil(info)">
-      <el-icon class="cursor-pointer text-info" @click.prevent.stop="openHelpPanel({ ...info, label })">
-        <div class="i-ep:info-filled text-blue-500" />
-      </el-icon>
-    </template>
-    <template v-else-if="information || $slots.information">
-      <el-tooltip
-        :visible="visible"
-        placement="top-start"
-        :z-index="999999"
-      >
-        <template #content>
-          <slot name="information">
-            <div
-              v-if="useHTMLString"
-              v-bind="$attrs"
-              class="max-w-390px"
-              :class="maxWidth"
-              v-html="information"
-            />
-            <p v-else class="max-w-390px">
-              {{ toUpperCaseFirstLetter(information) }}
-            </p>
-          </slot>
-        </template>
-        <el-icon class="cursor-pointer text-info" @mouseenter="renderMathJax" @mouseleave="visible = false">
-          <div class="i-ep:info-filled text-blue-500" />
-        </el-icon>
-      </el-tooltip>
-    </template>
-    <span v-if="required" class="text-[--el-color-danger]">*</span>
-  </div>
-</template>
+<script setup lang="ts">
+import { isNil } from 'remeda'
+
+const props = withDefaults(defineProps<{
+  label: string
+  info?: any
+  information?: string
+  required?: boolean
+  minWidth?: string
+  maxWidth?: string
+  useHTMLString?: boolean
+}>(), {
+  label: '',
+  information: '',
+})
+
+const { label, info, maxWidth } = toRefs(props)
+const { openHelpPanel } = useSharedHelpPanel()
+const visible = ref(false)
+function renderMathJax() {
+  visible.value = true
+  nextTick(() => {
+    if (window.MathJax) {
+      window.MathJax.typeset()
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="inline-flex items-center gap-[2px]">
+    <slot name="label">
+      <span :class="minWidth ?? ''">{{ label }}</span>
+    </slot>
+    <template v-if="!isNil(info)">
+      <el-icon class="cursor-pointer text-info" @click.prevent.stop="openHelpPanel({ ...info, label })">
+        <div class="i-ep:info-filled text-blue-500" />
+      </el-icon>
+    </template>
+    <template v-else-if="information || $slots.information">
+      <el-tooltip
+        :visible="visible"
+        placement="top-start"
+        :z-index="999999"
+      >
+        <template #content>
+          <slot name="information">
+            <div
+              v-if="useHTMLString"
+              v-bind="$attrs"
+              class="max-w-390px"
+              :class="maxWidth"
+              v-html="information"
+            />
+            <p v-else class="max-w-390px">
+              {{ toUpperCaseFirstLetter(information) }}
+            </p>
+          </slot>
+        </template>
+        <el-icon class="cursor-pointer text-info" @mouseenter="renderMathJax" @mouseleave="visible = false">
+          <div class="i-ep:info-filled text-blue-500" />
+        </el-icon>
+      </el-tooltip>
+    </template>
+    <span v-if="required" class="text-[--el-color-danger]">*</span>
+  </div>
+</template>

package/src/components/Input/InputTags.vue

@@ -1,136 +1,136 @@
-<script lang="ts" setup>
-import { formContextKey, formItemContextKey } from 'element-plus'
-
-const props = withDefaults(defineProps<{
-  modelValue: string[]
-  disabled?: boolean
-  maxLengthItem?: number
-  maxItem?: number
-  label?: string
-}>(), {
-  modelValue: () => [],
-  disabled: false,
-  maxLengthItem: 35,
-  maxItem: 100,
-})
-
-const emit = defineEmits(['deleteTag'])
-const _value = useVModel(props, 'modelValue')
-const inputTag = ref('')
-const inputVisible = ref(false)
-const InputRef = ref()
-const context = inject(formContextKey)
-const itemCtx = inject(formItemContextKey)
-
-// Function to validate individual tag
-function isValidTag(tag: string): boolean {
-  // Check length
-  if (tag.trim().split(' ').join('').length > props.maxLengthItem)
-    return false
-
-  // Check special characters
-  if (/[`!@#$%^&*()+=[\]{};':"\\|,.<>/?~]/.test(tag))
-    return false
-
-  // Check accented characters and spaces
-  if (!new RegExp(`^[\\w-]{1,${props.maxLengthItem}}$`).test(tag))
-    return false
-
-  return true
-}
-
-function handleCloseTag(tag: string) {
-  _value.value?.splice(_value.value?.indexOf(tag), 1)
-  emit('deleteTag', tag)
-
-  context?.validateField?.(itemCtx?.prop)
-}
-
-function showInput() {
-  inputVisible.value = true
-  nextTick(() => {
-    InputRef.value!.input!.focus()
-  })
-}
-
-function handleInputConfirm() {
-  if (inputTag.value.trim() !== '')
-    _value.value?.push(inputTag.value)
-
-  inputVisible.value = false
-  nextTick(() => {
-    inputTag.value = ''
-  })
-}
-
-const { t } = useI18n()
-</script>
-
-<template>
-  <div class="flex flex-wrap items-center gap-0.5">
-    <template v-for="tag in _value" :key="tag">
-      <el-tooltip
-        class="box-item"
-        effect="dark"
-        :content="tag"
-        placement="top"
-      >
-        <el-tag
-          class="mx-1 my-1"
-          :closable="!disabled"
-          :disable-transitions="false"
-          :type="isValidTag(tag) ? undefined : 'danger'"
-          @close="handleCloseTag(tag)"
-        >
-          <div class="max-w-150px truncate py-1">
-            {{ tag }}
-          </div>
-        </el-tag>
-      </el-tooltip>
-    </template>
-    <el-input
-      v-show="inputVisible"
-      ref="InputRef"
-      v-model="inputTag"
-      class="my-1 w-100px!"
-      size="small"
-      :maxlength="maxLengthItem"
-      :disabled="disabled"
-      @keyup.enter="handleInputConfirm"
-      @blur="handleInputConfirm"
-    />
-    <div :class="{ '[&_.el-button--small]:!ml-1': _value.length > 0 }" class="mb-1">
-      <el-button
-        v-if="_value.length < props.maxItem"
-        type="button"
-        class="button-new-tag"
-        size="small"
-        :disabled="disabled"
-        @click="showInput"
-      >
-        + {{ label || t('newTag') }}
-      </el-button>
-    </div>
-  </div>
-</template>
-
-<i18n lang="yaml" global>
-en:
-  newTag: New Tag
-  validate:
-    accentedCharacters: Tag can not contain accented characters and spaces
-    duplicate: Tag can not contain duplicate
-    itemLength: Tag can not contain more than {0} characters
-    length: Tags can not contain more than 3 tags
-    required: Please input tag
-    specialCharacters: Tag can not contain special characters
-vi:
-  newTag: Thẻ mới
-  validate:
-    accentedCharacters: Thẻ không được chứa ký tự có dấu và khoảng cách
-    duplicate: Danh sách thẻ không được trùng lặp nhau
-    itemLength: Thẻ không vượt quá {0} ký tự
-    length: Danh sách thẻ không quá 3 thẻ
-    required: Vui lòng tạo thẻ
-    specialCharacters: Thẻ không được chứ ký tự đặc biệt
-</i18n>
+<script lang="ts" setup>
+import { formContextKey, formItemContextKey } from 'element-plus'
+
+const props = withDefaults(defineProps<{
+  modelValue: string[]
+  disabled?: boolean
+  maxLengthItem?: number
+  maxItem?: number
+  label?: string
+}>(), {
+  modelValue: () => [],
+  disabled: false,
+  maxLengthItem: 35,
+  maxItem: 100,
+})
+
+const emit = defineEmits(['deleteTag'])
+const _value = useVModel(props, 'modelValue')
+const inputTag = ref('')
+const inputVisible = ref(false)
+const InputRef = ref()
+const context = inject(formContextKey)
+const itemCtx = inject(formItemContextKey)
+
+// Function to validate individual tag
+function isValidTag(tag: string): boolean {
+  // Check length
+  if (tag.trim().split(' ').join('').length > props.maxLengthItem)
+    return false
+
+  // Check special characters
+  if (/[`!@#$%^&*()+=[\]{};':"\\|,.<>/?~]/.test(tag))
+    return false
+
+  // Check accented characters and spaces
+  if (!new RegExp(`^[\\w-]{1,${props.maxLengthItem}}$`).test(tag))
+    return false
+
+  return true
+}
+
+function handleCloseTag(tag: string) {
+  _value.value?.splice(_value.value?.indexOf(tag), 1)
+  emit('deleteTag', tag)
+
+  context?.validateField?.(itemCtx?.prop)
+}
+
+function showInput() {
+  inputVisible.value = true
+  nextTick(() => {
+    InputRef.value!.input!.focus()
+  })
+}
+
+function handleInputConfirm() {
+  if (inputTag.value.trim() !== '')
+    _value.value?.push(inputTag.value)
+
+  inputVisible.value = false
+  nextTick(() => {
+    inputTag.value = ''
+  })
+}
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-0.5">
+    <template v-for="tag in _value" :key="tag">
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        :content="tag"
+        placement="top"
+      >
+        <el-tag
+          class="mx-1 my-1"
+          :closable="!disabled"
+          :disable-transitions="false"
+          :type="isValidTag(tag) ? undefined : 'danger'"
+          @close="handleCloseTag(tag)"
+        >
+          <div class="max-w-150px truncate py-1">
+            {{ tag }}
+          </div>
+        </el-tag>
+      </el-tooltip>
+    </template>
+    <el-input
+      v-show="inputVisible"
+      ref="InputRef"
+      v-model="inputTag"
+      class="my-1 w-100px!"
+      size="small"
+      :maxlength="maxLengthItem"
+      :disabled="disabled"
+      @keyup.enter="handleInputConfirm"
+      @blur="handleInputConfirm"
+    />
+    <div :class="{ '[&_.el-button--small]:!ml-1': _value.length > 0 }" class="mb-1">
+      <el-button
+        v-if="_value.length < props.maxItem"
+        type="button"
+        class="button-new-tag"
+        size="small"
+        :disabled="disabled"
+        @click="showInput"
+      >
+        + {{ label || t('newTag') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<i18n lang="yaml" global>
+en:
+  newTag: New Tag
+  validate:
+    accentedCharacters: Tag can not contain accented characters and spaces
+    duplicate: Tag can not contain duplicate
+    itemLength: Tag can not contain more than {0} characters
+    length: Tags can not contain more than 3 tags
+    required: Please input tag
+    specialCharacters: Tag can not contain special characters
+vi:
+  newTag: Thẻ mới
+  validate:
+    accentedCharacters: Thẻ không được chứa ký tự có dấu và khoảng cách
+    duplicate: Danh sách thẻ không được trùng lặp nhau
+    itemLength: Thẻ không vượt quá {0} ký tự
+    length: Danh sách thẻ không quá 3 thẻ
+    required: Vui lòng tạo thẻ
+    specialCharacters: Thẻ không được chứ ký tự đặc biệt
+</i18n>

package/src/components/Input/index.ts

@@ -1 +1 @@
-export { default as SSInputTags } from './InputTags.vue'
+export { default as SSInputTags } from './InputTags.vue'