fun-tab/package.json

A mobile touch-swappable tabs component for Vue3

{
  "name": "fun-tab",
  "version": "0.0.1",
  "description": "A mobile touch-swappable tabs component for Vue3",
  "author": "ScoutYin <scoutyin.1900@gmail.com>",
  "keywords": [
    "Vue",
    "Vue3",
    "mobile",
    "component",
    "swap",
    "tabs",
    "tabBar",
    "tab"
  ],
  "files": [
    "es",
    "lib",
    "dist"
  ],
  "main": "lib/index.js",
  "module": "es/index.js",
  "style": "dist/index.css",
  "exports": {
    ".": {
      "import": "./es/index.js",
      "require": "./lib/index.js"
    },
    "./*": "./*"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ScoutYin/fun-tab.git"
  },
  "bugs": {
    "url": "https://github.com/ScoutYin/fun-tab/issues"
  },
  "homepage": "https://github.com/ScoutYin/fun-tab",
  "publishConfig": {
    "registry": "https://registry.npmjs.org"
  },
  "devDependencies": {
    "@types/fs-extra": "^9.0.13",
    "@types/gulp": "^4.0.9",
    "@types/rollup-plugin-css-only": "^3.1.0",
    "@typescript-eslint/eslint-plugin": "^5.22.0",
    "@typescript-eslint/parser": "^5.22.0",
    "@vitejs/plugin-vue": "^2.3.1",
    "esbuild": "^0.14.39",
    "eslint": "^8.14.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.7.1",
    "fast-glob": "^3.2.11",
    "fs-extra": "^10.1.0",
    "gulp": "^4.0.2",
    "prettier": "^2.6.2",
    "rimraf": "^3.0.2",
    "rollup": "^2.74.1",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-esbuild": "^4.9.1",
    "rollup-plugin-filesize": "^9.1.2",
    "sucrase": "^3.21.0",
    "ts-morph": "^14.0.0",
    "typescript": "^4.5.4",
    "vite": "^2.9.5",
    "vue": "^3.2.33",
    "vue-tsc": "^0.34.7"
  },
  "peerDependencies": {
    "vue": "^3.2.20"
  },
  "engines": {
    "node": ">= 12.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie < 10"
  ],
  "license": "MIT",
  "scripts": {
    "dev": "vite",
    "typeCheck": "vue-tsc --noEmit",
    "build": "gulp -f build/gulpfile.ts",
    "preview": "vite preview"
  },
  "readme": "# fun-tab\n\n[ly-tab](https://github.com/ScoutYin/ly-tab)的 Vue3 版本，更名为 fun-tab。\n\n## 基本效果展示\n\n![v3 0 0](https://user-images.githubusercontent.com/32835712/166098427-fef7c973-00aa-4a3a-82a5-41ce74dbe62f.gif)\n\n## 安装\n\n```shell\npnpm add fun-tab\n# or\nyarn add fun-tab\n# or\nnpm i fun-tab\n```\n## 使用\n\n### 全局注册\n\n```js\nimport { createApp } from 'vue'\nimport FunTab from 'fun-tab'\nimport 'fun-tab/dist/index.css'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\napp.use(FunTab)\n\napp.mount('#app')\n```\n\n### 局部注册\n\n```js\n<script setup>\nimport { FunTabs, FunTabBar, FunTabItem } from 'fun-tab';\n\n// ...\n</script>\n```\n\n## FunTabs\n\n### 简易示例\n\n```javascript\n<fun-tabs v-model=\"value\">\n  <fun-tab-item name=\"1\" title=\"选项卡1\" />\n  <fun-tab-item name=\"2\" title=\"选项卡2\" />\n</fun-tabs>\n```\n\n```javascript\n<script setup>\nimport { ref } from 'vue'\n\nconst value = ref('1')\n</script>\n```\n\n### 属性\n\n| 属性 | 说明 | 类型 | 默认值 |\n| ---- | -----|---|----|\n| modelValue | 当前激活的 `tab` 的 name 属性值 | `string \\| number` | '' |\n| lineWidth | 当前激活 `tab` 下划线的宽度，单位 `px`，为`auto`时表示当前激活 `tab` 项的宽度 | `number \\| string` | 30 |\n| lineHeight | 当前激活 `tab` 下划线的高度，单位 `px` | `number` | 3 |\n| activeColor | 激活状态下 `tab` 文案及下划线的颜色 | `string` | #1677ff |\n| additionalX | 近似等于超出边界时最大可拖动距离，单位 `px` | `number` | 50 |\n| reBoundExponent | 惯性回弹指数，值越大，惯性回弹距离越长 | `number` | 10 |\n| inertialDuration | 惯性滑动过程的持续时间，值越小，感知上阻力越大，可近似认为惯性滑动过程速度减为零所需的时间(ms) | `number` | 1000 |\n| reBoundingDuration | 回弹过程动画duration，单位 `ms` | `number` | 360 |\n\n### 事件\n\n| 事件名 | 说明 | 回调参数 |\n| ----- | ---- | ----- |\n| update:modelValue | 切换激活 tab 项的回调 | `name: string \\| number` |\n| change | 切换激活 tab 项的回调 | `name: string \\| number` |\n\n### 方法\n\n| 方法名 | 说明 | 参数 | 返回值 |\n| ----- | ---- | ---- | ---- |\n| resize | 外层元素大小或组件布局、尺寸变化时，可以调用此方法来进行重绘 | - | - |\n\n### 插槽\n\n| 名称 | 说明 |\n| --- | ---- |\n| default | 默认插槽，放置 `FunTabItem` 组件 |\n\n## FunTabItem\n\n### 属性\n\n| 属性 | 说明 | 类型 | 默认值 |\n| ---- | -----|---|----|\n| title | 选项卡显示文字 | `string` | - |\n| name | 选项卡标识符 | `string \\| number` | 选项卡索引 |\n| badge | 右上角徽标内容 | `string \\| number` | - |\n\n### 插槽\n\n| 名称 | 说明 |\n| --- | ---- |\n| default | 选项卡文字内容插槽，优先级高于传入的 `title` 属性 |\n| icon | 选项卡图标 |\n\n## FunTabBar\n\n### 简易示例\n\n```javascript\n<fun-tab-bar v-model=\"value\">\n  <fun-tab-item name=\"1\" title=\"选项卡1\" />\n  <fun-tab-item name=\"2\" title=\"选项卡2\" />\n</fun-tab-bar>\n```\n\n```javascript\n<script setup>\nimport { ref } from 'vue'\n\nconst value = ref('1')\n</script>\n```\n\n### 属性\n\n| 属性 | 说明 | 类型 | 默认值 |\n| ---- | -----|---|----|\n| modelValue | 当前激活的 `tab` 的 name 属性值 | `string \\| number` | '' |\n| activeColor | 激活状态下 `tab` 文案及icon的颜色 | `string` | #1677ff |\n\n### 事件\n\n| 事件名 | 说明 | 回调参数 |\n| ----- | ---- | ----- |\n| update:modelValue | 切换激活 tab 项的回调 | `name: string \\| number` |\n| change | 切换激活 tab 项的回调 | `name: string \\| number` |\n\n### 插槽\n\n| 名称 | 说明 |\n| --- | ---- |\n| default | 默认插槽，放置 `FunTabItem` 组件 |\n"
}