@varlet/ui 1.24.5-alpha.1640960457260 → 1.24.5

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/README.en-US.md +2 -2
  2. package/README.md +3 -3
  3. package/es/menu/Menu.js +20 -9
  4. package/highlight/attributes.json +2 -2
  5. package/highlight/web-types.json +4 -4
  6. package/lib/menu/Menu.js +19 -8
  7. package/package.json +7 -7
  8. package/umd/varlet.js +3 -3
package/README.en-US.md CHANGED
@@ -14,7 +14,7 @@
14
14
  <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
15
15
  <img src="https://img.shields.io/codecov/c/github/haoziqaq/varlet" alt="coverage">
16
16
  <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
17
- <img src="https://github.com/haoziqaq/varlet/workflows/CI/badge.svg" alt="ci">
17
+ <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
18
18
  </p>
19
19
  </div>
20
20
 
@@ -81,6 +81,6 @@ createApp(App).use(Varlet).mount('#app')
81
81
 
82
82
  ### Contributors
83
83
 
84
- <a href="https://github.com/haoziqaq/varlet/graphs/contributors">
84
+ <a href="https://github.com/varletjs/varlet/graphs/contributors">
85
85
  <img src="https://contrib.rocks/image?repo=haoziqaq/varlet" />
86
86
  </a>
package/README.md CHANGED
@@ -5,7 +5,7 @@
5
5
  <h1>VARLET</h1>
6
6
  <p>基于Vue3的Material design风格移动端组件库</p>
7
7
  <p>
8
- <a href="https://varlet.gitee.io/varlet-ui/">开发文档</a> | <a href="https://github.com/haoziqaq/varlet/blob/dev/README.en-US.md">English</a>
8
+ <a href="https://varlet.gitee.io/varlet-ui/">开发文档</a> | <a href="https://github.com/varletjs/varlet/blob/dev/README.en-US.md">English</a>
9
9
  </p>
10
10
  <p>
11
11
  <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">
@@ -14,7 +14,7 @@
14
14
  <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
15
15
  <img src="https://img.shields.io/codecov/c/github/haoziqaq/varlet" alt="coverage">
16
16
  <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
17
- <img src="https://github.com/haoziqaq/varlet/workflows/CI/badge.svg" alt="ci">
17
+ <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
18
18
  </p>
19
19
  </div>
20
20
 
@@ -79,6 +79,6 @@ createApp(App).use(Varlet).mount('#app')
79
79
 
80
80
  ### Contributors
81
81
 
82
- <a href="https://github.com/haoziqaq/varlet/graphs/contributors">
82
+ <a href="https://github.com/varletjs/varlet/graphs/contributors">
83
83
  <img src="https://contrib.rocks/image?repo=haoziqaq/varlet" />
84
84
  </a>
package/es/menu/Menu.js CHANGED
@@ -4,7 +4,7 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
4
4
 
5
5
  function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
6
6
 
7
- import { defineComponent, ref, watch, onMounted, onUnmounted, Transition, Teleport, nextTick } from 'vue';
7
+ import { defineComponent, ref, computed, watch, onMounted, onUnmounted, Transition, Teleport, nextTick } from 'vue';
8
8
  import { props } from './props';
9
9
  import { getLeft, getTop, toSizeUnit } from '../utils/elements';
10
10
  import { useZIndex } from '../context/zIndex';
