@cyberpunk-vue/components 1.12.7 → 1.13.2

package/dist/select/src/select.d.ts

@@ -0,0 +1,280 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { Size } from '@cyberpunk-vue/hooks';
+/**
+ * 选项类型
+ */
+export interface SelectOption {
+    /**
+     * 显示文本
+     */
+    label: string;
+    /**
+     * 选项值
+     */
+    value: string | number;
+    /**
+     * 是否禁用该选项
+     */
+    disabled?: boolean;
+}
+/**
+ * 选择器尺寸
+ * - `sm` - 小尺寸 (28px 高)
+ * - `md` - 中等尺寸 (36px 高)，默认
+ * - `lg` - 大尺寸 (44px 高)
+ * - 也支持数字 (px) 或带单位字符串 (如 '2rem')
+ */
+export type SelectSize = Size;
+/**
+ * 选择器形状
+ * - `clip` - 切角样式（默认，赛博朋克特色）
+ * - `no-clip` - 直角矩形
+ * - `round` - 圆角矩形
+ */
+export type SelectShape = 'clip' | 'no-clip' | 'round';
+/**
+ * 选择器变体
+ * - `outline` - 边框样式（默认），透明背景
+ * - `filled` - 填充样式，带背景色
+ * - `ghost` - 幽灵样式，无边框无背景
+ */
+export type SelectVariant = 'outline' | 'filled' | 'ghost';
+/**
+ * 弹出位置
+ */
+export type SelectPlacement = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
+/**
+ * CpSelect 组件 Props 定义
+ *
+ * @description 赛博朋克风格下拉选择器，支持多种尺寸、形态变体、可搜索/可清空功能。
+ *
+ * @example
+ * ```vue
+ * <!-- 基础用法 -->
+ * <CpSelect v-model="value" :options="options" placeholder="请选择" />
+ *
+ * <!-- 可搜索 -->
+ * <CpSelect v-model="value" :options="options" filterable />
+ *
+ * <!-- 可清空 -->
+ * <CpSelect v-model="value" :options="options" clearable />
+ * ```
+ *
+ * @slots
+ * - `default` - 自定义选项内容
+ * - `prefix` - 触发器前缀
+ * - `empty` - 无选项时的空状态
+ *
+ * @exposes
+ * - `focus()` - 使下拉框获取焦点
+ * - `blur()` - 使下拉框失去焦点
+ * - `open()` - 打开下拉面板
+ * - `close()` - 关闭下拉面板
+ * @category 表单组件
+ * @displayName CpSelect 下拉选择
+ */
+export declare const selectProps: {
+    /**
+     * 绑定值 (v-model)
+     * @default ''
+     */
+    readonly modelValue: {
+        readonly type: PropType<string | number>;
+        readonly default: "";
+    };
+    /**
+     * 选项列表
+     * @default []
+     */
+    readonly options: {
+        readonly type: PropType<SelectOption[]>;
+        readonly default: () => never[];
+    };
+    /**
+     * 占位文本
+     * @default '请选择'
+     */
+    readonly placeholder: {
+        readonly type: StringConstructor;
+        readonly default: "请选择";
+    };
+    /**
+     * 搜索框占位文本 (仅在面板开启搜索时有效)
+     * @default '搜索...'
+     */
+    readonly filterPlaceholder: {
+        readonly type: StringConstructor;
+        readonly default: "搜索...";
+    };
+    /**
+     * 是否禁用
+     * @default false
+     */
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * 是否可清空
+     * @default false
+     */
+    readonly clearable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * 是否可搜索过滤
+     * @default false
+     */
+    readonly filterable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * 选择器尺寸
+     * @default 'md'
+     */
+    readonly size: {
+        readonly type: PropType<SelectSize>;
+        readonly default: "md";
+    };
+    /**
+     * 选择器形状
+     * @default 'clip'
+     */
+    readonly shape: {
+        readonly type: PropType<SelectShape>;
+        readonly default: "clip";
+    };
+    /**
+     * 选择器变体
+     * @default 'outline'
+     */
+    readonly variant: {
+        readonly type: PropType<SelectVariant>;
+        readonly default: "outline";
+    };
+    /**
+     * 自定义聚焦颜色
+     * @default ''
+     */
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /**
+     * 未激活状态边框颜色
+     * @default ''
+     */
+    readonly inactiveColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /**
+     * Placeholder 文字颜色
+     * @default ''
+     */
+    readonly placeholderColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /**
+     * 是否启用行内搜索 (直接在触发器输入)
+     * @default false
+     */
+    readonly inline: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * 弹出位置
+     * @default 'bottom-start'
+     */
+    readonly placement: {
+        readonly type: PropType<SelectPlacement>;
+        readonly default: "bottom-start";
+    };
+    /**
+     * Teleport 目标
+     * @default 'body'
+     */
+    readonly teleportTo: {
+        readonly type: PropType<string | HTMLElement>;
+        readonly default: "body";
+    };
+    /**
+     * 下拉面板最大高度 (px)
+     * @default 256
+     */
+    readonly maxHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 256;
+    };
+    /**
+     * 无匹配时的文本
+     * @default '无匹配数据'
+     */
+    readonly noMatchText: {
+        readonly type: StringConstructor;
+        readonly default: "无匹配数据";
+    };
+    /**
+     * 无数据时的文本
+     * @default '无数据'
+     */
+    readonly noDataText: {
+        readonly type: StringConstructor;
+        readonly default: "无数据";
+    };
+    /**
+     * 清除动画持续时间 (ms)
+     * 控制点击清空按钮时文字消失动画的速度
+     * @default 150
+     * @example `<CpSelect :clear-duration="300" />`
+     */
+    readonly clearDuration: {
+        readonly type: NumberConstructor;
+        readonly default: 150;
+    };
+    /**
+     * 选择器宽度
+     * 支持数字 (px) 或带单位字符串 (如 '200px', '15rem')。
+     * 为空时默认 100%（铺满父容器）。
+     * @default ''
+     */
+    readonly width: {
+        readonly type: PropType<string | number>;
+        readonly default: "";
+    };
+};
+export type SelectProps = ExtractPropTypes<typeof selectProps>;
+/**
+ * CpSelect 组件事件定义
+ */
+export declare const selectEmits: {
+    /**
+     * 值变化时触发 (v-model 绑定)
+     */
+    'update:modelValue': (value: string | number) => boolean;
+    /**
+     * 选中值变化时触发
+     */
+    change: (value: string | number) => boolean;
+    /**
+     * 清空时触发
+     */
+    clear: () => boolean;
+    /**
+     * 获取焦点时触发
+     */
+    focus: () => boolean;
+    /**
+     * 失去焦点时触发
+     */
+    blur: () => boolean;
+    /**
+     * 下拉面板显示时触发
+     */
+    visibleChange: (visible: boolean) => boolean;
+};
+export type SelectEmits = typeof selectEmits;

