rayyy-vue-table-components 1.3.32 → 1.4.0

package/dist/src/const/tableConst.d.ts

@@ -1,3 +1,28 @@
+export declare const NAVIGATION_ITEMS: readonly [{
+    readonly id: "transfer-dialog";
+    readonly title: "TransferDialog 示範";
+    readonly description: "表格列配置功能";
+    readonly icon: "⚙️";
+    readonly section: "transfer-demo";
+}, {
+    readonly id: "sort-table";
+    readonly title: "排序表格示範";
+    readonly description: "排序和選擇功能";
+    readonly icon: "📊";
+    readonly section: "sort-table-demo";
+}, {
+    readonly id: "search-bar";
+    readonly title: "搜尋欄示範";
+    readonly description: "搜尋和篩選功能";
+    readonly icon: "🔍";
+    readonly section: "search-bar-demo";
+}, {
+    readonly id: "buttons-dialogs";
+    readonly title: "按鈕和對話框示範";
+    readonly description: "基礎組件展示";
+    readonly icon: "🎯";
+    readonly section: "buttons-dialogs-demo";
+}];
 export declare const DEMO_CONSTANTS: {
     readonly LOADING_DURATION: 2000;
     readonly STATUS_CONFIG: {
@@ -30,3 +55,29 @@ export interface User extends Record<string, unknown> {
     joinDate: string;
 }
 export declare const DEMO_USER_DATA: User[];
+export declare const DEPARTMENT_OPTIONS: readonly [{
+    readonly label: "全部";
+    readonly value: "";
+}, {
+    readonly label: "工程部";
+    readonly value: "engineering";
+}, {
+    readonly label: "設計部";
+    readonly value: "design";
+}, {
+    readonly label: "行銷部";
+    readonly value: "marketing";
+}];
+export declare const STATUS_OPTIONS: readonly [{
+    readonly label: "全部";
+    readonly value: "";
+}, {
+    readonly label: "啟用";
+    readonly value: "active";
+}, {
+    readonly label: "停用";
+    readonly value: "inactive";
+}, {
+    readonly label: "待處理";
+    readonly value: "pending";
+}];

package/dist/src/index.d.ts

@@ -3,23 +3,12 @@ import { default as BaseTable } from './components/tables/BaseTable.vue';
 import { default as BaseBtn } from './components/items/BaseBtn.vue';
 import { default as BaseInput } from './components/form/BaseInput.vue';
 import { default as BaseDialog } from './components/items/BaseDialog.vue';
-import { default as BaseWaringDialog } from './components/items/BaseWaringDialog.vue';
 import { default as SortTable } from './components/tables/SortTable.vue';
 import { default as TitleTable } from './components/tables/TitleTable.vue';
 import { default as SearchBar } from './components/items/SearchBar.vue';
-import { default as TransferDialog } from './components/transfer/TransferDialog.vue';
-import { default as TransferItem } from './components/transfer/transferItem.vue';
-import { default as FunctionHeader } from './components/layout/FunctionHeader.vue';
-import { default as MainPanel } from './components/layout/MainPanel.vue';
-import { default as SearchableListPanel } from './components/layout/SearchableListPanel.vue';
-import { default as DetailLayout } from './components/layout/DetailLayout.vue';
-import { default as FilterLayout } from './components/layout/FilterLayout.vue';
-import { default as LanguageSwitcher } from './components/LanguageSwitcher.vue';
 export * from './types';
 export * from './utils/tableHelper';
-export { default as I18nPlugin, install as installI18n, i18n, switchLanguage, getCurrentLocale, getCurrentLocaleConfig, availableLocales, getLanguageName, initLocale, localeConfig, syncWithExternalLocale, type I18nPluginOptions } from './plugins/i18n';
-export { switchLanguage as switchLanguageUtil, getCurrentLocale as getCurrentLocaleUtil, availableLocales as availableLocalesUtil, getLanguageName as getLanguageNameUtil, getLocaleConfig, getCurrentLocaleConfig as getCurrentLocaleConfigUtil, initLanguageSwitcher, configureLanguageSwitcher, type LocaleCode, type LocaleConfig, type LanguageConfig, type ExternalI18nHandler } from './utils/languageSwitcher';
-export { BaseTable, BaseBtn, BaseInput, BaseDialog, BaseWaringDialog, SortTable, TitleTable, SearchBar, TransferDialog, TransferItem, FunctionHeader, MainPanel, SearchableListPanel, DetailLayout, FilterLayout, LanguageSwitcher };
+export { BaseTable, BaseBtn, BaseInput, BaseDialog, SortTable, TitleTable, SearchBar };
 export type { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, BaseBtnEmits, BaseBtnInstance, BaseDialogProps, BaseDialogEmits, BaseDialogInstance, PluginOptions, VueTableComponentsPlugin, } from './types/components';
 export * from './components';
 export declare function install(app: App, options?: {

package/dist/src/router/constants.d.ts

@@ -5,7 +5,7 @@ export declare const ROUTES: {
     readonly INSTALL_GUIDE: "/install-guide";
     readonly DOCS_CENTER: "/docs-center";
     readonly SEARCHABLE_LIST_PANEL: "/demo/searchable-list-panel";
-    readonly I18N_DEMO: "/demo/i18n-demo";
+    readonly BASE_MULTIPLE_INPUT: "/demo/base-multiple-input";
     readonly TRANSFER_DIALOG: "/demo/transfer-dialog";
     readonly BASE_TABLE: "/demo/base-table";
     readonly BASE_BTN: "/demo/base-btn";
@@ -28,7 +28,7 @@ export declare const ROUTE_NAMES: {
     readonly INSTALL_GUIDE: "InstallGuide";
     readonly DOCS_CENTER: "DocsCenter";
     readonly SEARCHABLE_LIST_PANEL: "SearchableListPanel";
-    readonly I18N_DEMO: "I18nDemo";
+    readonly BASE_MULTIPLE_INPUT: "BaseMultipleInput";
     readonly TRANSFER_DIALOG: "TransferDialog";
     readonly BASE_TABLE: "BaseTable";
     readonly BASE_BTN: "BaseBtn";

package/dist/src/types/components.d.ts

@@ -238,6 +238,8 @@ export interface BaseDialogProps {
   bodyLoading?: boolean
   /** 提交按鈕加載狀態 */
   submitLoading?: boolean
+  /** 是否顯示關閉按鈕 */
+  showClose?: boolean
 }
 
 /** BaseDialog 組件 Emits 類型 */
@@ -409,6 +411,8 @@ export interface SearchBarEmits {
   (e: 'keydown:enter', data: string): void
   /** 清除事件 */
   (e: 'update:clear'): void
+  /** 重置篩選事件 */
+  (e: 'update:resetFilter'): void
 }
 
 /** SearchBar 組件實例類型 */
@@ -445,6 +449,8 @@ export interface SearchableListPanelProps {
   showFilter?: boolean
   /** 是否顯示預設搜尋 */
   showDefaultSearch?: boolean
+  /** 分頁大小選項列表 */
+  pageSizeList?: number[]
 }
 
 /** SearchableListPanel 組件 Emits 類型 */
@@ -637,34 +643,6 @@ export interface TransferItemInstance {
   $emit: TransferItemEmits
 }
 
-// ==================== 語言切換相關組件類型 ====================
-
-// ==================== LanguageSwitcher 組件類型 ====================
-
-/** LanguageSwitcher 組件 Props 類型 */
-export interface LanguageSwitcherProps {
-  /** 是否顯示語言名稱 */
-  showLabel?: boolean
-  /** 自定義 CSS 類名 */
-  class?: string
-  /** 是否禁用 */
-  disabled?: boolean
-}
-
-/** LanguageSwitcher 組件 Emits 類型 */
-export interface LanguageSwitcherEmits {
-  /** 語言變更事件 */
-  (e: 'change', locale: string): void
-}
-
-/** LanguageSwitcher 組件實例類型 */
-export interface LanguageSwitcherInstance {
-  /** 組件 Props */
-  $props: LanguageSwitcherProps
-  /** 組件 Emits */
-  $emit: LanguageSwitcherEmits
-}
-
 // ==================== 組件定義類型 ====================
 
 /** BaseTable 組件定義 */
@@ -924,22 +902,6 @@ export declare const TransferItem: DefineComponent<
   install: (app: App) => void
 }
 
-/** LanguageSwitcher 組件定義 */
-export declare const LanguageSwitcher: DefineComponent<
-  LanguageSwitcherProps,
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  LanguageSwitcherEmits
-> & {
-  /** 安裝方法 */
-  install: (app: App) => void
-}
-
 // ==================== 插件類型 ====================
 
 /** 插件安裝選項 */
@@ -986,8 +948,6 @@ export interface VueTableComponentsPlugin {
   FilterLayout: typeof FilterLayout
   /** TransferItem 組件 */
   TransferItem: typeof TransferItem
-  /** LanguageSwitcher 組件 */
-  LanguageSwitcher: typeof LanguageSwitcher
 }
 
 // ==================== 全局類型擴展 ====================
@@ -1010,6 +970,5 @@ declare module '@vue/runtime-core' {
     DetailLayout: typeof DetailLayout
     FilterLayout: typeof FilterLayout
     TransferItem: typeof TransferItem
-    LanguageSwitcher: typeof LanguageSwitcher
   }
 }

package/dist/src/{components/LanguageSwitcher.vue.d.ts → views/demo/BaseMultipleInputDemo.vue.d.ts}

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayyy-vue-table-components",
-  "version": "1.3.32",
+  "version": "1.4.0",
   "description": "Vue 3 + Element Plus 表格組件庫",
   "type": "module",
   "main": "./dist/index.umd.js",
@@ -84,8 +84,7 @@
     "prepublishOnly": "npm run build",
     "release:patch": "./scripts/release.sh patch",
     "release:minor": "./scripts/release.sh minor",
-    "release:major": "./scripts/release.sh major",
-    "fetchI18n": "node ./scripts/fetch-i18n.js"
+    "release:major": "./scripts/release.sh major"
   },
   "peerDependencies": {
     "element-plus": "^2.9.3",
@@ -130,8 +129,5 @@
     "vue-router": "^4.5.0",
     "vue-tsc": "^2.2.8",
     "vuedraggable": "^4.1.0"
-  },
-  "dependencies": {
-    "vue-i18n": "^11.1.12"
   }
 }

package/src/components/form/BaseMultipleInput.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue'
+import type { ElInput } from 'element-plus'
+
+const inputValue = ref<string>('')
+const InputRef = ref<InstanceType<typeof ElInput>>()
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string[]
+    type?: string
+    validateRule?: (inputString: string) => boolean
+  }>(),
+  {
+    type: 'textarea',
+    validateRule: () => true,
+  },
+)
+
+// 獲取所有非 props 屬性
+const attrs = useAttrs()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', val: string[]): void
+  (e: 'inputError'): void
+}>()
+
+const remove = (position: number) => {
+  emits(
+    'update:modelValue',
+    props.modelValue.filter((input, index) => index !== position),
+  )
+}
+
+const handleInputConfirm = () => {
+  const inputString = inputValue.value
+  if (!inputString) {
+    return
+  }
+  if (!props.validateRule(inputString)) {
+    emits('inputError')
+    return
+  }
+  if (!props.modelValue.includes(inputString)) {
+    emits('update:modelValue', props.modelValue.concat(inputValue.value))
+  }
+
+  inputValue.value = ''
+}
+
+const focusInput = () => {
+  InputRef.value?.focus()
+}
+
+const deleteLastTag = () => {
+  if (inputValue.value) {
+    return
+  }
+  emits('update:modelValue', props.modelValue.slice(0, -1))
+}
+</script>
+
+<template>
+  <div v-bind="attrs" class="w-full border border-t rounded" @click="focusInput">
+    <el-tag
+      v-for="(tag, position) in props.modelValue"
+      :key="tag"
+      class="m-0.5 break-all whitespace-pre-line"
+      closable
+      @close="() => remove(position)"
+    >
+      {{ tag }}
+    </el-tag>
+    <el-input
+      ref="InputRef"
+      v-model="inputValue"
+      :type="props.type"
+      class="shadow-none"
+      autosize
+      resize="none"
+      @keydown.enter.prevent="handleInputConfirm"
+      @blur="handleInputConfirm"
+      @keydown.delete.stop="deleteLastTag"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-input) {
+  --el-input-border-color: transparent;
+  --el-input-focus-border-color: transparent;
+  --el-border-color-hover: transparent;
+}
+
+:deep(.el-input__inner) {
+  box-shadow: none !important;
+}
+
+:deep(.el-input__inner:hover) {
+  box-shadow: none !important;
+}
+
+:deep(.el-input)::-webkit-outer-spin-button,
+:deep(.el-input)::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+:deep(.el-input[type='number']) {
+  -moz-appearance: textfield;
+}
+</style>