@@ -27,6 +27,7 @@ export default defineComponent({
27
27
  } = _ref;
28
28
  var host = ref(null);
29
29
  var menu = ref(null);
30
+ var to = ref();
30
31
  var top = ref(0);
31
32
  var left = ref(0);
32
33
  var {
@@ -64,7 +65,16 @@ export default defineComponent({
64
65
  var resize = () => {
65
66
  top.value = computeTop(props.alignment);
66
67
  left.value = getLeft(host.value);
67
- };
68
+ }; // Transition style use computed place here
69
+
70
+
71
+ var transitionStyle = computed(() => {
72
+ return {
73
+ top: "calc(" + top.value + "px + " + toSizeUnit(props.offsetY) + ")",
74
+ left: "calc(" + left.value + "px + " + toSizeUnit(props.offsetX) + ")",
75
+ zIndex: zIndex.value
76
+ };
77
+ });
68
78
 
69
79
  var renderTransition = () => _createVNode(Transition, {
70
80
  "name": "var-menu",
@@ -74,11 +84,7 @@ export default defineComponent({
74
84
  default: () => [_withDirectives(_createVNode("div", {
75
85
  "class": "var-menu__menu var-elevation--3",
76
86
  "ref": menu,
77
- "style": {
78
- top: "calc(" + top.value + "px + " + toSizeUnit(props.offsetY) + ")",
79
- left: "calc(" + left.value + "px + " + toSizeUnit(props.offsetX) + ")",
80
- zIndex: zIndex.value
81
- },
87
+ "style": transitionStyle.value,
82
88
  "onClick": event => {
83
89
  event.stopPropagation();
84
90
  }
@@ -105,7 +111,12 @@ export default defineComponent({
105
111
  return _ref2.apply(this, arguments);
106
112
  };
107
113
  }());
114
+ watch(() => props.teleport, newValue => {
115
+ to.value = newValue;
116
+ });
108
117
  onMounted(() => {
118
+ // Synchronously transfer the state to the mount hook to support server-side rendering to prevent hydration errors
119
+ to.value = props.teleport;
109
120
  resize();
110
121
  document.addEventListener('click', handleMenuClose);
111
122
  window.addEventListener('resize', resize);
@@ -124,8 +135,8 @@ export default defineComponent({
124
135
  "class": "var-menu",
125
136
  "ref": host,
126
137
  "onClick": handleClick
127
- }, [slots.default == null ? void 0 : slots.default(), props.teleport ? _createVNode(Teleport, {
128
- "to": props.teleport,
138
+ }, [slots.default == null ? void 0 : slots.default(), to.value ? _createVNode(Teleport, {
139
+ "to": to.value,
129
140
  "disabled": disabled.value
130
141
  }, _isSlot(_slot = renderTransition()) ? _slot : {
131
142
  default: () => [_slot]
package/highlight/attributes.json CHANGED
@@ -101,11 +101,11 @@
101
101
  },
102
102
  "var-button/type": {
103
103
  "type": "string",
104
- "description": "类型， 可选值为 `default` `primary` `info` `success` `warning` `danger` 默认值：default"
104
+ "description": "类型，可选值为 `default` `primary` `info` `success` `warning` `danger` 默认值：default"
105
105
  },
106
106
  "var-button/size": {
107
107
  "type": "string",
108
- "description": "尺寸， 可选值为 `normal` `mini` `small` `large` 默认值：normal"
108
+ "description": "尺寸，可选值为 `normal` `mini` `small` `large` 默认值：normal"
109
109
  },
110
110
  "var-button/loading": {
111
111
  "type": "boolean",
package/highlight/web-types.json CHANGED
@@ -326,7 +326,7 @@
326
326
  "attributes": [
327
327
  {
328
328
  "name": "type",
329
- "description": "类型， 可选值为 `default` `primary` `info` `success` `warning` `danger`",
329
+ "description": "类型，可选值为 `default` `primary` `info` `success` `warning` `danger`",
330
330
  "default": "default",
331
331
  "value": {
332
332
  "type": "string",
@@ -335,7 +335,7 @@
335
335
  },
336
336
  {
337
337
  "name": "size",
338
- "description": "尺寸， 可选值为 `normal` `mini` `small` `large`",
338
+ "description": "尺寸，可选值为 `normal` `mini` `small` `large`",
339
339
  "default": "normal",
340
340
  "value": {
341
341
  "type": "string",
@@ -454,11 +454,11 @@
454
454
  "events": [
455
455
  {
456
456
  "name": "click",
457
- "description": "点击按钮时触发， 在 `loading` 或 `disabled` 状态为 `true` 时不触发"
457
+ "description": "点击按钮时触发，在 `loading` 或 `disabled` 状态为 `true` 时不触发"
458
458
  },
459
459
  {
460
460
  "name": "touchstart",
461
- "description": "触摸手指压下按钮时触发， 在 `loading` 或 `disabled` 状态为 `true` 时不触发"
461
+ "description": "触摸手指压下按钮时触发，在 `loading` 或 `disabled` 状态为 `true` 时不触发"
462
462
  }
463
463
  ],
464
464
  "slots": [
package/lib/menu/Menu.js CHANGED
@@ -37,6 +37,7 @@ var _default = (0, _vue.defineComponent)({
37
37
  } = _ref;
38
38
  var host = (0, _vue.ref)(null);
39
39
  var menu = (0, _vue.ref)(null);
40
+ var to = (0, _vue.ref)();
40
41
  var top = (0, _vue.ref)(0);
41
42
  var left = (0, _vue.ref)(0);
42
43
  var {
@@ -74,7 +75,16 @@ var _default = (0, _vue.defineComponent)({
74
75
  var resize = () => {
75
76
  top.value = computeTop(props.alignment);
76
77
  left.value = (0, _elements.getLeft)(host.value);
77
- };
78
+ }; // Transition style use computed place here
79
+
80
+
81
+ var transitionStyle = (0, _vue.computed)(() => {
82
+ return {
83
+ top: "calc(" + top.value + "px + " + (0, _elements.toSizeUnit)(props.offsetY) + ")",
84
+ left: "calc(" + left.value + "px + " + (0, _elements.toSizeUnit)(props.offsetX) + ")",
85
+ zIndex: zIndex.value
86
+ };
87
+ });
78
88
 
79
89
  var renderTransition = () => (0, _vue.createVNode)(_vue.Transition, {
80
90
  "name": "var-menu",
@@ -84,11 +94,7 @@ var _default = (0, _vue.defineComponent)({
84
94
  default: () => [(0, _vue.withDirectives)((0, _vue.createVNode)("div", {
85
95
  "class": "var-menu__menu var-elevation--3",
86
96
  "ref": menu,
87
- "style": {
88
- top: "calc(" + top.value + "px + " + (0, _elements.toSizeUnit)(props.offsetY) + ")",
89
- left: "calc(" + left.value + "px + " + (0, _elements.toSizeUnit)(props.offsetX) + ")",
90
- zIndex: zIndex.value
91
- },
97
+ "style": transitionStyle.value,
92
98
  "onClick": event => {
93
99
  event.stopPropagation();
94
100
  }
@@ -115,7 +121,12 @@ var _default = (0, _vue.defineComponent)({
115
121
  return _ref2.apply(this, arguments);
116
122
  };
117
123
  }());
124
+ (0, _vue.watch)(() => props.teleport, newValue => {
125
+ to.value = newValue;
126
+ });
118
127
  (0, _vue.onMounted)(() => {
128
+ // Synchronously transfer the state to the mount hook to support server-side rendering to prevent hydration errors
129
+ to.value = props.teleport;
119
130
  resize();
120
131
  document.addEventListener('click', handleMenuClose);
121
132
  window.addEventListener('resize', resize);
@@ -134,8 +145,8 @@ var _default = (0, _vue.defineComponent)({
134
145
  "class": "var-menu",
135
146
  "ref": host,
136
147
  "onClick": handleClick
137
- }, [slots.default == null ? void 0 : slots.default(), props.teleport ? (0, _vue.createVNode)(_vue.Teleport, {
138
- "to": props.teleport,
148
+ }, [slots.default == null ? void 0 : slots.default(), to.value ? (0, _vue.createVNode)(_vue.Teleport, {
149
+ "to": to.value,
139
150
  "disabled": disabled.value
140
151
  }, _isSlot(_slot = renderTransition()) ? _slot : {
141
152
  default: () => [_slot]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@varlet/ui",
3
- "version": "1.24.5-alpha.1640960457260",
3
+ "version": "1.24.5",
4
4
  "description": "A material like components library",
5
5
  "module": "es/index.js",
6
6
  "main": "lib/index.js",
@@ -29,23 +29,23 @@
29
29
  "homepage": "https://varlet.gitee.io/varlet-ui/",
30
30
  "repository": {
31
31
  "type": "git",
32
- "url": "git+https://github.com/haoziqaq/varlet.git"
32
+ "url": "git+https://github.com/varletjs/varlet.git"
33
33
  },
34
34
  "bugs": {
35
- "url": "https://github.com/haoziqaq/varlet/issues"
35
+ "url": "https://github.com/varletjs/varlet/issues"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "vue": "^3.2.0"
39
39
  },
40
40
  "gitHead": "ee9c3866bedad96c86365b0f9888a3a6bb781b1f",
41
41
  "dependencies": {
42
- "@varlet/icons": "1.24.5-alpha.1640960457260",
42
+ "@varlet/icons": "1.24.5",
43
43
  "dayjs": "^1.10.4",
44
44
  "decimal.js": "^10.2.1"
45
45
  },
46
46
  "devDependencies": {
47
- "@varlet/cli": "1.24.5-alpha.1640960457260",
48
- "@varlet/touch-emulator": "1.24.5-alpha.1640960457260",
47
+ "@varlet/cli": "1.24.5",
48
+ "@varlet/touch-emulator": "1.24.5",
49
49
  "@vue/test-utils": "2.0.0-rc.6",
50
50
  "typescript": "^4.4.4",
51
51
  "lodash-es": "^4.17.21",
@@ -68,5 +68,5 @@
68
68
  "test:watch": "varlet-cli jest -w",
69
69
  "test:watchAll": "varlet-cli jest -wa"
70
70
  },
71
- "readme": "<div align=\"center\">\n <a href=\"https://varlet.gitee.io/varlet-ui/\">\n <img src=\"https://varlet.gitee.io/varlet-ui/logo.svg\" width=\"150\">\n </a>\n <h1>VARLET</h1>\n <p>基于Vue3的Material design风格移动端组件库</p>\n <p>\n <a href=\"https://varlet.gitee.io/varlet-ui/\">开发文档</a> | <a href=\"https://github.com/haoziqaq/varlet/blob/dev/README.en-US.md\">English</a>\n </p>\n <p>\n <img src=\"https://img.shields.io/npm/v/@varlet/ui?style=flat-square\" alt=\"version\">\n <img src=\"https://img.shields.io/github/stars/haoziqaq/varlet\" alt=\"ci\">\n <img src=\"https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc\" alt=\"vue\">\n <img src=\"https://img.shields.io/npm/l/@varlet/ui.svg\" alt=\"licence\">\n <img src=\"https://img.shields.io/codecov/c/github/haoziqaq/varlet\" alt=\"coverage\">\n <img src=\"https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip\" alt=\"gzip\" />\n <img src=\"https://github.com/haoziqaq/varlet/workflows/CI/badge.svg\" alt=\"ci\">\n </p>\n</div>\n\n---\n\n### 介绍\n\nVarlet是一个基于`Vue3`开发的Material风格移动端组件库，全面拥抱`Vue3`生态，由社区建立起来的组件库团队进行维护。\n\n### 特性\n1. 提供50个高质量通用组件\n2. 组件十分轻量\n3. 由国人开发，完善的中英文文档和后勤保障\n4. 支持按需引入\n5. 支持主题定制\n6. 支持国际化\n7. 支持webstorm，vscode组件属性高亮\n8. 支持SSR\n9. 支持Typescript\n10. 90%以上单元测试覆盖率，提供稳定性保证\n11. 支持暗黑模式\n\n### 安装\n\n### CDN\n`varlet.js`包含组件库的所有样式和逻辑，引入即可。\n\n```html\n<div id=\"app\"></div>\n<script src=\"https://cdn.jsdelivr.net/npm/vue@next\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js\"></script>\n<script>\n const app = Vue.createApp({\n template: '<var-button>按钮</var-button>'\n })\n app.use(Varlet).mount('#app')\n</script>\n```\n\n### Webpack / Vite\n```shell\n# 通过npm或yarn或pnpm安装\n\n# npm\nnpm i @varlet/ui -S\n\n# yarn\nyarn add @varlet/ui\n\n# pnpm\npnpm add @varlet/ui\n```\n\n```js\nimport App from './App.vue'\nimport Varlet from '@varlet/ui'\nimport { createApp } from 'vue'\nimport '@varlet/ui/es/style.js'\n\ncreateApp(App).use(Varlet).mount('#app')\n```\n\n### Contributors\n\n<a href=\"https://github.com/haoziqaq/varlet/graphs/contributors\">\n <img src=\"https://contrib.rocks/image?repo=haoziqaq/varlet\" />\n</a>\n"
71
+ "readme": "<div align=\"center\">\n <a href=\"https://varlet.gitee.io/varlet-ui/\">\n <img src=\"https://varlet.gitee.io/varlet-ui/logo.svg\" width=\"150\">\n </a>\n <h1>VARLET</h1>\n <p>基于Vue3的Material design风格移动端组件库</p>\n <p>\n <a href=\"https://varlet.gitee.io/varlet-ui/\">开发文档</a> | <a href=\"https://github.com/varletjs/varlet/blob/dev/README.en-US.md\">English</a>\n </p>\n <p>\n <img src=\"https://img.shields.io/npm/v/@varlet/ui?style=flat-square\" alt=\"version\">\n <img src=\"https://img.shields.io/github/stars/haoziqaq/varlet\" alt=\"ci\">\n <img src=\"https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc\" alt=\"vue\">\n <img src=\"https://img.shields.io/npm/l/@varlet/ui.svg\" alt=\"licence\">\n <img src=\"https://img.shields.io/codecov/c/github/haoziqaq/varlet\" alt=\"coverage\">\n <img src=\"https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip\" alt=\"gzip\" />\n <img src=\"https://github.com/varletjs/varlet/workflows/CI/badge.svg\" alt=\"ci\">\n </p>\n</div>\n\n---\n\n### 介绍\n\nVarlet是一个基于`Vue3`开发的Material风格移动端组件库，全面拥抱`Vue3`生态，由社区建立起来的组件库团队进行维护。\n\n### 特性\n1. 提供50个高质量通用组件\n2. 组件十分轻量\n3. 由国人开发，完善的中英文文档和后勤保障\n4. 支持按需引入\n5. 支持主题定制\n6. 支持国际化\n7. 支持webstorm，vscode组件属性高亮\n8. 支持SSR\n9. 支持Typescript\n10. 90%以上单元测试覆盖率，提供稳定性保证\n11. 支持暗黑模式\n\n### 安装\n\n### CDN\n`varlet.js`包含组件库的所有样式和逻辑，引入即可。\n\n```html\n<div id=\"app\"></div>\n<script src=\"https://cdn.jsdelivr.net/npm/vue@next\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js\"></script>\n<script>\n const app = Vue.createApp({\n template: '<var-button>按钮</var-button>'\n })\n app.use(Varlet).mount('#app')\n</script>\n```\n\n### Webpack / Vite\n```shell\n# 通过npm或yarn或pnpm安装\n\n# npm\nnpm i @varlet/ui -S\n\n# yarn\nyarn add @varlet/ui\n\n# pnpm\npnpm add @varlet/ui\n```\n\n```js\nimport App from './App.vue'\nimport Varlet from '@varlet/ui'\nimport { createApp } from 'vue'\nimport '@varlet/ui/es/style.js'\n\ncreateApp(App).use(Varlet).mount('#app')\n```\n\n### Contributors\n\n<a href=\"https://github.com/varletjs/varlet/graphs/contributors\">\n <img src=\"https://contrib.rocks/image?repo=haoziqaq/varlet\" />\n</a>\n"
72
72
  }