package/dist/{dropdown/src/dropdown.vue.d.ts → select/src/select.vue.d.ts}

@@ -1,11 +1,11 @@
-import { DropdownOption } from './dropdown';
+import { SelectOption } from './select';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         prefix?(_: {}): any;
         empty?(_: {}): any;
         default?(_: {
-            option: DropdownOption;
+            option: SelectOption;
         }): any;
     };
     refs: {
@@ -23,7 +23,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         readonly default: "";
     };
     readonly options: {
-        readonly type: import('vue').PropType<DropdownOption[]>;
+        readonly type: import('vue').PropType<SelectOption[]>;
         readonly default: () => never[];
     };
     readonly placeholder: {
@@ -47,15 +47,15 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         readonly default: false;
     };
     readonly size: {
-        readonly type: import('vue').PropType<import('./dropdown').DropdownSize>;
+        readonly type: import('vue').PropType<import('./select').SelectSize>;
         readonly default: "md";
     };
     readonly shape: {
-        readonly type: import('vue').PropType<import('./dropdown').DropdownShape>;
+        readonly type: import('vue').PropType<import('./select').SelectShape>;
         readonly default: "clip";
     };
     readonly variant: {
-        readonly type: import('vue').PropType<import('./dropdown').DropdownVariant>;
+        readonly type: import('vue').PropType<import('./select').SelectVariant>;
         readonly default: "outline";
     };
     readonly color: {
@@ -75,7 +75,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         readonly default: false;
     };
     readonly placement: {
-        readonly type: import('vue').PropType<import('./dropdown').DropdownPlacement>;
+        readonly type: import('vue').PropType<import('./select').SelectPlacement>;
         readonly default: "bottom-start";
     };
     readonly teleportTo: {
@@ -126,7 +126,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         readonly default: "";
     };
     readonly options: {
-        readonly type: import('vue').PropType<DropdownOption[]>;
+        readonly type: import('vue').PropType<SelectOption[]>;
         readonly default: () => never[];
     };
     readonly placeholder: {
@@ -150,15 +150,15 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         readonly default: false;
     };
     readonly size: {
-        readonly type: import('vue').PropType<import('./dropdown').DropdownSize>;
+        readonly type: import('vue').PropType<import('./select').SelectSize>;
         readonly default: "md";
     };
     readonly shape: {
-        readonly type: import('vue').PropType<import('./dropdown').DropdownShape>;
+        readonly type: import('vue').PropType<import('./select').SelectShape>;
         readonly default: "clip";
     };
     readonly variant: {
-        readonly type: import('vue').PropType<import('./dropdown').DropdownVariant>;
+        readonly type: import('vue').PropType<import('./select').SelectVariant>;
         readonly default: "outline";
     };
     readonly color: {
@@ -178,7 +178,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         readonly default: false;
     };
     readonly placement: {
-        readonly type: import('vue').PropType<import('./dropdown').DropdownPlacement>;
+        readonly type: import('vue').PropType<import('./select').SelectPlacement>;
         readonly default: "bottom-start";
     };
     readonly teleportTo: {
@@ -216,9 +216,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     readonly size: import('@cyberpunk-vue/hooks').Size;
     readonly width: string | number;
     readonly color: string;
-    readonly variant: import('./dropdown').DropdownVariant;
+    readonly variant: import('./select').SelectVariant;
     readonly disabled: boolean;
-    readonly shape: import('./dropdown').DropdownShape;
+    readonly shape: import('./select').SelectShape;
     readonly inline: boolean;
     readonly placeholder: string;
     readonly modelValue: string | number;
@@ -228,8 +228,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     readonly maxHeight: number;
     readonly inactiveColor: string;
     readonly teleportTo: string | HTMLElement;
-    readonly placement: import('./dropdown').DropdownPlacement;
-    readonly options: DropdownOption[];
+    readonly placement: import('./select').SelectPlacement;
+    readonly options: SelectOption[];
     readonly filterPlaceholder: string;
     readonly filterable: boolean;
     readonly noMatchText: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberpunk-vue/components",
-  "version": "1.12.7",
+  "version": "1.13.2",
   "description": "Cyberpunk Vue components - A futuristic Vue 3 component library",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -23,9 +23,10 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@cyberpunk-vue/constants": "1.12.7",
-    "@cyberpunk-vue/theme-chalk": "1.12.7",
-    "@cyberpunk-vue/hooks": "1.12.7"
+    "@floating-ui/dom": "^1.7.6",
+    "@cyberpunk-vue/hooks": "1.13.2",
+    "@cyberpunk-vue/theme-chalk": "1.13.2",
+    "@cyberpunk-vue/constants": "1.13.2"
   },
   "author": "Juxest",
   "license": "MIT",