package/src/components/form/BaseSelector.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-select
+    v-bind="attrs"
+    :model-value="modelValue"
+    :class="props.class"
+    :placeholder="props.placeholder"
+    :clearable="props.clearable"
+    :collapse-tags="props.collapseTags"
+    :collapse-tags-tooltip="props.collapseTagsTooltip"
+    :multiple="props.multiple"
+    :disabled="props.disabled"
+    :reserve-keyword="false"
+    filterable
+    @update:model-value="updateValue"
+  >
+    <el-option v-for="it in options" :key="it.label" :label="it.label" :value="it.value" />
+  </el-select>
+</template>
+
+<script lang="ts" setup>
+import { useAttrs } from 'vue'
+import type { ElOptions } from '@/types/OptionDto.ts'
+
+export type Selection = string | string[]
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: Selection
+    options?: ElOptions[]
+    placeholder?: string
+    clearable?: boolean
+    collapseTags?: boolean
+    collapseTagsTooltip?: boolean
+    multiple?: boolean
+    disabled?: boolean
+    class?: string
+  }>(),
+  {
+    modelValue: () => '',
+    options: () => [{ value: '', label: '' }],
+    placeholder: '請選擇',
+    class: 'w-full',
+  },
+)
+
+// 獲取所有非 props 屬性
+const attrs = useAttrs()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', data?: Selection): void
+}>()
+
+function updateValue(val: Selection) {
+  let value: Selection | undefined = val
+
+  if (typeof value === 'string' && !value) {
+    value = undefined
+  }
+
+  emits('update:modelValue', value)
+}
+</script>

