vue-mobile-calendar - npm Package Compare versions

Comparing version 2.3.0 to 3.0.0

package.json

 {
   "name": "vue-mobile-calendar",
-  "description": "a vue component of calendar for mobile",
-  "version": "2.3.0",
+  "description": "a vue component of calendar for mobile Vue移动端日期选择控件",
+  "keywords": [
+    "calendar",
+    "vue"
+  ],
+  "version": "3.0.0",
   "author": "lixin",
@@ -11,18 +15,27 @@ "homepage": "https://github.com/lx544690189",
   },
-  "main": "dist/vue-mobile-calendar.js",
+  "main": "lib/index.js",
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "dev": "vue-cli-service serve",
+    "build-docs": "vue-cli-service build --dest docs",
+    "build-lib": "vue-cli-service build --target lib --name Calendar --dest dist lib/index.js",
+    "lint": "vue-cli-service lint"
   },
+  "dependencies": {
+    "dayjs": "^1.8.10",
+    "vue": "^2.5.22"
+  },
   "devDependencies": {
-    "babel-core": "^6.0.0",
-    "babel-loader": "^6.0.0",
-    "babel-preset-env": "^1.5.1",
-    "cross-env": "^3.0.0",
-    "css-loader": "^0.25.0",
-    "file-loader": "^0.9.0",
-    "vue-loader": "^12.1.0",
-    "vue-template-compiler": "^2.3.3",
-    "webpack": "^2.6.1",
-    "webpack-dev-server": "^2.4.5"
+    "@vue/cli-plugin-babel": "^3.4.0",
+    "@vue/cli-plugin-eslint": "^3.4.0",
+    "@vue/cli-plugin-pwa": "^3.4.0",
+    "@vue/cli-service": "^3.4.0",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "less": "^3.0.4",
+    "less-loader": "^4.1.0",
+    "vue-template-compiler": "^2.5.21",
+    "register-service-worker": "^1.5.2"
   }
 }

README.md

@@ -5,3 +5,3 @@ # vue-mobile-calendar
 
