rayyy-vue-table-components 1.3.18 → 1.3.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,112 +0,0 @@
1
- <script setup lang="ts">
2
- import { ref, useAttrs } from 'vue'
3
- import type { ElInput } from 'element-plus'
4
-
5
- const inputValue = ref<string>('')
6
- const InputRef = ref<InstanceType<typeof ElInput>>()
7
-
8
- const props = withDefaults(
9
- defineProps<{
10
- modelValue: string[]
11
- type?: string
12
- validateRule?: (inputString: string) => boolean
13
- }>(),
14
- {
15
- type: 'textarea',
16
- validateRule: () => true,
17
- },
18
- )
19
-
20
- // 獲取所有非 props 屬性
21
- const attrs = useAttrs()
22
-
23
- const emits = defineEmits<{
24
- (e: 'update:modelValue', val: string[]): void
25
- (e: 'inputError'): void
26
- }>()
27
-
28
- const remove = (position: number) => {
29
- emits(
30
- 'update:modelValue',
31
- props.modelValue.filter((input, index) => index !== position),
32
- )
33
- }
34
-
35
- const handleInputConfirm = () => {
36
- const inputString = inputValue.value
37
- if (!inputString) {
38
- return
39
- }
40
- if (!props.validateRule(inputString)) {
41
- emits('inputError')
42
- return
43
- }
44
- if (!props.modelValue.includes(inputString)) {
45
- emits('update:modelValue', props.modelValue.concat(inputValue.value))
46
- }
47
-
48
- inputValue.value = ''
49
- }
50
-
51
- const focusInput = () => {
52
- InputRef.value?.focus()
53
- }
54
-
55
- const deleteLastTag = () => {
56
- if (inputValue.value) {
57
- return
58
- }
59
- emits('update:modelValue', props.modelValue.slice(0, -1))
60
- }
61
- </script>
62
-
63
- <template>
64
- <div v-bind="attrs" class="w-full border border-t rounded" @click="focusInput">
65
- <el-tag
66
- v-for="(tag, position) in props.modelValue"
67
- :key="tag"
68
- class="m-0.5 break-all whitespace-pre-line"
69
- closable
70
- @close="() => remove(position)"
71
- >
72
- {{ tag }}
73
- </el-tag>
74
- <el-input
75
- ref="InputRef"
76
- v-model="inputValue"
77
- :type="props.type"
78
- class="shadow-none"
79
- autosize
80
- resize="none"
81
- @keydown.enter.prevent="handleInputConfirm"
82
- @blur="handleInputConfirm"
83
- @keydown.delete.stop="deleteLastTag"
84
- />
85
- </div>
86
- </template>
87
-
88
- <style scoped lang="scss">
89
- :deep(.el-input) {
90
- --el-input-border-color: transparent;
91
- --el-input-focus-border-color: transparent;
92
- --el-border-color-hover: transparent;
93
- }
94
-
95
- :deep(.el-input__inner) {
96
- box-shadow: none !important;
97
- }
98
-
99
- :deep(.el-input__inner:hover) {
100
- box-shadow: none !important;
101
- }
102
-
103
- :deep(.el-input)::-webkit-outer-spin-button,
104
- :deep(.el-input)::-webkit-inner-spin-button {
105
- -webkit-appearance: none;
106
- margin: 0;
107
- }
108
-
109
- :deep(.el-input[type='number']) {
110
- -moz-appearance: textfield;
111
- }
112
- </style>
@@ -1,62 +0,0 @@
1
- <template>
2
- <el-select
3
- v-bind="attrs"
4
- :model-value="modelValue"
5
- :class="props.class"
6
- :placeholder="props.placeholder"
7
- :clearable="props.clearable"
8
- :collapse-tags="props.collapseTags"
9
- :collapse-tags-tooltip="props.collapseTagsTooltip"
10
- :multiple="props.multiple"
11
- :disabled="props.disabled"
12
- :reserve-keyword="false"
13
- filterable
14
- @update:model-value="updateValue"
15
- >
16
- <el-option v-for="it in options" :key="it.label" :label="it.label" :value="it.value" />
17
- </el-select>
18
- </template>
19
-
20
- <script lang="ts" setup>
21
- import { useAttrs } from 'vue'
22
- import type { ElOptions } from '@/types/OptionDto.ts'
23
-
24
- export type Selection = string | string[]
25
-
26
- const props = withDefaults(
27
- defineProps<{
28
- modelValue?: Selection
29
- options?: ElOptions[]
30
- placeholder?: string
31
- clearable?: boolean
32
- collapseTags?: boolean
33
- collapseTagsTooltip?: boolean
34
- multiple?: boolean
35
- disabled?: boolean
36
- class?: string
37
- }>(),
38
- {
39
- modelValue: () => '',
40
- options: () => [{ value: '', label: '' }],
41
- placeholder: '請選擇',
42
- class: 'w-full',
43
- },
44
- )
45
-
46
- // 獲取所有非 props 屬性
47
- const attrs = useAttrs()
48
-
49
- const emits = defineEmits<{
50
- (e: 'update:modelValue', data?: Selection): void
51
- }>()
52
-
53
- function updateValue(val: Selection) {
54
- let value: Selection | undefined = val
55
-
56
- if (typeof value === 'string' && !value) {
57
- value = undefined
58
- }
59
-
60
- emits('update:modelValue', value)
61
- }
62
- </script>
@@ -1,53 +0,0 @@
1
- /**
2
- * Element Plus 語言配置工具
3
- * 提供組件庫推薦的語言設定
4
- */
5
-
6
- // 導入常用的 Element Plus 語言包
7
- import zhTw from 'element-plus/es/locale/lang/zh-tw'
8
- import zhCn from 'element-plus/es/locale/lang/zh-cn'
9
- import en from 'element-plus/es/locale/lang/en'
10
- import ja from 'element-plus/es/locale/lang/ja'
11
- import ko from 'element-plus/es/locale/lang/ko'
12
-
13
- // 導出常用的 Element Plus 語言包
14
- export { default as zhTw } from 'element-plus/es/locale/lang/zh-tw'
15
- export { default as zhCn } from 'element-plus/es/locale/lang/zh-cn'
16
- export { default as en } from 'element-plus/es/locale/lang/en'
17
- export { default as ja } from 'element-plus/es/locale/lang/ja'
18
- export { default as ko } from 'element-plus/es/locale/lang/ko'
19
-
20
- /**
21
- * 組件庫推薦的 Element Plus 配置
22
- * 預設使用繁體中文
23
- */
24
- export const defaultElementPlusConfig = {
25
- locale: zhTw,
26
- }
27
-
28
- /**
29
- * 常用的語言配置選項
30
- */
31
- export const localeOptions = {
32
- /** 繁體中文 */
33
- 'zh-tw': zhTw,
34
- /** 簡體中文 */
35
- 'zh-cn': zhCn,
36
- /** 英文 */
37
- 'en': en,
38
- /** 日文 */
39
- 'ja': ja,
40
- /** 韓文 */
41
- 'ko': ko,
42
- } as const
43
-
44
- /**
45
- * 獲取指定語言的 Element Plus 配置
46
- * @param locale 語言代碼
47
- * @returns Element Plus 配置物件
48
- */
49
- export function getElementPlusConfig(locale: keyof typeof localeOptions = 'zh-tw') {
50
- return {
51
- locale: localeOptions[locale],
52
- }
53
- }