package/src/components/index.ts

@@ -4,6 +4,7 @@ export { default as BaseBtn } from './items/BaseBtn.vue'
 export { default as BaseInput } from './form/BaseInput.vue'
 export { default as BaseDialog } from './items/BaseDialog.vue'
 export { default as BaseWaringDialog } from './items/BaseWaringDialog.vue'
+export { default as BaseMultipleInput } from './form/BaseMultipleInput.vue'
 export { default as SortTable } from './tables/SortTable.vue'
 export { default as TitleTable } from './tables/TitleTable.vue'
 export { default as SearchBar } from './items/SearchBar.vue'
@@ -14,7 +15,6 @@ export { default as MainPanel } from './layout/MainPanel.vue'
 export { default as SearchableListPanel } from './layout/SearchableListPanel.vue'
 export { default as DetailLayout } from './layout/DetailLayout.vue'
 export { default as FilterLayout } from './layout/FilterLayout.vue'
-export { default as LanguageSwitcher } from './LanguageSwitcher.vue'
 
 // 導出組件類型
 export type {
@@ -82,7 +82,7 @@ export type {
   FilterLayoutInstance,
   // 插件類型
   PluginOptions,
-  VueTableComponentsPlugin,
+  VueTableComponentsPlugin
 } from '../types/components.d'
 
 // 重新導出組件定義類型
@@ -97,6 +97,7 @@ export type { default as SearchBarType } from './items/SearchBar.vue'
 export type { default as TransferDialogType } from './transfer/TransferDialog.vue'
 export type { default as TransferItemType } from './transfer/transferItem.vue'
 export type { default as SearchableListPanelType } from './layout/SearchableListPanel.vue'
+export type { default as BaseMultipleInputType } from './form/BaseMultipleInput.vue'
 export type { default as FunctionHeaderType } from './layout/FunctionHeader.vue'
 export type { default as MainPanelType } from './layout/MainPanel.vue'
 export type { default as DetailLayoutType } from './layout/DetailLayout.vue'

package/src/components/items/BaseDialog.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
-import { useI18n } from 'vue-i18n'
 import BaseBtn from './BaseBtn.vue'
 
-const { t } = useI18n()
-
 const props = defineProps<{
   modelValue: boolean
   title?: string
@@ -16,6 +13,7 @@ const props = defineProps<{
   isPrimary?: boolean
   bodyLoading?: boolean
   submitLoading?: boolean
+  showClose?: boolean
 }>()
 
 const { width } = useWindowSize()
@@ -83,14 +81,17 @@ const handleSubmit = () => {
     <template #footer>
       <footer>
         <slot name="customFooter">
-          <base-btn
-            :text="t('common.confirm')"
-            type="primary"
-            is-fill
-            @click="handleSubmit"
-            :loading="submitLoading"
-          />
-          <base-btn :text="t('common.cancel')" type="primary" @click="handleCancel" />
+          <base-btn text="關閉" type="primary" is-fill @click="handleCancel" v-if="showClose" />
+          <template v-if="!showClose">
+            <base-btn
+              text="確定"
+              type="primary"
+              is-fill
+              @click="handleSubmit"
+              :loading="submitLoading"
+            />
+            <base-btn text="取消" type="primary" @click="handleCancel" />
+          </template>
         </slot>
       </footer>
     </template>

package/src/components/items/BaseWaringDialog.vue

@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 import BaseDialog from './BaseDialog.vue'
 
-const { t } = useI18n()
-
-const props = defineProps<{
-  modelValue: boolean
-  waringText?: string
-  subWaringText?: string
-  titleText?: string
-  modalWidth?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    waringText?: string
+    subWaringText?: string
+    titleText?: string
+    modalWidth?: string
+  }>(),
+  {
+    waringText: '請問是否確認移除該使用者',
+    titleText: '警告',
+  },
+)
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void

package/src/components/items/SearchBar.vue

@@ -1,10 +1,7 @@
 <script lang="ts" setup>
 import { ref, useAttrs } from 'vue'
-import { useI18n } from 'vue-i18n'
 import BaseInput from '../form/BaseInput.vue'
 
-const { t } = useI18n()
-
 defineProps<{
   showSearch?: boolean
 }>()
@@ -12,6 +9,7 @@ defineProps<{
 const emits = defineEmits<{
   (e: 'keydown:enter', data: string): void
   (e: 'update:clear'): void
+  (e: 'update:resetFilter'): void
 }>()
 
 // 獲取所有非 props 屬性
@@ -25,6 +23,9 @@ const doSearch = () => {
 const clearableClick = () => {
   emits('update:clear')
 }
+const resetFilter = () => {
+  emits('update:resetFilter')
+}
 </script>
 
 <template>
@@ -37,8 +38,9 @@ const clearableClick = () => {
       <div v-if="showSearch" class="search-input">
         <base-input
           v-model="keyword"
-          :placeholder="t('search.placeholder')"
+          placeholder="請輸入關鍵字搜尋列表"
           :show-word-limit="true"
+          :show-search="true"
           @keydown.enter="doSearch"
           @update:clearValue="clearableClick"
           class="search-input_inner"

package/src/components/layout/DetailLayout.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import { MainPanel, BaseBtn } from '@/components'
-
-const { t } = useI18n()
+import { MainPanel, BaseBtn, SearchableListPanel } from '@/components'
 
 defineProps<{
   title: string
@@ -41,9 +38,9 @@ const handleBackClick = () => {
     </template>
 
     <template #footer>
-      <div class="border-t pt-4 w-full flex items-center justify-end" v-if="isEditable">
-        <BaseBtn :text="t('common.save')" type="primary" is-fill @click="saveDetailEdit" />
-        <BaseBtn :text="t('common.discard')" type="primary" @click="cancelDetailEdit" />
+      <div class="border-t py-4 w-full flex items-center justify-end" v-if="isEditable">
+        <BaseBtn text="儲存" type="primary" is-fill @click="saveDetailEdit" />
+        <BaseBtn text="捨棄" type="primary" @click="cancelDetailEdit" />
       </div>
     </template>
   </MainPanel>

package/src/components/layout/FilterLayout.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import { MainPanel, BaseBtn } from '@/components'
 
-const { t } = useI18n()
-
 defineProps<{
   mainTitle: string
   showBack?: boolean | string | object
@@ -39,8 +36,8 @@ const handleBackClick = () => {
     </template>
     <template #footer>
       <div class="submit-row">
-        <base-btn :text="t('common.execute')" is-fill type="primary" @click="doFilter" />
-        <base-btn :text="t('common.reset')" type="primary" @click="resetFilter" />
+        <base-btn text="執行" is-fill type="primary" @click="doFilter" />
+        <base-btn text="重設" type="primary" @click="resetFilter" />
       </div>
     </template>
   </MainPanel>

package/src/components/layout/FunctionHeader.vue

@@ -42,7 +42,6 @@ const handleClick = () => {
       </div>
       <div class="font-bold text-text text-xl md:text-2xl;">{{ props.title }}</div>
     </div>
-
     <div class="flex items-center gap-3">
       <slot />
     </div>

package/src/components/layout/SearchableListPanel.vue

@@ -3,15 +3,21 @@ import { toRefs, computed } from 'vue'
 import type { Pager } from '@/types'
 import { MainPanel, SearchBar } from '@/components'
 
-const props = defineProps<{
-  title: string
-  pagination: Pager
-  showBack?: boolean | string | object
-  showSearch?: boolean
-  showEdit?: boolean
-  showFilter?: boolean
-  showDefaultSearch?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    title: string
+    pagination: Pager
+    showBack?: boolean | string | object
+    showSearch?: boolean
+    showEdit?: boolean
+    showFilter?: boolean
+    showDefaultSearch?: boolean
+    pageSizeList?: number[]
+  }>(),
+  {
+    pageSizeList: () => [10, 20, 30, 40, 50],
+  },
+)
 
 const { pagination } = toRefs(props)