-[![NPM](https://nodei.co/npm/vue-mobile-calendar.png?downloads=true&downloadRank=true)](https://www.npmjs.com/package/vue-mobile-calendar)
+[![NPM](https://nodei.co/npm/vue-mobile-calendar.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-mobile-calendar/)
 
@@ -12,80 +12,121 @@ > a vue component of calendar for mobile
 
-[demo](https://lx544690189.github.io/vue-mobile-calendar/)
-
+[点击查看DEMO](https://lx544690189.github.io/vue-mobile-calendar/)，或手机扫描下方二维码
 <p>
-<img src="https://github.com/lx544690189/vue-mobile-calendar/blob/master/screenshot/screenshot.jpg" width="200" float="left"/>
-<img src="https://github.com/lx544690189/vue-mobile-calendar/blob/master/screenshot/QRcode.png" width="300" float="left"/>
+<img src="https://github.com/lx544690189/vue-mobile-calendar/blob/master/screenshot/QRcode.png" width="200" float="left" style="border-radius: 6px" />
 </p>
+<p>
+<img src="https://github.com/lx544690189/vue-mobile-calendar/blob/master/screenshot/single.png" width="200" float="left" style="border-radius: 6px" />
+<img src="https://github.com/lx544690189/vue-mobile-calendar/blob/master/screenshot/multiple.png" width="200" float="left" style="border-radius: 6px" />
+<img src="https://github.com/lx544690189/vue-mobile-calendar/blob/master/screenshot/single.png" width="200" float="left" style="border-radius: 6px" />
+</p>
 
-## update log
-##### v2.3.0（2018-11-12)
-bug fixed:最大值计算错误
-
-##### v2.2.0（2018-7-23）
-bug fixed:minDate maxDate 等参数动态改变视图不能实时更新问题
-
-## update log
-##### v2.1.0（2018-6-5）
-
-bug fixed:切换月份或者年份时，网页会回到顶端
-
-## Build Setup
-
-```
-# install dependencies
-npm install
-
-# build for production with minification
-npm run build
-```
-
-## Usage
-### install
+## 使用方法
+### npm安装
 ```bash
 npm install vue-mobile-calendar
 ```
-
-### or:(from the dist folder)
-```javascript
-<script src="vue-mobile-calendar.js" type="text/javascript"></script>
+### 若使用外部引用方式，需自行编译，引入`disk/Calendar.umd.min.js`和`Calendar.css`
+```bash
+npm run build-lib
 ```
+### **注意**
+**本次版本升级api与2.x版本不相同，2.x版本api[请点击查看](https://github.com/lx544690189/vue-mobile-calendar/blob/master/README-2.x.md)**
 
+### 更新日志
+- V3.0.0(2019-3-16) 增加多选、时间段选择模式；增加日期内联显示方式；部分api与2.x不相同，升级请注意
+
 ### Quickstart
 
 ```javascript
-import Vue from 'vue'
-import Calendar from 'vue-mobile-calendar'
+<template>
+  <div id="demo">
+    <calendar @change="onChange"/>
+    <inlineCalendar />
+  </div>
+</template>
 
-Vue.use(Calendar)
+<script>
+// calendar为底部弹窗显示，inlineCalendar为页面内联显示（可放置页面任意地方）
+import { calendar,inlineCalendar } from 'vue-mobile-calendar';
+export default {
+  components: {
+    calendar,
+  },
+  methods: {
+    onChange(date) {
+      console.log(date.format('YY-MM-DD'));
+    },
+  },
+};
+</script>
 ```
 
-```vue
-<calendar
-	v-model="calendarShow"
-	:defaultDate="defaultDate"
-	@change="handelChange">
-</calendar>
-```
+## 关于日期类型
+组件中日期处理依赖[dayjs](https://github.com/iamkun/dayjs/blob/dev/docs/zh-cn/API-reference.md#api)(api和moment相同，大小仅2kb)，如在设置`defaultDate`时，所支持类型如下：
+> #### 当前时间
+> 
+> 直接运行 `dayjs()`，得到包含当前时间和日期的 `Dayjs` 对象。
+> 
+> ```js
+> dayjs()
+> ```
+> 
+> ### 时间字符串
+> 
+> 可以解析传入的一个标准的[ISO 8601](https://en.wikipedia.org/wiki/ISO_8601)时间字符串。
+> 
+> ```js
+> dayjs(String)
+> dayjs('1995-12-25')
+> ```
+> 
+> ### Date 对象
+> 
+> 可以解析传入的一个 Javascript Date 对象。
+> 
+> ```js
+> dayjs(Date)
+> dayjs(new Date(2018, 8, 18))
+> ```
+> 
+> ### Unix 时间戳 (毫秒)
+> 
+> 可以解析传入的一个 Unix 时间戳 (13 位数字)。
+> 
+> ```js
+> dayjs(Number)
+> dayjs(1318781876406)
+> ```
+> 
+> ### Unix 时间戳 (秒)
+> 
+> 可以解析传入的一个 Unix 时间戳 (10 位数字)。
+> 
+> ```js
+> dayjs.unix(Number)
+> dayjs.unix(1318781876)
+> ```
+更多api查看[dayjs](https://github.com/iamkun/dayjs/blob/dev/docs/zh-cn/API-reference.md#api)
 
-### Attributes
+### 属性
 
-option | description | type | default
+名称 | 类型 | 默认值 | 说明
 ---|--- | --- | ---
-v-model | show/hide the calendar | Boolean | false
-format | format date | String | "yyyy-MM-dd"
-defaultDate | default selected date | Date | new Date()
-minDate | optional minimum date | Date | null
-maxDate  | optional maximum date | Date | null
-closeByClickmask | close by mask | Boolean | true
-month | text of month | Array | ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
-week | text of day | Array | ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
+`mode` | `String` | 'single' | 时间选择模式，`single`:单选模式；`multiple`:多选模式；`during`:时间段选择模式
+`defaultDate` | `[Date, Number, Array, String]` | - | 默认已选时间，`mode`为单选模式时为`Dayjs`所支持的时间类型(见上面说明)，如'1995-12-25'；`mode`为多选模式为数组形式；`mode`为时间段选择模式为长度2的数组，如`[startDate,endDate]`
+`disabledDate` | `Array` | [] | 不可选日期，仅`mode`为'single'和'multiple'下支持
+`enableTouch` | `Boolean` | `true` | 允许手势滑动切换月份
+`preventTouchEvent` | `Boolean` | `true` | 手势操作时阻止事件冒泡，仅`enableTouch`为`true`生效
+`monthNames` | `Array` | `['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']` | 显示的月份文本
+`weekNames` | `Array` | `['周一', '周二', '周三', '周四', '周五', '周六', '周日']` | 显示的星期文本
+`closeByClickMask` | `Boolean` | `true` | 允许点击遮罩层关闭（仅弹窗显示形式的calendar生效）
+`dayClick` | `Function` | - | 日期点击时的回调函数，回调参数为当前所点击的日期，`return false`将不会执行选中、取消选中的操作
 
-### Events
+### 事件
 
-event name | description | 	parameter of callback
+名称 | 说明 | 回调
 ---|--- | ---
-change | when date change | (date,formatDate)
+change | 当前所选日期改变 | 回调参数为当前所选日期（dayjs类型，如获取时间字符串：`date.format('YYYY-MM-DD')`），`mode`为单选模式时为`date`；`mode`为多选模式为`[date1,date2]`；`mode`为时间段选择模式为`[startDate,endDate]`，当只选了开始时间时会为`[startDate]`
 
 ## Reference
-- [framework7](https://github.com/nolimits4web/Framework7)
-- [mint-ui](https://github.com/ElemeFE/mint-ui/)
+- [framework7](https://github.com/nolimits4web/Framework7)

src/main.js

@@ -1,11 +0,9 @@
-import Calendar from './calendar.vue'
+import Vue from 'vue';
+import App from './App.vue';
+import './registerServiceWorker';
 
-const install = function(Vue) {
-	Vue.component(Calendar.name, Calendar);
-}
+Vue.config.productionTip = false;
 
-if(typeof window !== 'undefined' && window.Vue) {
-	install(window.Vue);
-};
-
-export default install
+new Vue({
+  render: (h) => h(App),
+}).$mount('#app');

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

47

increased by193.75%

Number of lines in readme file

130

increased by46.07%

Worsened metrics

Total package byte prevSize

214565

decreased by-67.79%

Dependency count

2

increased byInfinity%

Dev dependency count

12

increased by20%

Lines of code

119

decreased by-98.67%

Number of low supply chain risk alerts

2

increased by100%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addeddayjs@^1.8.10

• + Addedvue@^2.5.22

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.2(transitive)

• + Added@babel/types@7.26.0(transitive)

• + Added@vue/compiler-sfc@2.7.16(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addeddayjs@1.11.13(transitive)

• + Addednanoid@3.3.7(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.49(transitive)

• + Addedprettier@2.8.8(transitive)

• + Addedsource-map@0.6.1(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedvue@2.7.16(transitive)