jky-component-lib 0.0.19 → 0.0.21

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.
Files changed (8) hide show
  1. package/dist/es/button-nav/ButtonNav.vue.d.ts +6 -0
  2. package/dist/es/button-nav/ButtonNav.vue.js +33 -14
  3. package/dist/es/package.json.js +1 -1
  4. package/dist/lib/button-nav/ButtonNav.vue.d.ts +6 -0
  5. package/dist/lib/button-nav/ButtonNav.vue.js +32 -13
  6. package/dist/lib/package.json.js +1 -1
  7. package/dist/umd/index.js +33 -14
  8. package/package.json +6 -2
package/dist/es/button-nav/ButtonNav.vue.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { ButtonProps } from 'element-plus/es/components/button';
2
+ import { RouteLocationRaw } from 'vue-router';
2
3
  type __VLS_Props = {
3
4
  modelValue?: string | number;
4
5
  items?: NavItem[];
@@ -7,24 +8,29 @@ type __VLS_Props = {
7
8
  type?: ButtonProps['type'];
8
9
  plain?: boolean;
9
10
  buttonWidth?: string;
11
+ route?: boolean;
10
12
  };
11
13
  interface NavItem {
12
14
  label: string;
13
15
  value: string | number;
14
16
  disabled?: boolean;
15
17
  icon?: string;
18
+ to?: RouteLocationRaw;
16
19
  }
17
20
  declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
18
21
  change: (value: string | number) => any;
19
22
  "update:modelValue": (value: string | number) => any;
23
+ navClick: (item: NavItem) => any;
20
24
  }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
21
25
  onChange?: ((value: string | number) => any) | undefined;
22
26
  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
27
+ onNavClick?: ((item: NavItem) => any) | undefined;
23
28
  }>, {
24
29
  size: "" | "default" | "large" | "small";
25
30
  type: "" | "default" | "primary" | "success" | "warning" | "danger" | "info" | "text";
26
31
  items: NavItem[];
27
32
  limit: number;
28
33
  plain: boolean;
34
+ route: boolean;
29
35
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
30
36
  export default _default;
package/dist/es/button-nav/ButtonNav.vue.js CHANGED
@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
17
17
  return a;
18
18
  };
19
19
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderList, createBlock, unref, normalizeClass, normalizeStyle, createSlots, withCtx, createTextVNode, toDisplayString, createElementVNode, createVNode, createCommentVNode } from "vue";
20
+ import { defineComponent, inject, computed, openBlock, createElementBlock, Fragment, renderList, createBlock, unref, normalizeClass, normalizeStyle, createSlots, withCtx, createTextVNode, toDisplayString, createElementVNode, createVNode, createCommentVNode } from "vue";
21
21
  import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem } from "element-plus";
22
22
  const _hoisted_1 = { class: "jky-button-nav flex flex-wrap items-center gap-2" };
23
23
  const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
@@ -31,33 +31,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
31
31
  size: { default: "default" },
32
32
  type: { default: "primary" },
33
33
  plain: { type: Boolean, default: false },
34
- buttonWidth: {}
34
+ buttonWidth: {},
35
+ route: { type: Boolean, default: false }
35
36
  },
