@jnrs/vue-core 1.2.27 → 1.2.29
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.
- package/AGENTS.md +76 -0
- package/CHANGELOG.md +22 -1
- package/README.md +19 -11
- package/dist/components/JnDateQuery.vue.d.ts +54 -0
- package/dist/components/JnSelectTemplate.vue.d.ts +10 -0
- package/dist/components/index.d.ts +2 -1
- package/dist/components/index.js +1170 -894
- package/package.json +2 -2
package/AGENTS.md
CHANGED
|
@@ -482,6 +482,8 @@ const tableRowClassName = ({ row }) => {
|
|
|
482
482
|
| queryForm | `Record<string, unknown>` | — | 表单查询参数 |
|
|
483
483
|
| initialParams | `Record<string, unknown>` | — | 初始查询参数 |
|
|
484
484
|
| remoteFilterKey | `string` | `'name'` | 下拉框查询参数远程过滤参数的 key 值 |
|
|
485
|
+
| collapseTags | `boolean` | `true` | 是否折叠标签 |
|
|
486
|
+
| maxCollapseTags | `number` | `1` | 折叠时显示的最大标签数 |
|
|
485
487
|
|
|
486
488
|
**使用示例：**
|
|
487
489
|
|
|
@@ -740,6 +742,80 @@ const dialogVisible = ref(false)
|
|
|
740
742
|
|
|
741
743
|
---
|
|
742
744
|
|
|
745
|
+
#### JnDateQuery
|
|
746
|
+
|
|
747
|
+
通用时间查询组件，合并两种使用场景：固定类型模式（配合快捷按钮）和可切换类型模式（内置类型切换器）。通过 `type` 配置绑定值为单个时间或时间范围。
|
|
748
|
+
|
|
749
|
+
**Props：**
|
|
750
|
+
|
|
751
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
752
|
+
| ----------------- | --------------------------------------------------- | --------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
|
|
753
|
+
| modelValue | `string \| [string, string]` | — | v-model 绑定值（`type='date'/'month'/'year'` 为 string，`type='week'/'daterange'` 为 [string, string]） |
|
|
754
|
+
| type | `'date' \| 'week' \| 'month' \| 'year' \| 'daterange'` | `'date'` | 日期类型；`showTypeSwitcher=true` 时作为初始类型 |
|
|
755
|
+
| showTypeSwitcher | `boolean` | `false` | 是否显示类型切换器 |
|
|
756
|
+
| switcherStyle | `'select' \| 'button-group'` | `'select'` | 切换器风格（下拉选择 or 按钮组） |
|
|
757
|
+
| typeOptions | `DateType[]` | `['date','week','month','year','daterange']` | 可切换的类型选项 |
|
|
758
|
+
| quickButtons | `'none' \| 'arrows' \| 'group'` | `'none'` | 快捷按钮风格（无 / 左右箭头 / 按钮组） |
|
|
759
|
+
| valueFormat | `string` | `'YYYY-MM-DD'` | 日期格式 |
|
|
760
|
+
| clearable | `boolean` | `false` | 是否可清除 |
|
|
761
|
+
| size | `'' \| 'small' \| 'default' \| 'large'` | `'default'` | 尺寸 |
|
|
762
|
+
| placeholder | `string` | `'选择日期'` | 单值 placeholder |
|
|
763
|
+
| startPlaceholder | `string` | `'开始日期'` | 范围开始 placeholder |
|
|
764
|
+
| endPlaceholder | `string` | `'结束日期'` | 范围结束 placeholder |
|
|
765
|
+
| rangeSeparator | `string` | `'至'` | 范围分隔符 |
|
|
766
|
+
|
|
767
|
+
**Events：**
|
|
768
|
+
|
|
769
|
+
- `update:modelValue` - 值变化时触发
|
|
770
|
+
- `change` - 值变化时触发，参数为 `(value, type)`
|
|
771
|
+
- `type-change` - 类型切换时触发，参数为 `(type)`
|
|
772
|
+
|
|
773
|
+
**使用示例 1：工厂日历场景（固定类型 + 快捷按钮组）**
|
|
774
|
+
|
|
775
|
+
```vue
|
|
776
|
+
<template>
|
|
777
|
+
<JnDateQuery
|
|
778
|
+
v-model="monthValue"
|
|
779
|
+
type="month"
|
|
780
|
+
quick-buttons="group"
|
|
781
|
+
value-format="YYYY-MM-DD"
|
|
782
|
+
placeholder="选择月份"
|
|
783
|
+
/>
|
|
784
|
+
</template>
|
|
785
|
+
|
|
786
|
+
<script setup>
|
|
787
|
+
import { ref } from 'vue'
|
|
788
|
+
import { JnDateQuery } from '@jnrs/vue-core/components'
|
|
789
|
+
|
|
790
|
+
const monthValue = ref('')
|
|
791
|
+
</script>
|
|
792
|
+
```
|
|
793
|
+
|
|
794
|
+
**使用示例 2：生产统计场景（可切换类型 + 按钮组切换器）**
|
|
795
|
+
|
|
796
|
+
```vue
|
|
797
|
+
<template>
|
|
798
|
+
<JnDateQuery
|
|
799
|
+
v-model="dateValue"
|
|
800
|
+
type="date"
|
|
801
|
+
show-type-switcher
|
|
802
|
+
switcher-style="button-group"
|
|
803
|
+
:type-options="['date', 'week', 'month', 'year', 'daterange']"
|
|
804
|
+
quick-buttons="arrows"
|
|
805
|
+
value-format="YYYY-MM-DD"
|
|
806
|
+
/>
|
|
807
|
+
</template>
|
|
808
|
+
|
|
809
|
+
<script setup>
|
|
810
|
+
import { ref } from 'vue'
|
|
811
|
+
import { JnDateQuery } from '@jnrs/vue-core/components'
|
|
812
|
+
|
|
813
|
+
const dateValue = ref<string | [string, string]>('')
|
|
814
|
+
</script>
|
|
815
|
+
```
|
|
816
|
+
|
|
817
|
+
---
|
|
818
|
+
|
|
743
819
|
#### GlobalSetting
|
|
744
820
|
|
|
745
821
|
全局设置组件（用于系统设置面板）
|
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,27 @@
|
|
|
1
1
|
# 发版日志
|
|
2
2
|
|
|
3
|
-
## [1.2.
|
|
3
|
+
## [1.2.29] - 2026-07-27 【latest】
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- 新增 `JnDateQuery` 通用时间查询组件：合并固定类型模式（配合快捷按钮）和可切换类型模式（内置类型切换器），通过 `type` 配置绑定值为单个时间或时间范围，支持 `arrows`/`group` 两种快捷按钮风格和 `select`/`button-group` 两种切换器风格
|
|
8
|
+
|
|
9
|
+
### Documentation
|
|
10
|
+
|
|
11
|
+
- `AGENTS.md` 新增 `JnDateQuery` 组件文档（Props 表格、Events、两个使用示例）
|
|
12
|
+
- `README.md` 组件清单新增 `JnDateQuery`（时间查询）
|
|
13
|
+
|
|
14
|
+
## [1.2.28] - 2026-07-24
|
|
15
|
+
|
|
16
|
+
### Features
|
|
17
|
+
|
|
18
|
+
- `JnSelectTemplate` 新增 `collapseTags`（默认 `true`）和 `maxCollapseTags`（默认 `1`）props，将原硬编码的 `collapse-tags` 改为可配置，支持在非 query 表单中通过 `:collapse-tags="false"` 完整展示已选项
|
|
19
|
+
|
|
20
|
+
### Documentation
|
|
21
|
+
|
|
22
|
+
- `AGENTS.md` 的 `JnSelectTemplate` Props 表格新增 `collapseTags` 和 `maxCollapseTags` 说明
|
|
23
|
+
|
|
24
|
+
## [1.2.27] - 2026-07-20
|
|
4
25
|
|
|
5
26
|
### Chore
|
|
6
27
|
|
package/README.md
CHANGED
|
@@ -6,16 +6,16 @@
|
|
|
6
6
|
|
|
7
7
|
### 功能模块
|
|
8
8
|
|
|
9
|
-
| 模块 | 路径 | 说明
|
|
10
|
-
| ----------- | ------------------------------ |
|
|
11
|
-
| 主模块 | `@jnrs/vue-core` | 基础类型定义（`IMenuItem`, `IPagination`, `IPageData`, `IAttachment`, `IDocument` 等）
|
|
12
|
-
| Pinia | `@jnrs/vue-core/pinia` | `useSystemStore`（主题/全屏/菜单折叠）+ `useMenuStore`（动态菜单/路由）
|
|
13
|
-
| Router | `@jnrs/vue-core/router` | `createVueRouter`（创建路由实例）+ `asyncGenerateRoute`（动态路由生成）+ `handleRouter`（跳转）+ `useRouter`/`useRoute`
|
|
14
|
-
| 组件 | `@jnrs/vue-core/components` | `JnTable`（表格）、`JnPagination`（分页）、`JnDialog`（弹窗）、`JnFileUpload`（文件上传）、`JnSelectTemplate`（选择器）、`JnDatetime`（日期格式化）、`JnImportAndExport`（导入导出）等 |
|
|
15
|
-
| Composables | `@jnrs/vue-core/composables` | `useMouseSelection`（鼠标框选）、`useReactivityTableHeight`（表格高度自适应）、`useWebSocket`（WebSocket 连接）
|
|
16
|
-
| 常量 | `@jnrs/vue-core/constants` | 主题选项配置
|
|
17
|
-
| 工具 | `@jnrs/vue-core/utils` / `lib` | 工具函数 / 类型守卫
|
|
18
|
-
| 国际化 | `@jnrs/vue-core/locales` | 组件内置文案的多语言支持
|
|
9
|
+
| 模块 | 路径 | 说明 |
|
|
10
|
+
| ----------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
11
|
+
| 主模块 | `@jnrs/vue-core` | 基础类型定义（`IMenuItem`, `IPagination`, `IPageData`, `IAttachment`, `IDocument` 等） |
|
|
12
|
+
| Pinia | `@jnrs/vue-core/pinia` | `useSystemStore`（主题/全屏/菜单折叠）+ `useMenuStore`（动态菜单/路由） |
|
|
13
|
+
| Router | `@jnrs/vue-core/router` | `createVueRouter`（创建路由实例）+ `asyncGenerateRoute`（动态路由生成）+ `handleRouter`（跳转）+ `useRouter`/`useRoute` |
|
|
14
|
+
| 组件 | `@jnrs/vue-core/components` | `JnTable`（表格）、`JnPagination`（分页）、`JnDialog`（弹窗）、`JnFileUpload`（文件上传）、`JnSelectTemplate`（选择器）、`JnDatetime`（日期格式化）、`JnDateQuery`（时间查询）、`JnImportAndExport`（导入导出）等 |
|
|
15
|
+
| Composables | `@jnrs/vue-core/composables` | `useMouseSelection`（鼠标框选）、`useReactivityTableHeight`（表格高度自适应）、`useWebSocket`（WebSocket 连接） |
|
|
16
|
+
| 常量 | `@jnrs/vue-core/constants` | 主题选项配置 |
|
|
17
|
+
| 工具 | `@jnrs/vue-core/utils` / `lib` | 工具函数 / 类型守卫 |
|
|
18
|
+
| 国际化 | `@jnrs/vue-core/locales` | 组件内置文案的多语言支持 |
|
|
19
19
|
|
|
20
20
|
## 💻 技术栈
|
|
21
21
|
|
|
@@ -40,7 +40,15 @@ import { useSystemStore, useMenuStore } from '@jnrs/vue-core/pinia'
|
|
|
40
40
|
import { useRouter, useRoute, handleRouter, createVueRouter } from '@jnrs/vue-core/router'
|
|
41
41
|
|
|
42
42
|
// 组件
|
|
43
|
-
import {
|
|
43
|
+
import {
|
|
44
|
+
JnTable,
|
|
45
|
+
JnPagination,
|
|
46
|
+
JnDialog,
|
|
47
|
+
JnFileUpload,
|
|
48
|
+
JnDatetime,
|
|
49
|
+
JnDateQuery,
|
|
50
|
+
JnImportAndExport
|
|
51
|
+
} from '@jnrs/vue-core/components'
|
|
44
52
|
|
|
45
53
|
// Composables
|
|
46
54
|
import { useWebSocket, useMouseSelection } from '@jnrs/vue-core/composables'
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
type DateType = 'date' | 'week' | 'month' | 'year' | 'daterange';
|
|
2
|
+
type QuickButtonStyle = 'none' | 'arrows' | 'group';
|
|
3
|
+
type SwitcherStyle = 'select' | 'button-group';
|
|
4
|
+
interface Props {
|
|
5
|
+
/** v-model 绑定值（单值为 string，范围为 [string, string]） */
|
|
6
|
+
modelValue: string | [string, string];
|
|
7
|
+
/** 日期类型（固定模式），showTypeSwitcher=true 时作为初始类型 */
|
|
8
|
+
type?: DateType;
|
|
9
|
+
/** 是否显示类型切换器 */
|
|
10
|
+
showTypeSwitcher?: boolean;
|
|
11
|
+
/** 切换器风格 */
|
|
12
|
+
switcherStyle?: SwitcherStyle;
|
|
13
|
+
/** 可切换的类型选项 */
|
|
14
|
+
typeOptions?: DateType[];
|
|
15
|
+
/** 快捷按钮风格 */
|
|
16
|
+
quickButtons?: QuickButtonStyle;
|
|
17
|
+
/** 日期格式 */
|
|
18
|
+
valueFormat?: string;
|
|
19
|
+
/** 是否可清除 */
|
|
20
|
+
clearable?: boolean;
|
|
21
|
+
/** 尺寸 */
|
|
22
|
+
size?: '' | 'small' | 'default' | 'large';
|
|
23
|
+
/** 单值 placeholder */
|
|
24
|
+
placeholder?: string;
|
|
25
|
+
/** 范围开始 placeholder */
|
|
26
|
+
startPlaceholder?: string;
|
|
27
|
+
/** 范围结束 placeholder */
|
|
28
|
+
endPlaceholder?: string;
|
|
29
|
+
/** 范围分隔符 */
|
|
30
|
+
rangeSeparator?: string;
|
|
31
|
+
}
|
|
32
|
+
declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
33
|
+
"update:modelValue": (value: string | [string, string]) => any;
|
|
34
|
+
change: (value: string | [string, string], type: DateType) => any;
|
|
35
|
+
"type-change": (type: DateType) => any;
|
|
36
|
+
}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
|
|
37
|
+
"onUpdate:modelValue"?: ((value: string | [string, string]) => any) | undefined;
|
|
38
|
+
onChange?: ((value: string | [string, string], type: DateType) => any) | undefined;
|
|
39
|
+
"onType-change"?: ((type: DateType) => any) | undefined;
|
|
40
|
+
}>, {
|
|
41
|
+
size: "" | "small" | "default" | "large";
|
|
42
|
+
type: DateType;
|
|
43
|
+
placeholder: string;
|
|
44
|
+
clearable: boolean;
|
|
45
|
+
showTypeSwitcher: boolean;
|
|
46
|
+
switcherStyle: SwitcherStyle;
|
|
47
|
+
typeOptions: DateType[];
|
|
48
|
+
quickButtons: QuickButtonStyle;
|
|
49
|
+
valueFormat: string;
|
|
50
|
+
startPlaceholder: string;
|
|
51
|
+
endPlaceholder: string;
|
|
52
|
+
rangeSeparator: string;
|
|
53
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
54
|
+
export default _default;
|
|
@@ -130,6 +130,16 @@ export interface Props {
|
|
|
130
130
|
* @default 'name'
|
|
131
131
|
*/
|
|
132
132
|
remoteFilterKey?: string;
|
|
133
|
+
/**
|
|
134
|
+
* 是否折叠标签
|
|
135
|
+
* @default true
|
|
136
|
+
*/
|
|
137
|
+
collapseTags?: boolean;
|
|
138
|
+
/**
|
|
139
|
+
* 折叠时显示的最大标签数
|
|
140
|
+
* @default 1
|
|
141
|
+
*/
|
|
142
|
+
maxCollapseTags?: number;
|
|
133
143
|
}
|
|
134
144
|
declare function __VLS_template(): {
|
|
135
145
|
attrs: Partial<{}>;
|
|
@@ -8,4 +8,5 @@ import { default as JnPagination } from './JnPagination.vue';
|
|
|
8
8
|
import { default as JnDialog } from './JnDialog.vue';
|
|
9
9
|
import { default as JnTable } from './JnTable.vue';
|
|
10
10
|
import { default as JnSelectTemplate } from './JnSelectTemplate.vue';
|
|
11
|
-
|
|
11
|
+
import { default as JnDateQuery } from './JnDateQuery.vue';
|
|
12
|
+
export { GlobalSetting, JnImageView, JnPdfView, JnImportAndExport, JnFileUpload, JnDatetime, JnPagination, JnDialog, JnTable, JnSelectTemplate, JnDateQuery };
|