@opendesign-plus-test/components 0.0.1-rc.100 → 0.0.1-rc.101

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 (27) hide show
  1. package/dist/components/header/OHeader.vue.d.ts +3 -0
  2. package/dist/components/header/components/HeaderNav.vue.d.ts +3 -0
  3. package/dist/components/header/index.d.ts +5 -0
  4. package/dist/components/header-user/OHeaderUser.vue.d.ts +2 -6
  5. package/dist/components/header-user/index.d.ts +3 -18
  6. package/dist/components.cjs.js +32 -32
  7. package/dist/components.css +1 -1
  8. package/dist/components.es.js +2435 -2431
  9. package/dist/treeshaking/_virtual/icon-locale.mjs +0 -1
  10. package/dist/treeshaking/components/header/OHeader.css +15 -15
  11. package/dist/treeshaking/components/header/OHeader.vue.d.ts +3 -0
  12. package/dist/treeshaking/components/header/OHeader.vue.mjs +1 -1
  13. package/dist/treeshaking/components/header/OHeader.vue2.mjs +8 -3
  14. package/dist/treeshaking/components/header/components/HeaderNav.css +53 -39
  15. package/dist/treeshaking/components/header/components/HeaderNav.vue.d.ts +3 -0
  16. package/dist/treeshaking/components/header/components/HeaderNav.vue.mjs +1 -1
  17. package/dist/treeshaking/components/header/components/HeaderNav.vue2.mjs +8 -2
  18. package/dist/treeshaking/components/header/index.d.ts +5 -0
  19. package/dist/treeshaking/components/header-user/OHeaderUser.css +43 -34
  20. package/dist/treeshaking/components/header-user/OHeaderUser.vue.d.ts +2 -6
  21. package/dist/treeshaking/components/header-user/OHeaderUser.vue.mjs +1 -1
  22. package/dist/treeshaking/components/header-user/OHeaderUser.vue2.mjs +20 -13
  23. package/dist/treeshaking/components/header-user/index.d.ts +3 -18
  24. package/dist/treeshaking/components/search/internal/SearchPanel.css +222 -104
  25. package/dist/treeshaking/components/search/internal/SearchPanel.vue.mjs +1 -1
  26. package/dist/treeshaking/components/search/internal/SearchPanel.vue2.mjs +3 -9
  27. package/package.json +3 -3
