Skip to content

Commit 645ad6a

Browse files
basitcodeenvbasitcodeenv
committed
first commit
0 parents  commit 645ad6a

16 files changed

+1878
-0
lines changed

‎.github/workflows/deploy.yml

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
name: Deploy to GH Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
jobs:
9+
build-deploy:
10+
runs-on: ubuntu-latest
11+
12+
steps:
13+
- name: Checkout 🛎️
14+
uses: actions/checkout@master
15+
with:
16+
persist-credentials: false
17+
18+
- name: Install 🔧
19+
run: npm install
20+
21+
- name: Build 🏗️
22+
run: npm run demo:build
23+
env:
24+
NODE_ENV: production
25+
26+
- name: Deploy to GH Pages 🚀
27+
if: ${{ github.event_name != 'pull_request' }}
28+
uses: peaceiris/actions-gh-pages@v3
29+
with:
30+
github_token: ${{ secrets.GITHUB_TOKEN }}
31+
publish_dir: demo

‎.gitignore

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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+
.DS_Store
12+
dist
13+
dist-ssr
14+
coverage
15+
*.local
16+
17+
/cypress/videos/
18+
/cypress/screenshots/
19+
20+
# Editor directories and files
21+
.vscode/*
22+
!.vscode/extensions.json
23+
.idea
24+
*.suo
25+
*.ntvs*
26+
*.njsproj
27+
*.sln
28+
*.sw?
29+
30+
*.tsbuildinfo

‎README.md

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
## vue3-device-detect
2+
3+
[![Version](https://img.shields.io/npm/v/@basitcodeenv/vue3-device-detect.svg)](https://www.npmjs.com/package/@basitcodeenv/vue3-device-detect)
4+
[![License](https://img.shields.io/npm/l/@basitcodeenv/vue3-device-detect.svg)](https://github.com/basitcodeenv/vue3-device-detect/blob/main/LICENSE)
5+
[![vue](https://img.shields.io/badge/vue-2.7.14-brightgreen.svg)](https://github.com/vuejs/vue)
6+
[![GitHub last commit](https://img.shields.io/github/last-commit/basitcodeenv/vue3-device-detect.svg)](https://github.com/basitcodeenv/vue3-device-detect)
7+
[![Downloads](https://img.shields.io/npm/dm/@basitcodeenv/vue3-device-detect.svg)](https://npmcharts.com/compare/@basitcodeenv/vue3-device-detect?minimal=true)
8+
9+
Detect device type and render content based on device type
10+
11+
## Quickstart
12+
13+
Install using
14+
15+
```
16+
npm install @basitcodeenv/vue3-device-detect --save
17+
```
18+
19+
Then, initalize the plugin in the starting point of your app (most likely src/main.js):
20+
21+
```ts
22+
// main.ts
23+
import VueDeviceDetect from '@basitcodeenv/vue3-device-detect'
24+
Vue.use(vueDeviceDetect)
25+
```
26+
27+
This will globally register the components `DesktopView`, `MobileView` and others and you will be able to use those right away.
28+
29+
<!-- prettier-ignore -->
30+
```html
31+
<template>
32+
<DesktopView>
33+
<h1>This is rendered only in desktop browser</h1>
34+
</DesktopView>
35+
36+
<MobileView>
37+
<h1>This is rendered only on mobile</h1>
38+
</MobileView>
39+
</template>
40+
```
41+
42+
Build-in components:
43+
44+
AndroidView
45+
ChromeView
46+
ChromiumView
47+
ConsoleView
48+
DesktopView
49+
EdgeChromiumView
50+
EdgeLegacyView
51+
EdgeView
52+
ElectronView
53+
EmbeddedView
54+
FirefoxView
55+
IEView
56+
IOSView
57+
IPadView
58+
IPhoneView
59+
IPodView
60+
LinuxView
61+
MacOSView
62+
MIUIView
63+
MobileOnlyView
64+
MobileSafariView
65+
MobileView
66+
OperaView
67+
SafariView
68+
SamsungBrowserView
69+
SmartTVView
70+
TabletView
71+
WearableView
72+
WindowsView
73+
WinPhoneView
74+
YandexView
75+
76+
You can also determine through the built-in API
77+
78+
```ts
79+
// main.ts
80+
import { isMobile } from '@basitcodeenv/vue3-device-detect'
81+
```
82+
83+
## API
84+
85+
Properties:
86+
87+
| name | type | description |
88+
| ---------------- | ------- | --------------------------------------- |
89+
| isAndroid | boolean | The OS is `Android` |
90+
| isChrome | boolean | Browser is `Chrome` |
91+
| isChromium | boolean | Browser is `Chromium` |
92+
| isConsole | boolean | The device type is `console` |
93+
| isDesktop | boolean | The device type is `desktop` |
94+
| isEdge | boolean | Browser is `Edge` or `Edge Chromium` |
95+
| isEdgeChromium | boolean | Browser is `Edge Chromium` |
96+
| isEdgeLegacy | boolean | Browser is `Edge` |
97+
| isElectron | boolean | Browser is `Electron` |
98+
| isEmbedded | boolean | The device type is `embedded` |
99+
| isFirefox | boolean | Browser is `Firefox` |
100+
| isIE | boolean | Browser is `Internet Explorer` |
101+
| isIOS | boolean | The OS is `iOS` |
102+
| isIPad | boolean | is `iPad` |
103+
| isIPhone | boolean | is `iPhone` |
104+
| isIPod | boolean | is `iPod` |
105+
| isLinux | boolean | The OS is `Linux` |
106+
| isMacOS | boolean | The OS is `Mac OS` |
107+
| isMIUI | boolean | Browser is `MIUI Browser` |
108+
| isMobile | boolean | The device type is `mobile` or `tablet` |
109+
| isMobileOnly | boolean | The device type is `mobile` |
110+
| isMobileSafari | boolean | Browser is `Mobile Safari` |
111+
| isOpera | boolean | Browser is `Opera` |
112+
| isSafari | boolean | Browser is `Safari` |
113+
| isSamsungBrowser | boolean | Browser is `Samsung Browser` |
114+
| isSmartTV | boolean | The device type is `smarttv` |
115+
| isTablet | boolean | The device type is `tablet` |
116+
| isWearable | boolean | The device type is `wearable` |
117+
| isWindows | boolean | The OS is `Windows` |
118+
| isWinPhone | boolean | The OS is `Windows Phone` |
119+
| isYandex | boolean | Browser is `Yandex Browser` |
120+
121+
Functions:
122+
123+
| name | return type | description |
124+
| -------------- | ----------- | ------------------------------------------------------------------------ |
125+
| browserName | string | Return browser name |
126+
| browserVersion | string | Return browser version |
127+
| deviceModel | string | Return mobile device type (e.g `Nexus 5`) |
128+
| deviceType | string | Return device type (`mobile` or `tablet`) |
129+
| deviceVendor | string | Return mobile phone brand (e.g `LG`, `Apple iPhone` etc) |
130+
| engineName | string | Return browser engine name (e.g `Gecko` for Firefox, `Blink` for Chrome) |
131+
| engineVersion | string | Return browser engine version |
132+
| getUA | string | Return user agent |
133+
| osName | string | Return OS name |
134+
| osVersion | string | Return OS version |

‎env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎index.html

+13
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" href="/favicon.ico">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎lib/constants.ts

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const DeviceTypes = {
2+
CONSOLE: 'console',
3+
DESKTOP: undefined,
4+
EMBEDDED: 'embedded',
5+
MOBILE: 'mobile',
6+
SMART_TV: 'smarttv',
7+
TABLET: 'tablet',
8+
WEARABLE: 'wearable',
9+
}
10+
11+
const OSTypes = {
12+
ANDROID: 'Android',
13+
IOS: 'iOS',
14+
LINUX: 'Linux',
15+
MAC_OS: 'Mac OS',
16+
WINDOWS_PHONE: 'Windows Phone',
17+
WINDOWS: 'Windows',
18+
}
19+
20+
const BrowserTypes = {
21+
CHROME: 'Chrome',
22+
CHROMIUM: 'Chromium',
23+
EDGE_CHROMIUM: 'Edge Chromium',
24+
EDGE: 'Edge',
25+
FIREFOX: 'Firefox',
26+
IE: 'IE',
27+
INTERNET_EXPLORER: 'Internet Explorer',
28+
MIUI: 'MIUI Browser',
29+
MOBILE_SAFARI: 'Mobile Safari',
30+
OPERA: 'Opera',
31+
SAFARI: 'Safari',
32+
SAMSUNG_BROWSER: 'Samsung Browser',
33+
YANDEX: 'Yandex',
34+
}
35+
36+
export { DeviceTypes, OSTypes, BrowserTypes }

0 commit comments

Comments
 (0)