36
- emits: ["update:modelValue", "change"],
37
+ emits: ["update:modelValue", "change", "navClick"],
37
38
  setup(__props, { emit: __emit }) {
38
39
  const props = __props;
39
40
  const emit = __emit;
41
+ const router = inject("router", null);
42
+ const route = inject("route", null);
40
43
  const visibleItems = computed(() => props.items.slice(0, props.limit));
41
44
  const hiddenItems = computed(() => props.items.slice(props.limit));
42
45
  const hasMore = computed(() => props.items.length > props.limit);
43
- function handleClick(value) {
44
- emit("update:modelValue", value);
45
- emit("change", value);
46
+ function isActiveItem(item) {
47
+ if (props.route && item.to && route) {
48
+ const targetPath = typeof item.to === "string" ? item.to : item.to.path;
49
+ return route.path === targetPath;
50
+ }
51
+ return props.modelValue === item.value;
52
+ }
53
+ function handleClick(item) {
54
+ if (props.route && item.to) {
55
+ if (router) {
56
+ router.push(item.to);
57
+ } else {
58
+ emit("navClick", item);
59
+ }
60
+ } else {
61
+ emit("update:modelValue", item.value);
62
+ emit("change", item.value);
63
+ emit("navClick", item);
64
+ }
46
65
  }
47
66
  return (_ctx, _cache) => {
48
67
  return openBlock(), createElementBlock("div", _hoisted_1, [
49
68
  (openBlock(true), createElementBlock(Fragment, null, renderList(visibleItems.value, (item) => {
50
69
  return openBlock(), createBlock(unref(ElButton), {
51
70
  key: item.value,
52
- type: props.modelValue === item.value ? props.type : "default",
71
+ type: isActiveItem(item) ? props.type : "default",
53
72
  size: props.size,
54
73
  disabled: item.disabled,
55
- link: props.plain && props.modelValue !== item.value,
74
+ link: props.plain && !isActiveItem(item),
56
75
  style: normalizeStyle({ width: props.buttonWidth }),
57
76
  class: normalizeClass({
58
- "is-active": props.modelValue === item.value
77
+ "is-active": isActiveItem(item)
59
78
  }),
60
- onClick: ($event) => handleClick(item.value)
79
+ onClick: ($event) => handleClick(item)
61
80
  }, createSlots({
62
81
  default: withCtx(() => [
63
82
  createTextVNode(" " + toDisplayString(item.label), 1)
@@ -86,7 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
86
105
  return openBlock(), createBlock(unref(ElDropdownItem), {
87
106
  key: item.value,
88
107
  disabled: item.disabled,
89
- onClick: ($event) => handleClick(item.value)
108
+ onClick: ($event) => handleClick(item)
90
109
  }, {
91
110
  default: withCtx(() => [
92
111
  item.icon ? (openBlock(), createElementBlock("span", {
@@ -104,12 +123,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
104
123
  ]),
105
124
  default: withCtx(() => [
106
125
  createVNode(unref(ElButton), {
107
- type: hiddenItems.value.some((item) => item.value === props.modelValue) ? props.type : "default",
126
+ type: hiddenItems.value.some((item) => isActiveItem(item)) ? props.type : "default",
108
127
  size: props.size,
109
- link: props.plain && !hiddenItems.value.some((item) => item.value === props.modelValue),
128
+ link: props.plain && !hiddenItems.value.some((item) => isActiveItem(item)),
110
129
  style: normalizeStyle({ width: props.buttonWidth }),
111
130
  class: normalizeClass({
112
- "is-active": hiddenItems.value.some((item) => item.value === props.modelValue)
131
+ "is-active": hiddenItems.value.some((item) => isActiveItem(item))
113
132
  })
114
133
  }, {
115
134
  default: withCtx(() => [..._cache[0] || (_cache[0] = [
package/dist/es/package.json.js CHANGED
@@ -1,4 +1,4 @@
1
- const version = "0.0.19";
1
+ const version = "0.0.21";
2
2
  export {
3
3
  version
4
4
  };
package/dist/lib/button-nav/ButtonNav.vue.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { ButtonProps } from 'element-plus/es/components/button';
2
+ import { RouteLocationRaw } from 'vue-router';
2
3
  type __VLS_Props = {
3
4
  modelValue?: string | number;
4
5
  items?: NavItem[];
@@ -7,24 +8,29 @@ type __VLS_Props = {
7
8
  type?: ButtonProps['type'];
8
9
  plain?: boolean;
9
10
  buttonWidth?: string;
11
+ route?: boolean;
10
12
  };
11
13
  interface NavItem {
12
14
  label: string;
13
15
  value: string | number;
14
16
  disabled?: boolean;
15
17
  icon?: string;
18
+ to?: RouteLocationRaw;
16
19
  }
17
20
  declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
18
21
  change: (value: string | number) => any;
19
22
  "update:modelValue": (value: string | number) => any;
23
+ navClick: (item: NavItem) => any;
20
24
  }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
21
25
  onChange?: ((value: string | number) => any) | undefined;
22
26
  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
27
+ onNavClick?: ((item: NavItem) => any) | undefined;
23
28
  }>, {
24
29
  size: "" | "default" | "large" | "small";
25
30
  type: "" | "default" | "primary" | "success" | "warning" | "danger" | "info" | "text";
26
31
  items: NavItem[];
27
32
  limit: number;
28
33
  plain: boolean;
34
+ route: boolean;
29
35
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
30
36
  export default _default;
package/dist/lib/button-nav/ButtonNav.vue.js CHANGED
@@ -33,33 +33,52 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
33
33
  size: { default: "default" },
34
34
  type: { default: "primary" },
35
35
  plain: { type: Boolean, default: false },
36
- buttonWidth: {}
36
+ buttonWidth: {},
37
+ route: { type: Boolean, default: false }
37
38
  },
38
- emits: ["update:modelValue", "change"],
39
+ emits: ["update:modelValue", "change", "navClick"],
39
40
  setup(__props, { emit: __emit }) {
40
41
  const props = __props;
41
42
  const emit = __emit;
43
+ const router = vue.inject("router", null);
44
+ const route = vue.inject("route", null);
42
45
  const visibleItems = vue.computed(() => props.items.slice(0, props.limit));
43
46
  const hiddenItems = vue.computed(() => props.items.slice(props.limit));
44
47
  const hasMore = vue.computed(() => props.items.length > props.limit);
45
- function handleClick(value) {
46
- emit("update:modelValue", value);
47
- emit("change", value);
48
+ function isActiveItem(item) {
49
+ if (props.route && item.to && route) {
50
+ const targetPath = typeof item.to === "string" ? item.to : item.to.path;
51
+ return route.path === targetPath;
52
+ }
53
+ return props.modelValue === item.value;
54
+ }
55
+ function handleClick(item) {
56
+ if (props.route && item.to) {
57
+ if (router) {
58
+ router.push(item.to);
59
+ } else {
60
+ emit("navClick", item);
61
+ }
62
+ } else {
63
+ emit("update:modelValue", item.value);
64
+ emit("change", item.value);
65
+ emit("navClick", item);
66
+ }
48
67
  }
49
68
  return (_ctx, _cache) => {
50
69
  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
51
70
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleItems.value, (item) => {
52
71
  return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElButton), {
53
72
  key: item.value,
54
- type: props.modelValue === item.value ? props.type : "default",
73
+ type: isActiveItem(item) ? props.type : "default",
55
74
  size: props.size,
56
75
  disabled: item.disabled,
57
- link: props.plain && props.modelValue !== item.value,
76
+ link: props.plain && !isActiveItem(item),
58
77
  style: vue.normalizeStyle({ width: props.buttonWidth }),
59
78
  class: vue.normalizeClass({
60
- "is-active": props.modelValue === item.value
79
+ "is-active": isActiveItem(item)
61
80
  }),
62
- onClick: ($event) => handleClick(item.value)
81
+ onClick: ($event) => handleClick(item)
63
82
  }, vue.createSlots({
64
83
  default: vue.withCtx(() => [
65
84
  vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)
@@ -88,7 +107,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
88
107
  return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElDropdownItem), {
89
108
  key: item.value,
90
109
  disabled: item.disabled,
91
- onClick: ($event) => handleClick(item.value)
110
+ onClick: ($event) => handleClick(item)
92
111
  }, {
93
112
  default: vue.withCtx(() => [
94
113
  item.icon ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -106,12 +125,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
106
125
  ]),
107
126
  default: vue.withCtx(() => [
108
127
  vue.createVNode(vue.unref(ElementPlus.ElButton), {
109
- type: hiddenItems.value.some((item) => item.value === props.modelValue) ? props.type : "default",
128
+ type: hiddenItems.value.some((item) => isActiveItem(item)) ? props.type : "default",
110
129
  size: props.size,
111
- link: props.plain && !hiddenItems.value.some((item) => item.value === props.modelValue),
130
+ link: props.plain && !hiddenItems.value.some((item) => isActiveItem(item)),
112
131
  style: vue.normalizeStyle({ width: props.buttonWidth }),
113
132
  class: vue.normalizeClass({
114
- "is-active": hiddenItems.value.some((item) => item.value === props.modelValue)
133
+ "is-active": hiddenItems.value.some((item) => isActiveItem(item))
115
134
  })
116
135
  }, {
117
136
  default: vue.withCtx(() => [..._cache[0] || (_cache[0] = [
package/dist/lib/package.json.js CHANGED
@@ -1,4 +1,4 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const version = "0.0.19";
3
+ const version = "0.0.21";
4
4
  exports.version = version;
package/dist/umd/index.js CHANGED
@@ -1398,7 +1398,7 @@ img {
1398
1398
  }
1399
1399
  /*$vite$:1*/`;
1400
1400
  document.head.appendChild(__vite_style__);
1401
- const version$1 = "0.0.19";
1401
+ const version$1 = "0.0.21";
1402
1402
  const INSTALLED_KEY = Symbol("INSTALLED_KEY");
1403
1403
  function createInstaller(components2 = []) {
1404
1404
  const install2 = (app, options) => {
@@ -1532,33 +1532,52 @@ img {
1532
1532
  size: { default: "default" },
1533
1533
  type: { default: "primary" },
1534
1534
  plain: { type: Boolean, default: false },
1535
- buttonWidth: {}
1535
+ buttonWidth: {},
1536
+ route: { type: Boolean, default: false }
1536
1537
  },
1537
- emits: ["update:modelValue", "change"],
1538
+ emits: ["update:modelValue", "change", "navClick"],
1538
1539
  setup(__props, { emit: __emit }) {
1539
1540
  const props = __props;
1540
1541
  const emit = __emit;
1542
+ const router = vue.inject("router", null);
1543
+ const route = vue.inject("route", null);
1541
1544
  const visibleItems = vue.computed(() => props.items.slice(0, props.limit));
1542
1545
  const hiddenItems = vue.computed(() => props.items.slice(props.limit));
1543
1546
  const hasMore = vue.computed(() => props.items.length > props.limit);
1544
- function handleClick(value) {
1545
- emit("update:modelValue", value);
1546
- emit("change", value);
1547
+ function isActiveItem(item) {
1548
+ if (props.route && item.to && route) {
1549
+ const targetPath = typeof item.to === "string" ? item.to : item.to.path;
1550
+ return route.path === targetPath;
1551
+ }
1552
+ return props.modelValue === item.value;
1553
+ }
1554
+ function handleClick(item) {
1555
+ if (props.route && item.to) {
1556
+ if (router) {
1557
+ router.push(item.to);
1558
+ } else {
1559
+ emit("navClick", item);
1560
+ }
1561
+ } else {
1562
+ emit("update:modelValue", item.value);
1563
+ emit("change", item.value);
1564
+ emit("navClick", item);
1565
+ }
1547
1566
  }
1548
1567
  return (_ctx, _cache) => {
1549
1568
  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
1550
1569
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleItems.value, (item) => {
1551
1570
  return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElButton), {
1552
1571
  key: item.value,
1553
- type: props.modelValue === item.value ? props.type : "default",
1572
+ type: isActiveItem(item) ? props.type : "default",
1554
1573
  size: props.size,
1555
1574
  disabled: item.disabled,
1556
- link: props.plain && props.modelValue !== item.value,
1575
+ link: props.plain && !isActiveItem(item),
1557
1576
  style: vue.normalizeStyle({ width: props.buttonWidth }),
1558
1577
  class: vue.normalizeClass({
1559
- "is-active": props.modelValue === item.value
1578
+ "is-active": isActiveItem(item)
1560
1579
  }),
1561
- onClick: ($event) => handleClick(item.value)
1580
+ onClick: ($event) => handleClick(item)
1562
1581
  }, vue.createSlots({
1563
1582
  default: vue.withCtx(() => [
1564
1583
  vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)
@@ -1587,7 +1606,7 @@ img {
1587
1606
  return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElDropdownItem), {
1588
1607
  key: item.value,
1589
1608
  disabled: item.disabled,
1590
- onClick: ($event) => handleClick(item.value)
1609
+ onClick: ($event) => handleClick(item)
1591
1610
  }, {
1592
1611
  default: vue.withCtx(() => [
1593
1612
  item.icon ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -1605,12 +1624,12 @@ img {
1605
1624
  ]),
1606
1625
  default: vue.withCtx(() => [
1607
1626
  vue.createVNode(vue.unref(ElementPlus.ElButton), {
1608
- type: hiddenItems.value.some((item) => item.value === props.modelValue) ? props.type : "default",
1627
+ type: hiddenItems.value.some((item) => isActiveItem(item)) ? props.type : "default",
1609
1628
  size: props.size,
1610
- link: props.plain && !hiddenItems.value.some((item) => item.value === props.modelValue),
1629
+ link: props.plain && !hiddenItems.value.some((item) => isActiveItem(item)),
1611
1630
  style: vue.normalizeStyle({ width: props.buttonWidth }),
1612
1631
  class: vue.normalizeClass({
1613
- "is-active": hiddenItems.value.some((item) => item.value === props.modelValue)
1632
+ "is-active": hiddenItems.value.some((item) => isActiveItem(item))
1614
1633
  })
1615
1634
  }, {
1616
1635
  default: vue.withCtx(() => [..._cache[0] || (_cache[0] = [
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "jky-component-lib",
3
3
  "type": "module",
4
- "version": "0.0.19",
4
+ "version": "0.0.21",
5
5
  "publishConfig": {
6
6
  "access": "public"
7
7
  },
@@ -42,7 +42,10 @@
42
42
  "jsdelivr": "dist/umd/index.js",
43
43
  "types": "dist/es/index.d.ts",
44
44
  "files": [
45
- "dist"
45
+ "LICENSE",
46
+ "README.md",
47
+ "dist",
48
+ "package.json"
46
49
  ],
47
50
  "engines": {
48
51
  "node": ">=18 || >=20 || >=22",
@@ -101,6 +104,7 @@
101
104
  "vitepress": "^1.6.3",
102
105
  "vitest": "^3.1.3",
103
106
  "vue": "^3.5.13",
107
+ "vue-router": "^5.0.4",
104
108
  "vue-tsc": "^2.2.10"
105
109
  },
106
110
  "simple-git-hooks": {