@xy-planning-network/trees 0.2.63 → 0.3.4
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 +103 -0
- package/config/tailwind.config.js +56 -0
- package/config/theme/animation.js +3 -0
- package/config/theme/colors.js +17 -0
- package/config/theme/fontFamily.js +4 -0
- package/config/theme/index.js +5 -0
- package/dist/trees.esm.js +63 -66
- package/dist/trees.min.js +2 -2
- package/dist/trees.ssr.js +63 -66
- package/package.json +7 -3
- package/src/index.css +147 -0
- package/src/lib-components/forms/BaseInput.vue +1 -1
- package/src/lib-components/forms/Checkbox.vue +4 -8
- package/src/lib-components/forms/InputHelp.vue +1 -1
- package/src/lib-components/forms/InputLabel.vue +1 -1
- package/src/lib-components/forms/MultiCheckboxes.vue +2 -2
- package/src/lib-components/forms/Radio.vue +2 -2
- package/src/lib-components/forms/Select.vue +8 -5
- package/src/lib-components/forms/TextArea.vue +1 -1
- package/src/lib-components/forms/YesOrNoRadio.vue +4 -6
- package/src/lib-components/layout/DateFilter.vue +2 -1
- package/src/lib-components/layout/SidebarLayout.vue +7 -7
- package/src/lib-components/layout/StackedLayout.vue +6 -6
- package/src/lib-components/lists/Cards.vue +1 -1
- package/src/lib-components/lists/StaticTable.vue +3 -3
- package/src/lib-components/lists/Table.vue +3 -3
- package/src/lib-components/navigation/ActionsDropdown.vue +2 -2
- package/src/lib-components/navigation/Paginator.vue +5 -5
- package/src/lib-components/navigation/Tabs.vue +4 -4
- package/src/lib-components/overlays/Slideover.vue +4 -3
package/README.md
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
# Vue the Trees
|
|
2
2
|
|
|
3
3
|
## What's Trees
|
|
4
|
+
|
|
4
5
|
Trees is our attempt at unifying the frontend code we've written to power a small handful of web applications. We prefer the slower method of walking the [trails](https://github.com/xy-planning-network/trails), smelling the trees, and staying closer to the dirt than something speedier on the road. This bad boy is just getting of the ground and will be in v0 for the foreseeable future.
|
|
5
6
|
|
|
6
7
|
## What needs to be done?
|
|
8
|
+
|
|
7
9
|
- [x] Skeleton for NPM Component Library
|
|
8
10
|
- [x] Button component
|
|
9
11
|
- [x] Form input (checkbox, input, select, textarea) components
|
|
@@ -25,11 +27,112 @@ Trees is our attempt at unifying the frontend code we've written to power a smal
|
|
|
25
27
|
- [ ] Make library types links in component detail view
|
|
26
28
|
- [ ] Add table component example that uses ActionsDropdown and handles emitted event
|
|
27
29
|
- [ ] Bump to new version of vue-cli and bump postcss -> 8
|
|
30
|
+
- [ ] Improve form element disabled and error states
|
|
31
|
+
- [ ] Line up buttons and badges with design system
|
|
28
32
|
|
|
29
33
|
## What needs to be fixed?
|
|
34
|
+
|
|
30
35
|
- [x] Ensure flatpickr is picked up on build
|
|
31
36
|
- [ ] Select install for globally available components
|
|
32
37
|
- [ ] Make sure components have names in devtools
|
|
33
38
|
- [ ] Look into forcing tables to dropdown when actions open up in hidden area
|
|
34
39
|
- [ ] Fix select placeholder only showing up in dropdown
|
|
35
40
|
- [ ] DateFilter input heights is not consistent. Make select match datepicker.
|
|
41
|
+
|
|
42
|
+
## Roadmap
|
|
43
|
+
|
|
44
|
+
- [ ] move to vite for building the dev site, library, and possible storybook
|
|
45
|
+
- [ ] consider implementing storybook using vite as the bundler
|
|
46
|
+
- [ ] refactor componentes away from class decorators to setup sugar
|
|
47
|
+
|
|
48
|
+
## Usage
|
|
49
|
+
|
|
50
|
+
### Installation
|
|
51
|
+
|
|
52
|
+
Install trees and mitt
|
|
53
|
+
|
|
54
|
+
```sh
|
|
55
|
+
npm i @xy-planning-network/trees mitt
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Enable as a Vue plugin
|
|
59
|
+
|
|
60
|
+
This example installs all components of Trees, which may not be necessary for all projects. Assumes you have a vue 3 project with tailwind created.
|
|
61
|
+
|
|
62
|
+
**Establish global types for VueBus and Flashes in global.d.ts**
|
|
63
|
+
|
|
64
|
+
```ts
|
|
65
|
+
// global.d.ts
|
|
66
|
+
|
|
67
|
+
import { Emitter } from "mitt";
|
|
68
|
+
|
|
69
|
+
declare global {
|
|
70
|
+
interface Window {
|
|
71
|
+
Flashes: Array<{ message: string }>;
|
|
72
|
+
VueBus: Emitter;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
**Initialize trees components in main.ts**
|
|
78
|
+
|
|
79
|
+
```ts
|
|
80
|
+
// main.ts
|
|
81
|
+
import Vue, { createApp } from "vue";
|
|
82
|
+
import Mitt from "mitt";
|
|
83
|
+
import Trees from "@xy-planning-network/trees";
|
|
84
|
+
import HelloWorld from "@/components/HelloWorld.vue";
|
|
85
|
+
|
|
86
|
+
// import your project's main stylesheet
|
|
87
|
+
import "@/main.css";
|
|
88
|
+
|
|
89
|
+
// initialize the app
|
|
90
|
+
const app = createApp(HelloWorld);
|
|
91
|
+
|
|
92
|
+
// initialize mitt on VueBus
|
|
93
|
+
window.VueBus = mitt();
|
|
94
|
+
|
|
95
|
+
// use all of Trees as a vue plugin
|
|
96
|
+
app.use(Trees);
|
|
97
|
+
|
|
98
|
+
// mount the application
|
|
99
|
+
app.mount("#vue-app");
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
**Initialize styles in main.css**
|
|
103
|
+
|
|
104
|
+
```css
|
|
105
|
+
/* main.css */
|
|
106
|
+
|
|
107
|
+
/* import trees base styles */
|
|
108
|
+
@import "@xy-planning-network/trees/src/index.css";
|
|
109
|
+
|
|
110
|
+
/* additional tailwind styles */
|
|
111
|
+
@layer components {
|
|
112
|
+
.xy-example {
|
|
113
|
+
@apply inline-flex justify-center items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
**Include Inter Var in html template**
|
|
119
|
+
|
|
120
|
+
```html
|
|
121
|
+
<head>
|
|
122
|
+
<link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
|
|
123
|
+
</head>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
**Merge with the trees tailwind.cofig.js**
|
|
127
|
+
|
|
128
|
+
Note you may need a deep merge utility depending on the depth of properties you plan to override.
|
|
129
|
+
|
|
130
|
+
```js
|
|
131
|
+
/* eslint-disable */
|
|
132
|
+
const treesConfig = require("@xy-planning-network/trees/config/tailwind.config");
|
|
133
|
+
module.exports = {
|
|
134
|
+
...treesConfig,
|
|
135
|
+
mode: "jit", // Optional
|
|
136
|
+
purge: [...treesConfig.purge, ...["./src/**/*.vue"]],
|
|
137
|
+
};
|
|
138
|
+
```
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
const path = require("path");
|
|
3
|
+
const colors = require("tailwindcss/colors");
|
|
4
|
+
const treesTheme = require("./theme");
|
|
5
|
+
|
|
6
|
+
module.exports = {
|
|
7
|
+
purge: [path.resolve(__dirname, "../src/lib-components/**/*.vue")],
|
|
8
|
+
variants: {
|
|
9
|
+
opacity: ["disabled"],
|
|
10
|
+
cursor: ["disabled"],
|
|
11
|
+
extend: {
|
|
12
|
+
backgroundColor: ["active"],
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
plugins: [
|
|
16
|
+
require("@tailwindcss/aspect-ratio"),
|
|
17
|
+
require("@tailwindcss/forms"),
|
|
18
|
+
require("@tailwindcss/line-clamp"),
|
|
19
|
+
require("@tailwindcss/typography")({
|
|
20
|
+
modifiers: ["sm", "lg", "xl"],
|
|
21
|
+
}),
|
|
22
|
+
],
|
|
23
|
+
theme: {
|
|
24
|
+
container: {
|
|
25
|
+
center: true,
|
|
26
|
+
},
|
|
27
|
+
extend: {
|
|
28
|
+
animation: treesTheme.animation,
|
|
29
|
+
colors: {
|
|
30
|
+
transparent: "transparent",
|
|
31
|
+
current: "currentColor",
|
|
32
|
+
...colors,
|
|
33
|
+
...treesTheme.colors,
|
|
34
|
+
},
|
|
35
|
+
fontFamily: treesTheme.fontFamily,
|
|
36
|
+
typography: (theme) => {
|
|
37
|
+
return {
|
|
38
|
+
DEFAULT: {
|
|
39
|
+
css: {
|
|
40
|
+
color: theme("colors.gray.900"),
|
|
41
|
+
a: {
|
|
42
|
+
color: theme("colors.xy-blue.DEFAULT"),
|
|
43
|
+
"&:hover": {
|
|
44
|
+
color: theme("colors.blue.700"),
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
"h2, h3, h4": {
|
|
48
|
+
color: theme("colors.gray.900"),
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
};
|