Skip to content

Commit c840d9b

Browse files
richardhulbertrichardhulbert
committed
Updated TwButtonGroup.vue to use icons
improved Dark mode Fixed and updated documentation
1 parent 290842f commit c840d9b

File tree

9 files changed

+54
-31
lines changed

9 files changed

+54
-31
lines changed

‎demo/assets/index-fb2f02ba.js renamed to ‎demo/assets/index-79835c21.js

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/assets/index-869e2aea.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎demo/assets/index-cb8a3197.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77

88
<title>Vue 3 Tailwind Components</title>
9-
<script type="module" crossorigin src="./assets/index-fb2f02ba.js"></script>
10-
<link rel="stylesheet" href="./assets/index-869e2aea.css">
9+
<script type="module" crossorigin src="./assets/index-79835c21.js"></script>
10+
<link rel="stylesheet" href="./assets/index-cb8a3197.css">
1111
</head>
1212
<body class="">
1313
<div class="p-4 bg-white dark:bg-gray-800 dark:text-slate-50" id="app"></div>

‎package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue3-tailwind-components",
3-
"version": "0.3.3",
3+
"version": "0.3.5",
44
"description": "A library of Vue 3 components that use Tailwind",
55
"keywords": [
66
"vue3",
@@ -34,17 +34,18 @@
3434
"@fortawesome/vue-fontawesome": "^3.0.2",
3535
"@vueuse/core": "^10.2.0",
3636
"click-outside-vue3": "^4.0.1",
37+
"esbuild": "^0.21.4",
3738
"tailwindcss": "^3.2.4",
3839
"tailwindcss-animate": "^1.0.7",
3940
"vue": "^3.2.45"
4041
},
4142
"devDependencies": {
42-
"lodash": "^4.17.21",
4343
"@faker-js/faker": "^7.6.0",
4444
"@vitejs/plugin-vue": "^4.0.0",
4545
"autoprefixer": "^10.4.13",
46+
"lodash": "^4.17.21",
4647
"postcss": "^8.4.20",
4748
"tailwindcss": "^3.2.4",
48-
"vite": "^5.2.11"
49+
"vite": "^4.5.3"
4950
}
5051
}

‎src/App.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,12 @@ const buttonVariant = computed(() => {
6262
return buttonSquare.value ? 'square' : ''
6363
})
6464
const colors = [
65-
{label: 'Primary', value: 'primary'},
66-
{label: 'Secondary', value: 'secondary'},
67-
{label: 'Warning', value: 'warning'},
68-
{label: 'Success', value: 'success'},
69-
{label: 'Danger', value: 'danger'},
70-
{label: 'Info', value: 'info'}
65+
{label: 'Primary', value: 'primary', icon:'star'},
66+
{label: 'Secondary', value: 'secondary', icon:'dice-two'},
67+
{label: 'Warning', value: 'warning', icon:'triangle-exclamation'},
68+
{label: 'Success', value: 'success', icon:'circle-check'},
69+
{label: 'Danger', value: 'danger', icon:'radiation'},
70+
{label: 'Info', value: 'info', icon:'circle-info'}
7171
]
7272
7373
let eg_list = ref([])

‎src/components/buttonGroup/README.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
# Button Group
22

3-
This is a simple button group v-model should equal one value in the items array of objects.
3+
This is a simple button group. the v-model equals the selected value in the items array of objects. The array contains objects with a label and a value property with an optional icon property that is the Fontawsome name
44

55
```vue
66
<tw-button-group color="amber" :items="arrayOfItems" v-model="someValue" > ... </tw-button-group>
77
```
88
## Properties
99

10-
| Property | Type | Required | default | notes |
11-
|:------------|:-------:|:--------:|:---------:|:--------------------------------------------------------------------|
12-
| v-model | Boolean | yes | false | Whether rollout is shown |
13-
| color | String | no | 'primary' | The color scheme of the rollout |
14-
| items | Array | yes | [] | An array of name value objects `[{label:"A Label",value:"a343"}]` |
10+
| Property | Type | Required | default | notes |
11+
|:------------|:-------:|:--------:|:---------:|:-------------------------------------------------------------------------------|
12+
| v-model | Boolean | yes | false | The value of the selected item |
13+
| color | String | no | 'primary' | The color scheme of the button group |
14+
| items | Array | yes | [] | An array of name value objects `[{label:"A Label",value:"a343",icon:"circle"}]` |
1515

‎src/components/buttonGroup/TwButtonGroup.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const props = defineProps({
2424
})
2525
2626
const baseClass=computed(()=>{
27-
return `border-${props.color}-300 divide-${props.color}-300 text-${props.color}-700 dark:text-${props.color}-200`
27+
return `border-${props.color}-900 dark:border-${props.color}-400 divide-${props.color}-600 text-${props.color}-700 dark:text-${props.color}-200`
2828
})
2929
function handleClick(i){
3030
emit('update:modelValue', i)
@@ -34,7 +34,7 @@ function handleClick(i){
3434
<template>
3535
<div class="inline-flex -space-x-0 divide-x overflow-hidden rounded-lg border text-sm " :class="baseClass">
3636

37-
<tw-button-group-item :color="props.color" v-for="(item, index) in items" :key="index" @click="handleClick(item.value)" :label="item.label" :value="item.value" :selected-value="props.modelValue"></tw-button-group-item>
37+
<tw-button-group-item :color="props.color" v-for="(item, index) in items" :key="index" @click="handleClick(item.value)" :item="item" :value="item.value" :selected-value="props.modelValue"></tw-button-group-item>
3838

3939
</div>
4040
</template>

‎src/components/buttonGroup/TwButtonGroupItem.vue

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,44 @@
11
<script setup>
22
import {computed} from 'vue'
3+
import {TwIcon} from "@/components";
4+
35
const props=defineProps(
46
{
5-
label:String,
7+
item:{
8+
type:Object,
9+
default:{
10+
label:'Not set',
11+
value:0,
12+
icon:'gauge'
13+
}
14+
},
15+
616
value:{},
717
selectedValue:{},
818
color:{type:String, default:'primary'},
919
}
1020
)
1121
22+
const hasIcon = computed(()=>{
23+
return props.item.hasOwnProperty('icon')
24+
})
25+
1226
const selectedClass = computed(() => {
1327
return props.selectedValue === props.value? `bg-${props.color}-200 dark:bg-${props.color}-700 `:`hover:bg-${props.color}-100 dark:hover:bg-${props.color}-500`;
1428
})
1529
1630
</script>
1731

1832
<template>
19-
<div class="px-4 py-2 cursor-pointer" :class="selectedClass">{{ props.label }}</div>
33+
34+
35+
<div class="px-4 py-2 cursor-pointer" :class="selectedClass">
36+
<tw-icon class="mr-1" v-if="hasIcon" :icon="props.item.icon"></tw-icon>
37+
{{ props.item.label }}
38+
39+
</div>
40+
41+
2042
</template>
2143

2244
<style scoped>

0 commit comments

Comments
 (0)