@bootcn-vue/core 0.0.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +132 -0
- package/package.json +18 -13
package/README.md
ADDED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
# @bootcn-vue/core
|
|
2
|
+
|
|
3
|
+
Core utilities and shared functions for the bootcn-vue component library.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@bootcn-vue/core)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
## 📚 Documentation
|
|
9
|
+
|
|
10
|
+
**[View Components & Examples](https://banavasi.github.io/Bootcn-vue/)** - Interactive Storybook
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
# Using npm
|
|
16
|
+
npm install @bootcn-vue/core
|
|
17
|
+
|
|
18
|
+
# Using pnpm
|
|
19
|
+
pnpm add @bootcn-vue/core
|
|
20
|
+
|
|
21
|
+
# Using yarn
|
|
22
|
+
yarn add @bootcn-vue/core
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## What's Included
|
|
26
|
+
|
|
27
|
+
This package provides core utilities used by all bootcn-vue components:
|
|
28
|
+
|
|
29
|
+
### `cn()` - Class Name Utility
|
|
30
|
+
|
|
31
|
+
A utility function for merging Tailwind CSS classes with Bootstrap classes. Built on top of `clsx` and `tailwind-merge`.
|
|
32
|
+
|
|
33
|
+
```typescript
|
|
34
|
+
import { cn } from "@bootcn-vue/core";
|
|
35
|
+
|
|
36
|
+
// Merge classes
|
|
37
|
+
cn("btn", "btn-primary", className);
|
|
38
|
+
|
|
39
|
+
// Conditional classes
|
|
40
|
+
cn("btn", {
|
|
41
|
+
"btn-primary": isPrimary,
|
|
42
|
+
"btn-secondary": !isPrimary,
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
// Override with tailwind-merge intelligence
|
|
46
|
+
cn("p-4", "p-2"); // → 'p-2' (conflicting classes merged intelligently)
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### `cva` - Class Variance Authority
|
|
50
|
+
|
|
51
|
+
Re-exports `cva` and types from `class-variance-authority` for creating variant-based component styles.
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
import { cva, type VariantProps } from "@bootcn-vue/core";
|
|
55
|
+
|
|
56
|
+
const buttonVariants = cva("btn", {
|
|
57
|
+
variants: {
|
|
58
|
+
variant: {
|
|
59
|
+
primary: "btn-primary",
|
|
60
|
+
secondary: "btn-secondary",
|
|
61
|
+
},
|
|
62
|
+
size: {
|
|
63
|
+
sm: "btn-sm",
|
|
64
|
+
lg: "btn-lg",
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
defaultVariants: {
|
|
68
|
+
variant: "primary",
|
|
69
|
+
size: "md",
|
|
70
|
+
},
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
type ButtonVariants = VariantProps<typeof buttonVariants>;
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Usage with CLI
|
|
77
|
+
|
|
78
|
+
This package is automatically installed when you run:
|
|
79
|
+
|
|
80
|
+
```bash
|
|
81
|
+
npx @bootcn-vue/cli init
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
The CLI will create a local `src/lib/utils.ts` file with the `cn()` function for you to use and customize.
|
|
85
|
+
|
|
86
|
+
## Direct Usage
|
|
87
|
+
|
|
88
|
+
You can also use this package directly in your Vue 3 project:
|
|
89
|
+
|
|
90
|
+
```vue
|
|
91
|
+
<script setup lang="ts">
|
|
92
|
+
import { cn } from "@bootcn-vue/core";
|
|
93
|
+
|
|
94
|
+
interface Props {
|
|
95
|
+
class?: string;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
const props = defineProps<Props>();
|
|
99
|
+
</script>
|
|
100
|
+
|
|
101
|
+
<template>
|
|
102
|
+
<div :class="cn('container', 'p-4', props.class)">
|
|
103
|
+
<slot />
|
|
104
|
+
</div>
|
|
105
|
+
</template>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## Dependencies
|
|
109
|
+
|
|
110
|
+
- `class-variance-authority` - Type-safe variant styling
|
|
111
|
+
- `clsx` - Conditional class names
|
|
112
|
+
- `tailwind-merge` - Intelligent class merging
|
|
113
|
+
|
|
114
|
+
## Peer Dependencies
|
|
115
|
+
|
|
116
|
+
- `vue` ^3.5.0
|
|
117
|
+
|
|
118
|
+
## Links
|
|
119
|
+
|
|
120
|
+
- **[GitHub Repository](https://github.com/banavasi/Bootcn-vue)**
|
|
121
|
+
- **[Documentation](https://banavasi.github.io/Bootcn-vue/)**
|
|
122
|
+
- **[Report Issues](https://github.com/banavasi/Bootcn-vue/issues)**
|
|
123
|
+
|
|
124
|
+
## Related Packages
|
|
125
|
+
|
|
126
|
+
- [@bootcn-vue/cli](https://www.npmjs.com/package/@bootcn-vue/cli) - CLI for adding components
|
|
127
|
+
- [@bootcn-vue/buttons](https://www.npmjs.com/package/@bootcn-vue/buttons) - Button components
|
|
128
|
+
- [@bootcn-vue/forms](https://www.npmjs.com/package/@bootcn-vue/forms) - Form components
|
|
129
|
+
|
|
130
|
+
## License
|
|
131
|
+
|
|
132
|
+
MIT © [Shashank Shandilya](https://github.com/banavasi)
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bootcn-vue/core",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Core utilities and shared
|
|
3
|
+
"version": "0.2.2",
|
|
4
|
+
"description": "Core utilities and shared functions for bootcn-vue component library",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"module": "./dist/index.js",
|
|
@@ -20,13 +20,6 @@
|
|
|
20
20
|
"dist",
|
|
21
21
|
"src"
|
|
22
22
|
],
|
|
23
|
-
"scripts": {
|
|
24
|
-
"build": "tsup",
|
|
25
|
-
"dev": "tsup --watch",
|
|
26
|
-
"clean": "rm -rf dist",
|
|
27
|
-
"type-check": "tsc --noEmit",
|
|
28
|
-
"lint": "eslint src --fix"
|
|
29
|
-
},
|
|
30
23
|
"dependencies": {
|
|
31
24
|
"class-variance-authority": "^0.7.1",
|
|
32
25
|
"clsx": "^2.1.1",
|
|
@@ -40,13 +33,18 @@
|
|
|
40
33
|
"vue": "^3.5.0"
|
|
41
34
|
},
|
|
42
35
|
"publishConfig": {
|
|
43
|
-
"access": "public"
|
|
36
|
+
"access": "public",
|
|
37
|
+
"provenance": true
|
|
44
38
|
},
|
|
45
39
|
"repository": {
|
|
46
40
|
"type": "git",
|
|
47
|
-
"url": "https://github.com/banavasi/
|
|
41
|
+
"url": "https://github.com/banavasi/Bootcn-vue.git",
|
|
48
42
|
"directory": "packages/core"
|
|
49
43
|
},
|
|
44
|
+
"homepage": "https://banavasi.github.io/Bootcn-vue/",
|
|
45
|
+
"bugs": {
|
|
46
|
+
"url": "https://github.com/banavasi/Bootcn-vue/issues"
|
|
47
|
+
},
|
|
50
48
|
"keywords": [
|
|
51
49
|
"vue",
|
|
52
50
|
"vue3",
|
|
@@ -55,5 +53,12 @@
|
|
|
55
53
|
"utilities"
|
|
56
54
|
],
|
|
57
55
|
"author": "Shashank Shandilya",
|
|
58
|
-
"license": "MIT"
|
|
59
|
-
|
|
56
|
+
"license": "MIT",
|
|
57
|
+
"scripts": {
|
|
58
|
+
"build": "tsup",
|
|
59
|
+
"dev": "tsup --watch",
|
|
60
|
+
"clean": "rm -rf dist",
|
|
61
|
+
"type-check": "tsc --noEmit",
|
|
62
|
+
"lint": "eslint src --fix"
|
|
63
|
+
}
|
|
64
|
+
}
|