@@ -9,7 +9,6 @@ const _hoisted_1 = {
9
9
  function render(_ctx, _cache) {
10
10
  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
11
11
  createElementVNode("path", {
12
- opacity: "0.8",
13
12
  fill: "currentColor",
14
13
  d: "M12.066 3.3c4.775 0.035 8.634 3.917 8.634 8.7s-3.859 8.664-8.633 8.699c-0.024 0.003-0.049 0.004-0.073 0.004-0.019 0-0.038-0.001-0.057-0.003l-0.005-0c-4.774-0.036-8.633-3.918-8.633-8.7s3.859-8.664 8.634-8.7h0.005c0.022-0.002 0.045-0.003 0.067-0.003 0.020 0 0.040 0.001 0.060 0.003zM4.733 11.3h2.589c0.021-0.33 0.058-0.658 0.109-0.984 0.045-0.288 0.103-0.573 0.172-0.857 0.096-0.393 0.213-0.778 0.352-1.155 0.146-0.398 0.317-0.787 0.511-1.168 0.171-0.336 0.36-0.661 0.564-0.975 0.239-0.366 0.501-0.718 0.785-1.055 0.028-0.033 0.056-0.066 0.084-0.099-2.793 0.837-4.882 3.302-5.167 6.293zM4.733 12.7c0.284 2.991 2.374 5.456 5.167 6.293l-0.084-0.099c-0.284-0.337-0.546-0.689-0.785-1.055-0.205-0.314-0.393-0.639-0.564-0.975-0.195-0.38-0.365-0.77-0.511-1.168-0.139-0.377-0.256-0.762-0.352-1.155-0.069-0.284-0.126-0.57-0.172-0.857-0.052-0.326-0.088-0.654-0.109-0.984h-2.589zM8.726 12.7c0.020 0.274 0.053 0.547 0.097 0.817 0.038 0.232 0.085 0.464 0.141 0.693 0.171 0.702 0.42 1.374 0.749 2.017 0.147 0.288 0.309 0.567 0.484 0.837 0.21 0.322 0.439 0.631 0.689 0.927 0.242 0.287 0.5 0.558 0.774 0.812l0.071 0.065q0.132 0.121 0.27 0.237 0.137-0.116 0.27-0.237l0.071-0.065c0.273-0.254 0.531-0.525 0.774-0.812 0.25-0.296 0.479-0.605 0.689-0.927 0.175-0.27 0.337-0.549 0.484-0.837 0.329-0.643 0.578-1.316 0.749-2.017 0.056-0.23 0.103-0.461 0.141-0.693 0.044-0.27 0.077-0.543 0.097-0.817h-6.548zM15.274 11.3c-0.020-0.274-0.053-0.547-0.097-0.817-0.038-0.233-0.085-0.464-0.141-0.694-0.082-0.34-0.184-0.673-0.304-0.999-0.128-0.347-0.276-0.687-0.445-1.018-0.147-0.288-0.309-0.567-0.484-0.837-0.209-0.322-0.439-0.631-0.689-0.927-0.242-0.287-0.501-0.558-0.774-0.813l-0.071-0.065q-0.132-0.121-0.27-0.237-0.137 0.116-0.27 0.237l-0.071 0.065c-0.273 0.254-0.531 0.525-0.774 0.813-0.25 0.296-0.479 0.605-0.689 0.927-0.176 0.27-0.337 0.549-0.484 0.837-0.169 0.332-0.318 0.671-0.445 1.018-0.12 0.326-0.221 0.659-0.304 0.999-0.056 0.23-0.103 0.461-0.141 0.694-0.044 0.27-0.077 0.543-0.097 0.817h6.548zM16.677 11.3h2.589c-0.284-2.991-2.374-5.456-5.167-6.293l0.084 0.099c0.284 0.337 0.546 0.689 0.785 1.055 0.205 0.314 0.393 0.639 0.564 0.975 0.195 0.381 0.365 0.77 0.511 1.168 0.139 0.377 0.256 0.762 0.351 1.155 0.069 0.284 0.126 0.57 0.172 0.857 0.051 0.326 0.088 0.654 0.109 0.984zM16.677 12.7c-0.021 0.33-0.058 0.658-0.109 0.984-0.045 0.288-0.103 0.573-0.172 0.857-0.096 0.393-0.213 0.778-0.351 1.155-0.147 0.398-0.317 0.788-0.511 1.168-0.171 0.336-0.36 0.661-0.564 0.975-0.239 0.366-0.501 0.718-0.785 1.055l-0.084 0.099c2.793-0.838 4.882-3.302 5.167-6.293h-2.589z"
15
14
  }, null, -1)
@@ -1,35 +1,35 @@
1
- .hover-icon-rotate .o-icon[data-v-ef497319] {
1
+ .hover-icon-rotate .o-icon[data-v-3512434a] {
2
2
  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
3
3
  }
4
4
  @media (hover: hover) {
5
- .hover-icon-rotate:hover .o-icon[data-v-ef497319] {
5
+ .hover-icon-rotate:hover .o-icon[data-v-3512434a] {
6
6
  transform: rotate(-180deg);
7
7
  }
8
8
  }
9
- .header[data-v-ef497319] {
9
+ .header[data-v-3512434a] {
10
10
  --o-header-height: 72px;
11
11
  --o-header-content-max-width: 1488px;
12
12
  --o-header-content-padding: 0;
13
13
  }
14
14
  @media (max-width: 1680px) {
15
- .header[data-v-ef497319] {
15
+ .header[data-v-3512434a] {
16
16
  --o-header-content-max-width: 100%;
17
17
  --o-header-content-padding: 64px;
18
18
  }
19
19
  }
20
20
  @media (max-width: 1440px) {
21
- .header[data-v-ef497319] {
21
+ .header[data-v-3512434a] {
22
22
  --o-header-height: 64px;
23
23
  --o-header-content-padding: 40px;
24
24
  }
25
25
  }
26
26
  @media (max-width: 1200px) {
27
- .header[data-v-ef497319] {
27
+ .header[data-v-3512434a] {
28
28
  --o-header-height: 56px;
29
29
  --o-header-content-padding: 32px;
30
30
  }
31
31
  }
32
- .header-wrap[data-v-ef497319] {
32
+ .header-wrap[data-v-3512434a] {
33
33
  background-color: var(--o-color-fill2);
34
34
  position: fixed;
35
35
  left: 0;
@@ -40,7 +40,7 @@
40
40
  backdrop-filter: blur(5px);
41
41
  height: var(--o-header-height);
42
42
  }
43
- .header-content[data-v-ef497319] {
43
+ .header-content[data-v-3512434a] {
44
44
  display: flex;
45
45
  align-items: center;
46
46
  height: 100%;
@@ -48,7 +48,7 @@
48
48
  margin: 0 auto;
49
49
  padding: 0 var(--o-header-content-padding);
50
50
  }
51
- .header-logo[data-v-ef497319] {
51
+ .header-logo[data-v-3512434a] {
52
52
  height: 100%;
53
53
  display: flex;
54
54
  align-items: center;
@@ -56,27 +56,27 @@
56
56
  margin-right: 24px;
57
57
  flex-shrink: 0;
58
58
  }
59
- .logo[data-v-ef497319] {
59
+ .logo[data-v-3512434a] {
60
60
  height: 32px;
61
61
  }
62
- .header-nav-top[data-v-ef497319] {
62
+ .header-nav-top[data-v-3512434a] {
63
63
  flex: 1;
64
64
  height: 100%;
65
65
  min-width: 0;
66
66
  overflow: hidden;
67
67
  position: relative;
68
68
  }
69
- .header-nav-flatten[data-v-ef497319] {
69
+ .header-nav-flatten[data-v-3512434a] {
70
70
  flex: 1;
71
71
  height: 100%;
72
72
  min-width: 0;
73
73
  position: relative;
74
74
  }
75
- .header-toolbar[data-v-ef497319] {
75
+ .header-toolbar[data-v-3512434a] {
76
76
  height: 100%;
77
77
  position: relative;
78
78
  }
79
- .header-nav-content[data-v-ef497319] {
79
+ .header-nav-content[data-v-3512434a] {
80
80
  position: fixed;
81
81
  top: var(--o-header-height);
82
82
  left: 0;
@@ -86,6 +86,6 @@
86
86
  box-shadow: var(--o-shadow-1);
87
87
  overflow: hidden;
88
88
  }
89
- [data-o-theme*=dark] .header-wrap[data-v-ef497319] {
89
+ [data-o-theme*=dark] .header-wrap[data-v-3512434a] {
90
90
  border-bottom: 1px solid var(--o-color-control4);
91
91
  }
@@ -2,6 +2,7 @@ import { NavT } from './types.ts';
2
2
  export interface OHeaderT {
3
3
  (e: 'go-home'): void;
4
4
  (e: 'handle-click', val: any): void;
5
+ (e: 'nav-layout', val: any): void;
5
6
  }
6
7
  declare function __VLS_template(): {
7
8
  attrs: Partial<{}>;
@@ -19,9 +20,11 @@ declare function __VLS_template(): {
19
20
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
20
21
  declare const __VLS_component: import('vue').DefineComponent<NavT, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
21
22
  "handle-click": (val: any) => any;
23
+ "nav-layout": (val: any) => any;
22
24
  "go-home": () => any;
23
25
  }, string, import('vue').PublicProps, Readonly<NavT> & Readonly<{
24
26
  "onHandle-click"?: ((val: any) => any) | undefined;
27
+ "onNav-layout"?: ((val: any) => any) | undefined;
25
28
  "onGo-home"?: (() => any) | undefined;
26
29
  }>, {
27
30
  isFlatten: boolean;
@@ -1,7 +1,7 @@
1
1
  import _sfc_main from "./OHeader.vue2.mjs";
2
2
  import './OHeader.css';
3
3
  import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
4
- const _OHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ef497319"]]);
4
+ const _OHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3512434a"]]);
5
5
  export {
6
6
  _OHeader as default
7
7
  };
@@ -32,7 +32,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
32
32
  headerTitle: {},
33
33
  isFlatten: { type: Boolean, default: false }
34
34
  },
35
- emits: ["go-home", "handle-click"],
35
+ emits: ["go-home", "handle-click", "nav-layout"],
36
36
  setup(__props, { emit: __emit }) {
37
37
  const emit = __emit;
38
38
  const props = __props;
@@ -102,6 +102,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
102
102
  const onMousemoveHeader = (e) => {
103
103
  lastMousePos.value = { x: e.clientX, y: e.clientY };
104
104
  };
105
+ const navLayout = (val) => {
106
+ emit("nav-layout", val);
107
+ };
105
108
  const goHome = () => {
106
109
  emit("go-home");
107
110
  };
@@ -160,7 +163,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
160
163
  "active-index": props.activeIndex,
161
164
  onHandleMouseenter: handleMouseenter,
162
165
  onHandleMouseleave: handleMouseleave,
163
- onHandleClick: handleClick
166
+ onHandleClick: handleClick,
167
+ onNavLayout: navLayout
164
168
  }, null, 8, ["nav-data", "hoverId", "active-index"])) : createCommentVNode("", true)
165
169
  ], true)
166
170
  ])) : createCommentVNode("", true),
@@ -173,7 +177,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
173
177
  "active-index": props.activeIndex,
174
178
  onHandleMouseenter: handleMouseenter,
175
179
  onHandleMouseleave: handleMouseleave,
176
- onHandleClick: handleClick
180
+ onHandleClick: handleClick,
181
+ onNavLayout: navLayout
177
182
  }, null, 8, ["nav-data", "hoverId", "active-index"])) : createCommentVNode("", true)
178
183
  ], true)
179
184
  ])) : createCommentVNode("", true),
@@ -1,32 +1,43 @@
1
- .hover-icon-rotate .o-icon[data-v-2e8364bf] {
1
+ .hover-icon-rotate .o-icon[data-v-e2459cc3] {
2
2
  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
3
3
  }
4
4
  @media (hover: hover) {
5
- .hover-icon-rotate:hover .o-icon[data-v-2e8364bf] {
5
+ .hover-icon-rotate:hover .o-icon[data-v-e2459cc3] {
6
6
  transform: rotate(-180deg);
7
7
  }
8
8
  }
9
- .header-nav-wrap[data-v-2e8364bf] {
9
+ .header-nav-wrap[data-v-e2459cc3] {
10
10
  height: 100%;
11
+ --nav-right: 64px;
11
12
  }
12
- .header-nav-wrap .header-nav[data-v-2e8364bf] {
13
+ @media (min-width: 1201px) and (max-width: 1680px) {
14
+ .header-nav-wrap[data-v-e2459cc3] {
15
+ --nav-right: 48px;
16
+ }
17
+ }
18
+ @media (max-width: 1200px) {
19
+ .header-nav-wrap[data-v-e2459cc3] {
20
+ --nav-right: 32px;
21
+ }
22
+ }
23
+ .header-nav-wrap .header-nav[data-v-e2459cc3] {
13
24
  height: 100%;
14
25
  display: flex;
15
26
  justify-content: space-between;
16
- width: calc(100% - 64px);
27
+ width: calc(100% - var(--nav-right));
17
28
  align-items: center;
18
29
  }
19
- .header-nav-wrap .header-nav-scroll[data-v-2e8364bf] {
20
- width: calc(100% - 64px - 24px);
30
+ .header-nav-wrap .header-nav-scroll[data-v-e2459cc3] {
31
+ width: calc(100% - var(--nav-right) - 24px);
21
32
  }
22
- .o-nav[data-v-2e8364bf] {
33
+ .o-nav[data-v-e2459cc3] {
23
34
  --o-before-left: 0;
24
35
  height: 100%;
25
36
  position: relative;
26
37
  overflow-y: hidden;
27
38
  overflow-x: auto;
28
39
  }
29
- .o-nav[data-v-2e8364bf]::after, .o-nav[data-v-2e8364bf]::before {
40
+ .o-nav[data-v-e2459cc3]::after, .o-nav[data-v-e2459cc3]::before {
30
41
  content: "";
31
42
  position: absolute;
32
43
  width: 50px;
@@ -34,18 +45,18 @@
34
45
  top: 0;
35
46
  z-index: 9;
36
47
  }
37
- .o-nav[data-v-2e8364bf]::after {
48
+ .o-nav[data-v-e2459cc3]::after {
38
49
  right: 0;
39
50
  background-image: linear-gradient(90deg, rgba(var(--o-grey-1), 0) 0%, rgba(var(--o-grey-1), 1) 100%);
40
51
  }
41
- .o-nav[data-v-2e8364bf]::before {
42
- background-image: linear-gradient(0, rgba(var(--o-grey-1), 0) 0%, rgba(var(--o-grey-1), 1) 100%);
52
+ .o-nav[data-v-e2459cc3]::before {
53
+ background-image: linear-gradient(90deg, rgba(var(--o-grey-1), 1) 0%, rgba(var(--o-grey-1), 0) 100%);
43
54
  display: none;
44
55
  }
45
- .o-nav[data-v-2e8364bf]::-webkit-scrollbar {
56
+ .o-nav[data-v-e2459cc3]::-webkit-scrollbar {
46
57
  display: none;
47
58
  }
48
- .right-icon[data-v-2e8364bf] {
59
+ .right-icon[data-v-e2459cc3] {
49
60
  display: flex;
50
61
  align-items: center;
51
62
  cursor: pointer;
@@ -53,29 +64,32 @@
53
64
  height: 16px;
54
65
  border-radius: var(--o-radius-xs);
55
66
  }
56
- .right-icon .o-icon[data-v-2e8364bf] {
67
+ .right-icon .o-icon[data-v-e2459cc3] {
57
68
  --icon-size: 16px;
58
69
  }
59
70
  @media (hover: hover) {
60
- .right-icon[data-v-2e8364bf]:hover {
71
+ .right-icon[data-v-e2459cc3]:hover {
61
72
  background-color: var(--o-color-control2-light);
62
73
  color: var(--o-color-link2);
63
74
  }
64
75
  }
65
- .right-icon[data-v-2e8364bf]:active {
76
+ .right-icon[data-v-e2459cc3]:active {
66
77
  color: var(--o-color-link3);
67
78
  }
68
- [data-o-theme*=dark] .o-nav[data-v-2e8364bf]::after, [data-o-theme*=dark] .o-nav[data-v-2e8364bf]::before {
79
+ [data-o-theme*=dark] .o-nav[data-v-e2459cc3]::after {
69
80
  background-image: linear-gradient(90deg, rgba(var(--o-grey-4), 0) 0%, rgba(var(--o-grey-4), 1) 100%);
70
81
  }
71
- .o-nav-scroll[data-v-2e8364bf]::after {
82
+ [data-o-theme*=dark] .o-nav[data-v-e2459cc3]::before {
83
+ background-image: linear-gradient(90deg, rgba(var(--o-grey-4), 1) 0%, rgba(var(--o-grey-4), 0) 100%);
84
+ }
85
+ .o-nav-scroll[data-v-e2459cc3]::after {
72
86
  display: none;
73
87
  }
74
- .o-nav-scroll[data-v-2e8364bf]::before {
88
+ .nav-left-arrow[data-v-e2459cc3]::before {
75
89
  left: var(--o-before-left);
76
90
  display: block;
77
91
  }
78
- .o-nav-list[data-v-2e8364bf] {
92
+ .o-nav-list[data-v-e2459cc3] {
79
93
  display: flex;
80
94
  height: 100%;
81
95
  width: fit-content;
@@ -84,7 +98,7 @@
84
98
  padding: 0;
85
99
  margin: 0;
86
100
  }
87
- .o-nav-list li[data-v-2e8364bf] {
101
+ .o-nav-list li[data-v-e2459cc3] {
88
102
  position: relative;
89
103
  display: flex;
90
104
  align-items: center;
@@ -92,10 +106,10 @@
92
106
  color: var(--o-color-info1);
93
107
  transition: all var(--o-duration-s) var(--o-easing-standard);
94
108
  }
95
- .o-nav-list li .nav-text[data-v-2e8364bf] {
109
+ .o-nav-list li .nav-text[data-v-e2459cc3] {
96
110
  position: relative;
97
111
  }
98
- .o-nav-list li .nav-text[data-v-2e8364bf]::after {
112
+ .o-nav-list li .nav-text[data-v-e2459cc3]::after {
99
113
  content: "";
100
114
  position: absolute;
101
115
  left: 0;
@@ -108,29 +122,29 @@
108
122
  transition: all var(--o-duration-s) var(--o-easing-standard);
109
123
  }
110
124
  @media (max-width: 1440px) {
111
- .o-nav-list li .nav-text[data-v-2e8364bf]::after {
125
+ .o-nav-list li .nav-text[data-v-e2459cc3]::after {
112
126
  bottom: -21px;
113
127
  }
114
128
  }
115
129
  @media (max-width: 1200px) {
116
- .o-nav-list li .nav-text[data-v-2e8364bf]::after {
130
+ .o-nav-list li .nav-text[data-v-e2459cc3]::after {
117
131
  bottom: -17px;
118
132
  }
119
133
  }
120
- .o-nav-list li.is-selected .nav-text[data-v-2e8364bf], .o-nav-list li.is-active .nav-text[data-v-2e8364bf] {
134
+ .o-nav-list li.is-selected .nav-text[data-v-e2459cc3], .o-nav-list li.is-active .nav-text[data-v-e2459cc3] {
121
135
  color: var(--o-color-primary1);
122
136
  z-index: 99;
123
137
  font-weight: 600;
124
138
  }
125
- .o-nav-list li.is-selected .nav-text[data-v-2e8364bf]::after, .o-nav-list li.is-active .nav-text[data-v-2e8364bf]::after {
139
+ .o-nav-list li.is-selected .nav-text[data-v-e2459cc3]::after, .o-nav-list li.is-active .nav-text[data-v-e2459cc3]::after {
126
140
  content: "";
127
141
  opacity: 1;
128
142
  }
129
- .o-nav-list li.is-disabled[data-v-2e8364bf] {
143
+ .o-nav-list li.is-disabled[data-v-e2459cc3] {
130
144
  color: var(--o-color-info4);
131
145
  pointer-events: none;
132
146
  }
133
- .o-nav-list .nav-item[data-v-2e8364bf] {
147
+ .o-nav-list .nav-item[data-v-e2459cc3] {
134
148
  cursor: default;
135
149
  display: flex;
136
150
  align-items: center;
@@ -139,48 +153,48 @@
139
153
  line-height: 24px;
140
154
  }
141
155
  @media (min-width: 1201px) and (max-width: 1680px) {
142
- .o-nav-list .nav-item[data-v-2e8364bf] {
156
+ .o-nav-list .nav-item[data-v-e2459cc3] {
143
157
  font-size: 14px;
144
158
  line-height: 22px;
145
159
  }
146
160
  }
147
161
  @media (min-width: 841px) and (max-width: 1200px) {
148
- .o-nav-list .nav-item[data-v-2e8364bf] {
162
+ .o-nav-list .nav-item[data-v-e2459cc3] {
149
163
  font-size: 14px;
150
164
  line-height: 22px;
151
165
  }
152
166
  }
153
167
  @media (min-width: 601px) and (max-width: 840px) {
154
- .o-nav-list .nav-item[data-v-2e8364bf] {
168
+ .o-nav-list .nav-item[data-v-e2459cc3] {
155
169
  font-size: 14px;
156
170
  line-height: 22px;
157
171
  }
158
172
  }
159
173
  @media (max-width: 600px) {
160
- .o-nav-list .nav-item[data-v-2e8364bf] {
174
+ .o-nav-list .nav-item[data-v-e2459cc3] {
161
175
  font-size: 12px;
162
176
  line-height: 18px;
163
177
  }
164
178
  }
165
179
  @media (max-width: 1440px) {
166
- .o-nav-list .nav-item[data-v-2e8364bf] {
180
+ .o-nav-list .nav-item[data-v-e2459cc3] {
167
181
  padding: 18px 12px;
168
182
  }
169
183
  }
170
184
  @media (min-width: 841px) and (max-width: 1200px) {
171
- .o-nav-list .nav-item[data-v-2e8364bf] {
185
+ .o-nav-list .nav-item[data-v-e2459cc3] {
172
186
  padding: 14px 8px;
173
187
  }
174
188
  }
175
189
  @media (min-width: 841px) and (max-width: 1000px) {
176
- .o-nav-list .nav-item.en[data-v-2e8364bf] {
190
+ .o-nav-list .nav-item.en[data-v-e2459cc3] {
177
191
  padding: var(--o-gap-2);
178
192
  }
179
193
  }
180
- .o-nav-list .item-other[data-v-2e8364bf] {
194
+ .o-nav-list .item-other[data-v-e2459cc3] {
181
195
  cursor: pointer;
182
196
  }
183
- .o-nav-list .item-other .content-tag[data-v-2e8364bf] {
197
+ .o-nav-list .item-other .content-tag[data-v-e2459cc3] {
184
198
  margin-left: var(--o-gap-2);
185
199
  --layout-pkg-radius: var(--o-radius-xs);
186
200
  }
@@ -3,15 +3,18 @@ export interface OHeaderEmitsT {
3
3
  (e: 'handle-mouseenter', val: any): void;
4
4
  (e: 'handle-mouseleave', val: any): void;
5
5
  (e: 'handle-click', val: any): void;
6
+ (e: 'nav-layout', val: any): void;
6
7
  }
7
8
  declare const _default: import('vue').DefineComponent<NavLiT, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
8
9
  "handle-mouseenter": (val: any) => any;
9
10
  "handle-mouseleave": (val: any) => any;
10
11
  "handle-click": (val: any) => any;
12
+ "nav-layout": (val: any) => any;
11
13
  }, string, import('vue').PublicProps, Readonly<NavLiT> & Readonly<{
12
14
  "onHandle-mouseenter"?: ((val: any) => any) | undefined;
13
15
  "onHandle-mouseleave"?: ((val: any) => any) | undefined;
14
16
  "onHandle-click"?: ((val: any) => any) | undefined;
17
+ "onNav-layout"?: ((val: any) => any) | undefined;
15
18
  }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
16
19
  navRef: HTMLDivElement;
17
20
  navListRef: HTMLUListElement;
@@ -1,7 +1,7 @@
1
1
  import _sfc_main from "./HeaderNav.vue2.mjs";
2
2
  import './HeaderNav.css';
3
3
  import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
4
- const HeaderNav = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2e8364bf"]]);
4
+ const HeaderNav = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e2459cc3"]]);
5
5
  export {
6
6
  HeaderNav as default
7
7
  };
@@ -24,7 +24,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
24
24
  activeIndex: {},
25
25
  hoverId: {}
26
26
  },
27
- emits: ["handle-mouseenter", "handle-mouseleave", "handle-click"],
27
+ emits: ["handle-mouseenter", "handle-mouseleave", "handle-click", "nav-layout"],
28
28
  setup(__props, { emit: __emit }) {
29
29
  const emit = __emit;
30
30
  const props = __props;
@@ -67,9 +67,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
67
67
  const calculateLayout = () => {
68
68
  var _a, _b, _c, _d;
69
69
  if (((_a = navRef.value) == null ? void 0 : _a.clientWidth) < ((_b = navListRef.value) == null ? void 0 : _b.clientWidth)) {
70
+ if (!navVisibleRight.value) {
71
+ emit("nav-layout", true);
72
+ }
70
73
  left.value = ((_c = navListRef.value) == null ? void 0 : _c.clientWidth) - ((_d = navRef.value) == null ? void 0 : _d.clientWidth);
71
74
  navVisibleRight.value = true;
72
75
  } else {
76
+ if (navVisibleRight.value) {
77
+ emit("nav-layout", false);
78
+ }
73
79
  navVisibleRight.value = false;
74
80
  }
75
81
  };
@@ -135,7 +141,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
135
141
  createElementVNode("div", {
136
142
  ref_key: "navRef",
137
143
  ref: navRef,
138
- class: normalizeClass(["o-nav", { "o-nav-scroll": navVisibleLeft.value || !navVisibleRight.value }]),
144
+ class: normalizeClass(["o-nav", { "o-nav-scroll": navVisibleLeft.value || !navVisibleRight.value, "nav-left-arrow": navVisibleLeft.value }]),
139
145
  style: normalizeStyle(beforeStyle.value)
140
146
  }, [
141
147
  createElementVNode("ul", {
@@ -2,9 +2,11 @@ import { App } from 'vue';
2
2
  declare const OHeader: {
3
3
  new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./types').NavT> & Readonly<{
4
4
  "onHandle-click"?: ((val: any) => any) | undefined;
5
+ "onNav-layout"?: ((val: any) => any) | undefined;
5
6
  "onGo-home"?: (() => any) | undefined;
6
7
  }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
7
8
  "handle-click": (val: any) => any;
9
+ "nav-layout": (val: any) => any;
8
10
  "go-home": () => any;
9
11
  }, import('vue').PublicProps, {
10
12
  isFlatten: boolean;
@@ -19,6 +21,7 @@ declare const OHeader: {
19
21
  Defaults: {};
20
22
  }, Readonly<import('./types').NavT> & Readonly<{
21
23
  "onHandle-click"?: ((val: any) => any) | undefined;
24
+ "onNav-layout"?: ((val: any) => any) | undefined;
22
25
  "onGo-home"?: (() => any) | undefined;
23
26
  }>, {}, {}, {}, {}, {
24
27
  isFlatten: boolean;
@@ -28,9 +31,11 @@ declare const OHeader: {
28
31
  __isSuspense?: never;
29
32
  } & import('vue').ComponentOptionsBase<Readonly<import('./types').NavT> & Readonly<{
30
33
  "onHandle-click"?: ((val: any) => any) | undefined;
34
+ "onNav-layout"?: ((val: any) => any) | undefined;
31
35
  "onGo-home"?: (() => any) | undefined;
32
36
  }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
33
37
  "handle-click": (val: any) => any;
38
+ "nav-layout": (val: any) => any;
34
39
  "go-home": () => any;
35
40
  }, string, {
36
41
  isFlatten: boolean;