chore: publish vue-components@0.1.0

package.json

@@ -26,7 +26,7 @@
     "docs:serve": "vitepress serve packages",
     "update": "esno scripts/update.ts",
     "update:full": "nr update && nr build:types",
-    "changeset": "changeset && changeset version",
+    "bump": "changeset && changeset version",
     "publish:ci": "nr build && pnpm -r publish"
   },
   "dependencies": {

packages/indexes.json

@@ -5,57 +5,57 @@
 			"name": "Browser Utils",
 			"package": "@hairy/browser-utils",
 			"function": "index.ts",
-			"lastUpdated": 0,
+			"lastUpdated": 1685024011000,
 			"docs": "/web-browser/",
 			"description": "浏览器的一些工具函数，挺好用的，至少我认为是这样。"
 		},
 		{
 			"name": "Color Palette",
 			"package": "@hairy/palette",
 			"function": "index.ts",
-			"lastUpdated": 0,
+			"lastUpdated": 1685024011000,
 			"docs": "/util-color/",
 			"description": "颜色的处理、转换、计算"
 		},
 		{
 			"name": "Format Utils",
 			"package": "@hairy/format",
 			"function": "index.ts",
-			"lastUpdated": 0,
+			"lastUpdated": 1685024011000,
 			"docs": "/util-format/",
 			"description": "用来格式化一些字符串和数字的工具类，仅此而已。"
 		},
 		{
 			"name": "Hairy Utils",
 			"package": "@hairy/utils",
 			"function": "index.ts",
-			"lastUpdated": 0,
+			"lastUpdated": 1685024011000,
 			"docs": "/util-core/",
 			"description": "没什么特别的，除了为了让我变懒。"
 		},
 		{
 			"name": "Vue Use",
 			"package": "@hairy/vueuse",
 			"function": "index.ts",
-			"lastUpdated": 1653124243000,
+			"lastUpdated": 1685024011000,
 			"docs": "/vue-use/",
 			"description": "好的工具无需多言，也许我来兴趣了会编写文档？（别想了，我懒得写）"
 		},
 		{
 			"name": "Vue Utils",
 			"package": "@hairy/vue-utils",
 			"function": "index.ts",
-			"lastUpdated": 1653124243000,
+			"lastUpdated": 1685024011000,
 			"docs": "/vue-utils/",
 			"description": "Vue 的一些工具函数，其实没多少。"
 		},
 		{
 			"name": "Wechat Jssdk",
 			"package": "@hairy/wechat-jssdk",
 			"function": "index.ts",
-			"lastUpdated": 0,
+			"lastUpdated": 1685024011000,
 			"docs": "/web-wechat-jssdk/",
-			"description": "WechatJssdk 构造函数对 [wechat-jssdk](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html) 的 api 进行了 promise 处理，并且可直接调用，不需要执行 wx.ready 等待 jssdk 授权完毕。"
+			"description": "WechatJssdk 构造函数对 [wechat-jssdk](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html) 的 `api` 进行了 `promise` 处理，并且可直接调用，不需要执行 `wx.ready` 等待 `jssdk` 授权完毕。"
 		}
 	]
 }

packages/vue-components/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @hairy/vue-components
+
+## 0.1.0
+
+### Minor Changes
+
+- chore: publish vue-components@0.1.0

packages/vue-components/index.ts

@@ -0,0 +1,2 @@
+export * from './src/CollapseTransition'
+export * from './src/Field'

packages/vue-components/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@hairy/vue-components",
+  "version": "0.1.0",
+  "license": "MIT",
+  "main": "index.ts",
+  "publishConfig": {
+    "main": "index.cjs.js",
+    "types": "./index.d.ts",
+    "module": "./index.esm.js",
+    "unpkg": "./index.iife.min.js",
+    "jsdelivr": "./index.iife.min.js",
+    "exports": {
+      ".": {
+        "import": "./index.esm.js",
+        "require": "./index.cjs.js"
+      },
+      "./*": "./*"
+    },
+    "linkDirectory": false
+  },
+  "scripts": {
+    "build": "ptsup index.ts --dts --meta"
+  },
+  "dependencies": {
+    "css-render": "^0.15.12",
+    "vue-demi": "^0.14.5"
+  }
+}

