Skip to content

Commit 617dfe8

Browse files
dangvanthanhdangvanthanh
committed
feature: add is24h and timeZone props
1 parent 38aa4c3 commit 617dfe8

File tree

19 files changed

+306
-3550
lines changed

19 files changed

+306
-3550
lines changed

‎.hooks/pre-commit‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#!/bin/sh
2+
echo "pre-commit hook run"
3+
4+
bun run lint
5+
bun run format

‎README.md‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ $ npm install @dangvanthanh/vue-clock --save
2323
### Vue
2424

2525
```javascript
26-
import Vue from 'vue'
27-
import VueClock from '@dangvanthanh/vue-clock'
26+
import Vue from "vue";
27+
import VueClock from "@dangvanthanh/vue-clock";
2828

29-
Vue.use(VueClock)
29+
Vue.use(VueClock);
3030
```
3131

3232
```vue
@@ -37,7 +37,9 @@ Vue.use(VueClock)
3737
<h3>Hidden hour</h3>
3838
<VueClock :isHour="false"/>
3939
<h3>Hidden minute and second</h3>
40-
<VueClock :isMinute="false" :isSecond="false"/>
40+
<VueClock :isMinute="false" :isSecond="false" />
41+
<h3>With timeZone</h3>
42+
<VueClock timeZone="'America/New_York'" />
4143
</div>
4244
</template>
4345
@@ -53,21 +55,23 @@ export default {
5355
### Nuxt (or SSR)
5456

5557
```javascript
56-
import Vue from 'vue'
57-
import VueClock from '@dangvanthanh/vue-clock'
58+
import Vue from "vue";
59+
import VueClock from "@dangvanthanh/vue-clock";
5860

59-
Vue.component('VueClock', VueClock)
61+
Vue.component("VueClock", VueClock);
6062
// or
6163
// Vue.use(VueClock);
6264
```
6365

6466
# Props
6567

66-
| Name | Type | Default | Description |
67-
| ---------- | --------- | ------- | --------------------- |
68-
| `isHour` | `Boolean` | `true` | Display/hidden hour |
69-
| `isMinute` | `Boolean` | `true` | Display/hidden minute |
70-
| `isSecond` | `Boolean` | `true` | Display/hidden second |
68+
| Name | Type | Default | Description |
69+
| ---------- | --------- | ------- | ------------------------------------------------------- |
70+
| `is24h` | `Boolean` | `false` | Display 24h or not |
71+
| `isHour` | `Boolean` | `true` | Display/hidden hour |
72+
| `isMinute` | `Boolean` | `true` | Display/hidden minute |
73+
| `isSecond` | `Boolean` | `true` | Display/hidden second |
74+
| `timeZone` | `String` | `true` | [List of Time Zones](https://timezonedb.com/time-zones) |
7175

7276
## License
7377

‎biome.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
3+
"organizeImports": {
4+
"enabled": true
5+
},
6+
"linter": {
7+
"enabled": true,
8+
"rules": {
9+
"recommended": true
10+
}
11+
},
12+
"javascript": {
13+
"formatter": {
14+
"quoteStyle": "single",
15+
"semicolons": "asNeeded"
16+
}
17+
}
18+
}

‎bun.lockb‎

159 KB
Binary file not shown.

‎example/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎example/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Vue Clock Example
2+
3+
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4+
5+
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

‎example/bun.lockb‎

27.5 KB
Binary file not shown.

‎example/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vue Clock Example</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎example/package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "example",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"vue": "^3.4.31"
13+
},
14+
"devDependencies": {
15+
"@vitejs/plugin-vue": "^5.0.5",
16+
"vite": "^5.3.4"
17+
}
18+
}

‎example/src/App.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script setup>
2+
import VueClock from '../../src/VueClock.vue'
3+
</script>
4+
5+
<template>
6+
<div class="clocks">
7+
<div>
8+
<h3>Sai Gon</h3>
9+
<VueClock />
10+
</div>
11+
<div>
12+
<h3>New York</h3>
13+
<VueClock :timeZone="'America/New_York'" />
14+
</div>
15+
<div>
16+
<h3>Tokyo</h3>
17+
<VueClock :is24h="true" :timeZone="'Asia/Tokyo'" />
18+
</div>
19+
<div>
20+
<h3>London</h3>
21+
<VueClock :is24h="true" :timeZone="'Europe/London'" />
22+
</div>
23+
</div>
24+
</template>
25+
26+
<style scoped>
27+
.clocks {
28+
display: grid;
29+
grid-template-columns: repeat(2, minmax(0, 1fr));
30+
gap: 1rem;
31+
}
32+
</style>

0 commit comments

Comments
 (0)