rayyy-vue-table-components 2.0.23 → 2.0.25

package/dist/src/components/form/BaseSelector.vue.d.ts

@@ -0,0 +1,23 @@
+import { ElOptions } from '../../types/OptionDto.ts';
+export type Selection = string | string[];
+type __VLS_Props = {
+    modelValue?: Selection;
+    options?: ElOptions[];
+    placeholder?: string;
+    collapseTags?: boolean;
+    collapseTagsTooltip?: boolean;
+    multiple?: boolean;
+    disabled?: boolean;
+    class?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (data?: Selection | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((data?: Selection | undefined) => any) | undefined;
+}>, {
+    class: string;
+    placeholder: string;
+    modelValue: Selection;
+    options: ElOptions[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,6 +1,7 @@
 export { default as BaseTable } from './tables/BaseTable.vue';
 export { default as BaseBtn } from './items/BaseBtn.vue';
 export { default as BaseInput } from './form/BaseInput.vue';
+export { default as BaseSelector } from './form/BaseSelector.vue';
 export { default as BaseDialog } from './items/BaseDialog.vue';
 export { default as BaseWaringDialog } from './items/BaseWaringDialog.vue';
 export { default as SortTable } from './tables/SortTable.vue';
@@ -17,6 +18,7 @@ export type { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, B
 export type { default as BaseTableType } from './tables/BaseTable.vue';
 export type { default as BaseBtnType } from './items/BaseBtn.vue';
 export type { default as BaseInputType } from './form/BaseInput.vue';
+export type { default as BaseSelectorType } from './form/BaseSelector.vue';
 export type { default as BaseDialogType } from './items/BaseDialog.vue';
 export type { default as BaseWaringDialogType } from './items/BaseWaringDialog.vue';
 export type { default as SortTableType } from './tables/SortTable.vue';

package/dist/src/index.d.ts

@@ -2,6 +2,7 @@ import { App } from 'vue';
 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 BaseSelector } from './components/form/BaseSelector.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';
@@ -18,7 +19,7 @@ export * from './types';
 export * from './utils/tableHelper';
 export { useI18n, setLocale, useComponentElementLocale } from './utils/i18n';
 export * from './locales';
-export { BaseTable, BaseBtn, BaseInput, BaseDialog, BaseWaringDialog, SortTable, TitleTable, SearchBar, TransferDialog, TransferItem, FunctionHeader, MainPanel, SearchableListPanel, DetailLayout, FilterLayout };
+export { BaseTable, BaseBtn, BaseInput, BaseSelector, BaseDialog, BaseWaringDialog, SortTable, TitleTable, SearchBar, TransferDialog, TransferItem, FunctionHeader, MainPanel, SearchableListPanel, DetailLayout, FilterLayout };
 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

@@ -8,6 +8,7 @@ export declare const ROUTES: {
     readonly TRANSFER_DIALOG: "/demo/transfer-dialog";
     readonly BASE_BTN: "/demo/base-btn";
     readonly BASE_INPUT: "/demo/base-input";
+    readonly BASE_SELECTOR: "/demo/base-selector";
     readonly BASE_DIALOG: "/demo/base-dialog";
     readonly BASE_WARING_DIALOG: "/demo/base-waring-dialog";
     readonly BASE_FORM: "/demo/base-form";
@@ -30,6 +31,7 @@ export declare const ROUTE_NAMES: {
     readonly TRANSFER_DIALOG: "TransferDialog";
     readonly BASE_BTN: "BaseBtn";
     readonly BASE_INPUT: "BaseInput";
+    readonly BASE_SELECTOR: "BaseSelector";
     readonly BASE_DIALOG: "BaseDialog";
     readonly BASE_WARING_DIALOG: "BaseWaringDialog";
     readonly TABLE: "Table";

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

@@ -369,6 +369,42 @@ export interface BaseInputInstance {
   $emit: BaseInputEmits
 }
 
+// ==================== BaseSelector 組件類型 ====================
+
+/** BaseSelector 組件 Props 類型 */
+export interface BaseSelectorProps {
+  /** 模型值 */
+  modelValue?: string | string[]
+  /** 選項數據 */
+  options?: Array<{ value: string; label: string }>
+  /** 佔位符 */
+  placeholder?: string
+  /** 是否折疊標籤 */
+  collapseTags?: boolean
+  /** 是否顯示折疊標籤提示 */
+  collapseTagsTooltip?: boolean
+  /** 是否多選 */
+  multiple?: boolean
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 自定義 CSS 類名 */
+  class?: string
+}
+
+/** BaseSelector 組件 Emits 類型 */
+export interface BaseSelectorEmits {
+  /** 模型值更新事件 */
+  'update:modelValue': (value?: string | string[]) => void
+}
+
+/** BaseSelector 組件實例類型 */
+export interface BaseSelectorInstance {
+  /** 組件 Props */
+  $props: BaseSelectorProps
+  /** 組件 Emits */
+  $emit: BaseSelectorEmits
+}
+
 
 // ==================== 搜尋相關組件類型 ====================
 
@@ -747,6 +783,23 @@ export declare const BaseInput: DefineComponent<
   install: (app: App) => void
 }
 
+/** BaseSelector 組件定義 */
+export declare const BaseSelector: DefineComponent<
+  BaseSelectorProps,
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  BaseSelectorEmits
+> & {
+  /** 安裝方法 */
+  install: (app: App) => void
+}
+
 
 /** SearchBar 組件定義 */
 export declare const SearchBar: DefineComponent<
@@ -892,6 +945,8 @@ export interface VueTableComponentsPlugin {
   TransferDialog: typeof TransferDialog
   /** BaseInput 組件 */
   BaseInput: typeof BaseInput
+  /** BaseSelector 組件 */
+  BaseSelector: typeof BaseSelector
   /** SearchBar 組件 */
   SearchBar: typeof SearchBar
   /** SearchableListPanel 組件 */
@@ -920,6 +975,7 @@ declare module '@vue/runtime-core' {
     BaseWaringDialog: typeof BaseWaringDialog
     TransferDialog: typeof TransferDialog
     BaseInput: typeof BaseInput
+    BaseSelector: typeof BaseSelector
     SearchBar: typeof SearchBar
     SearchableListPanel: typeof SearchableListPanel
     FunctionHeader: typeof FunctionHeader

package/dist/src/views/demo/BaseSelectorDemo.vue.d.ts

@@ -0,0 +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>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayyy-vue-table-components",
-  "version": "2.0.23",
+  "version": "2.0.25",
   "description": "Vue 3 + Element Plus 表格組件庫",
   "type": "module",
   "main": "./dist/index.umd.js",

package/src/assets/styles/_components.scss

@@ -46,3 +46,9 @@
   @apply w-fit;
   @apply text-blue-10;
 }
+
+
+
+.my-select-popper {
+  z-index: 4000 !important; /* 比 dialog 高即可 */
+}

package/src/components/form/BaseSelector.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import type { ElOptions } from '@/types/OptionDto.ts'
+
+export type Selection = string | string[]
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: Selection
+    options?: ElOptions[]
+    placeholder?: string
+    collapseTags?: boolean
+    collapseTagsTooltip?: boolean
+    multiple?: boolean
+    disabled?: boolean
+    class?: string
+  }>(),
+  {
+    modelValue: () => '',
+    options: () => [{ value: '', label: '' }],
+    placeholder: '請選擇',
+    class: 'w-full',
+  },
+)
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', data?: Selection): void
+}>()
+
+function updateValue(val: Selection) {
+  let value: Selection | undefined = val
+
+  if (typeof value === 'string' && !value) {
+    // el-select 元件裡包的是 input，所以當清空時預設會給 string，故把空字串轉成 undefined
+    value = undefined
+  }
+
+  emits('update:modelValue', value)
+}
+</script>
+
+<template>
+  <el-select
+    :model-value="modelValue"
+    :class="props.class"
+    :placeholder="props.placeholder"
+    :clearable="true"
+    :collapse-tags="props.collapseTags"
+    :collapse-tags-tooltip="props.collapseTagsTooltip"
+    :multiple="props.multiple"
+    :disabled="props.disabled"
+    :reserve-keyword="false"
+    filterable
+    @update:model-value="updateValue"
+    popper-class="my-select-popper"
+  >
+    <el-option v-for="it in options" :key="it.label" :label="it.label" :value="it.value" />
+  </el-select>
+</template>

package/src/components/index.ts

@@ -2,6 +2,7 @@
 export { default as BaseTable } from './tables/BaseTable.vue'
 export { default as BaseBtn } from './items/BaseBtn.vue'
 export { default as BaseInput } from './form/BaseInput.vue'
+export { default as BaseSelector } from './form/BaseSelector.vue'
 export { default as BaseDialog } from './items/BaseDialog.vue'
 export { default as BaseWaringDialog } from './items/BaseWaringDialog.vue'
 export { default as SortTable } from './tables/SortTable.vue'
@@ -88,6 +89,7 @@ export type {
 export type { default as BaseTableType } from './tables/BaseTable.vue'
 export type { default as BaseBtnType } from './items/BaseBtn.vue'
 export type { default as BaseInputType } from './form/BaseInput.vue'
+export type { default as BaseSelectorType } from './form/BaseSelector.vue'
 export type { default as BaseDialogType } from './items/BaseDialog.vue'
 export type { default as BaseWaringDialogType } from './items/BaseWaringDialog.vue'
 export type { default as SortTableType } from './tables/SortTable.vue'

package/src/types/components.d.ts

@@ -370,6 +370,42 @@ export interface BaseInputInstance {
   $emit: BaseInputEmits
 }
 
+// ==================== BaseSelector 組件類型 ====================
+
+/** BaseSelector 組件 Props 類型 */
+export interface BaseSelectorProps {
+  /** 模型值 */
+  modelValue?: string | string[]
+  /** 選項數據 */
+  options?: Array<{ value: string; label: string }>
+  /** 佔位符 */
+  placeholder?: string
+  /** 是否折疊標籤 */
+  collapseTags?: boolean
+  /** 是否顯示折疊標籤提示 */
+  collapseTagsTooltip?: boolean
+  /** 是否多選 */
+  multiple?: boolean
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 自定義 CSS 類名 */
+  class?: string
+}
+
+/** BaseSelector 組件 Emits 類型 */
+export interface BaseSelectorEmits {
+  /** 模型值更新事件 */
+  'update:modelValue': (value?: string | string[]) => void
+}
+
+/** BaseSelector 組件實例類型 */
+export interface BaseSelectorInstance {
+  /** 組件 Props */
+  $props: BaseSelectorProps
+  /** 組件 Emits */
+  $emit: BaseSelectorEmits
+}
+
 
 // ==================== 搜尋相關組件類型 ====================
 
@@ -748,6 +784,23 @@ export declare const BaseInput: DefineComponent<
   install: (app: App) => void
 }
 
+/** BaseSelector 組件定義 */
+export declare const BaseSelector: DefineComponent<
+  BaseSelectorProps,
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  BaseSelectorEmits
+> & {
+  /** 安裝方法 */
+  install: (app: App) => void
+}
+
 
 /** SearchBar 組件定義 */
 export declare const SearchBar: DefineComponent<
@@ -893,6 +946,8 @@ export interface VueTableComponentsPlugin {
   TransferDialog: typeof TransferDialog
   /** BaseInput 組件 */
   BaseInput: typeof BaseInput
+  /** BaseSelector 組件 */
+  BaseSelector: typeof BaseSelector
   /** SearchBar 組件 */
   SearchBar: typeof SearchBar
   /** SearchableListPanel 組件 */
@@ -921,6 +976,7 @@ declare module '@vue/runtime-core' {
     BaseWaringDialog: typeof BaseWaringDialog
     TransferDialog: typeof TransferDialog
     BaseInput: typeof BaseInput
+    BaseSelector: typeof BaseSelector
     SearchBar: typeof SearchBar
     SearchableListPanel: typeof SearchableListPanel
     FunctionHeader: typeof FunctionHeader