packages/vue-components/src/CollapseTransition.ts

@@ -0,0 +1,85 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import type { DefineComponent, TransitionProps } from 'vue-demi'
+import { Transition, defineComponent, h } from 'vue-demi'
+import CssRender from 'css-render'
+
+const { c } = CssRender()
+
+export const CollapseTransition: DefineComponent = defineComponent({
+  name: 'CollapseTransition',
+  setup(_, { slots }) {
+    const on = {
+      onBeforeEnter(el: HTMLDivElement) {
+        el.classList.add('collapse-transition')
+        if (!el.dataset)
+          (el.dataset as any) = {}
+
+        el.dataset.oldPaddingTop = el.style.paddingTop
+        el.dataset.oldPaddingBottom = el.style.paddingBottom
+
+        el.style.height = '0'
+        el.style.paddingTop = '0'
+        el.style.paddingBottom = '0'
+      },
+      onEnter(el: HTMLDivElement) {
+        el.dataset.oldOverflow = el.style.overflow
+        if (el.scrollHeight !== 0) {
+          el.style.height = `${el.scrollHeight}px`
+          el.style.paddingTop = el.dataset.oldPaddingTop || '0'
+          el.style.paddingBottom = el.dataset.oldPaddingBottom || '0'
+        }
+        else {
+          el.style.height = ''
+          el.style.paddingTop = el.dataset.oldPaddingTop || '0'
+          el.style.paddingBottom = el.dataset.oldPaddingBottom || '0'
+        }
+
+        el.style.overflow = 'hidden'
+      },
+      onAfterEnter(el: HTMLDivElement) {
+        // for safari: remove class then reset height is necessary
+        el.classList.remove('collapse-transition')
+        el.style.height = ''
+        el.style.overflow = el.dataset.oldOverflow || '0'
+      },
+
+      onBeforeLeave(el: HTMLDivElement) {
+        if (!el.dataset)
+          (el.dataset as any) = {}
+        el.dataset.oldPaddingTop = el.style.paddingTop
+        el.dataset.oldPaddingBottom = el.style.paddingBottom
+        el.dataset.oldOverflow = el.style.overflow
+
+        el.style.height = `${el.scrollHeight}px`
+        el.style.overflow = 'hidden'
+      },
+
+      onLeave(el: HTMLDivElement) {
+        if (el.scrollHeight !== 0) {
+          // for safari: add class after set height, or it will jump to zero height suddenly, weired
+          el.classList.add('collapse-transition')
+          // fix #968 collapse animation failure.
+          // in vue3.0.4, transitionProperty is set 'none' to avoid 'v-leave-from' issue
+          el.style.transitionProperty = 'height'
+          el.style.height = '0'
+          el.style.paddingTop = '0'
+          el.style.paddingBottom = '0'
+        }
+      },
+
+      onAfterLeave(el: HTMLDivElement) {
+        el.classList.remove('collapse-transition')
+        el.style.height = ''
+        el.style.overflow = el.dataset.oldOverflow || '0'
+        el.style.paddingTop = el.dataset.oldPaddingTop || '0'
+        el.style.paddingBottom = el.dataset.oldPaddingBottom || '0'
+      },
+    }
+    style.mount()
+    return () => h(Transition, on as unknown as TransitionProps, slots)
+  },
+})
+
+const style = c('.collapse-transition', {
+  transition: '0.2s height ease-in-out, 0.2s padding-top ease-in-out,0.2s padding-bottom ease-in-out',
+})

packages/vue-components/src/Field.ts

@@ -0,0 +1,19 @@
+import type { Component, PropType, VNode } from 'vue-demi'
+import { defineComponent, h } from 'vue-demi'
+
+export const Field = defineComponent({
+  name: 'Field',
+  props: {
+    is: {
+      type: [String, Number, Object] as PropType<string | number | VNode | Component>,
+      default: '',
+    },
+  },
+  setup(props) {
+    return () => {
+      if (typeof props.is === 'string' || typeof props.is === 'number')
+        return props.is
+      return props.is ? h(props.is) : null
+    }
+  },
+})