@tak-ps/vue-tabler 4.12.0 → 4.13.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v4.13.0
+
+- :tada: Add PillGroup Component
+
+### v4.12.1
+
+- :rocket: Additional Light mode improvements
+
 ### v4.12.0
 
 - :rocket: Light mode support for TablerIconButton and TablerInput

package/components/IconButton.vue

@@ -49,18 +49,23 @@ const iconButtonStyle = computed(() => {
 }
 
 .custom-hover:not(.disabled) {
-    transition: background-color 0.15s ease, color 0.15s ease;
+    border: 1px solid transparent;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
 }
 
 [data-bs-theme='light'] .custom-hover:not(.disabled):hover,
-[data-bs-theme='light'] .custom-hover:not(.disabled):focus-visible {
-    background-color: var(--cloudtak-light, rgba(var(--tblr-primary-rgb), 0.08));
-    color: var(--tblr-body-color);
+[data-bs-theme='light'] .custom-hover:not(.disabled):focus-visible,
+[data-bs-theme='light'] .custom-hover:not(.disabled):focus-within {
+    border-radius: 6px;
+    border-color: color-mix(in srgb, var(--tblr-body-color) 18%, transparent);
+    background: color-mix(in srgb, var(--tblr-body-color) 8%, transparent);
 }
 
 [data-bs-theme='dark'] .custom-hover:not(.disabled):hover,
-[data-bs-theme='dark'] .custom-hover:not(.disabled):focus-visible {
-    background-color: var(--tblr-light);
-    color: var(--tblr-dark);
+[data-bs-theme='dark'] .custom-hover:not(.disabled):focus-visible,
+[data-bs-theme='dark'] .custom-hover:not(.disabled):focus-within {
+    border-radius: 6px;
+    border-color: color-mix(in srgb, var(--tblr-light) 30%, transparent);
+    background: color-mix(in srgb, var(--tblr-light) 12%, transparent);
 }
 </style>

package/components/PillGroup.vue

@@ -0,0 +1,91 @@
+<template>
+    <div
+        :class='groupClasses'
+        role='group'
+    >
+        <template
+            v-for='(option, i) in options'
+            :key='option.value'
+        >
+            <input
+                :id='inputId(option, i)'
+                type='radio'
+                class='btn-check'
+                :name='name'
+                autocomplete='off'
+                :checked='modelValue === option.value'
+                :disabled='disabled || option.disabled'
+                @click='emit("update:modelValue", option.value)'
+            >
+            <label
+                :for='inputId(option, i)'
+                type='button'
+                :class='buttonClasses'
+            >
+                <slot
+                    name='option'
+                    :option='option'
+                    :index='i'
+                    :active='modelValue === option.value'
+                >
+                    {{ option.label }}
+                </slot>
+            </label>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from 'vue';
+
+const uid = useId();
+
+export interface PillGroupOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export interface PillGroupProps {
+    modelValue: string;
+    options: PillGroupOption[];
+    name?: string;
+    rounded?: boolean;
+    fullWidth?: boolean;
+    size?: 'sm' | 'default';
+    disabled?: boolean;
+    padding?: string;
+}
+
+const props = withDefaults(defineProps<PillGroupProps>(), {
+    name: 'pill-group',
+    rounded: true,
+    fullWidth: true,
+    size: 'sm',
+    disabled: false,
+    padding: 'px-2 py-2',
+});
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void;
+}>();
+
+function inputId(option: PillGroupOption, index: number): string {
+    return `${props.name}-${uid}-${option.value}-${index}`;
+}
+
+const groupClasses = computed(() => {
+    const classes: string[] = ['btn-group'];
+    if (props.rounded) classes.push('round');
+    if (props.fullWidth) classes.push('w-100');
+    if (props.padding) classes.push(props.padding);
+    if (props.size === 'sm' && !props.rounded) classes.push('btn-group-sm');
+    return classes;
+});
+
+const buttonClasses = computed(() => {
+    const classes: string[] = ['btn'];
+    if (props.size === 'sm') classes.push('btn-sm');
+    return classes;
+});
+</script>

package/lib.ts

@@ -30,5 +30,6 @@ export { default as TablerEpoch } from './components/Epoch.vue';
 export { default as TablerEpochRange } from './components/EpochRange.vue';
 export { default as TablerMarkdown } from './components/Markdown.vue';
 export { default as TablerDelete } from './components/Delete.vue';
+export { default as TablerPillGroup } from './components/PillGroup.vue';
 export { default as TablerSchema } from './components/Schema.vue';
 export { default as TablerSchemaBuilder } from './components/SchemaBuilder.vue';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "4.12.0",
+    "version": "4.13.0",
     "lib": "lib.ts",
     "main": "lib.ts",
     "module": "lib.ts",

package/test/IconButton.spec.ts

@@ -45,15 +45,20 @@ describe('TablerIconButton', () => {
         expect(wrapper.get('div').classes()).not.toContain('custom-hover')
     })
 
-    it('uses CloudTAK light hover colors in light mode and inverted colors in dark mode', () => {
+    it('uses theme-derived hover colors and borders instead of fixed values', () => {
+        expect(iconButtonSource).toContain('transition: background-color 0.15s ease, border-color 0.15s ease;')
+        expect(iconButtonSource).toContain('border: 1px solid transparent;')
+
         expect(iconButtonSource).toContain("[data-bs-theme='light'] .custom-hover:not(.disabled):hover,")
-        expect(iconButtonSource).toContain("[data-bs-theme='light'] .custom-hover:not(.disabled):focus-visible {")
-        expect(iconButtonSource).toContain('background-color: var(--cloudtak-light, rgba(var(--tblr-primary-rgb), 0.08));')
-        expect(iconButtonSource).toContain('color: var(--tblr-body-color);')
+        expect(iconButtonSource).toContain("[data-bs-theme='light'] .custom-hover:not(.disabled):focus-visible,")
+        expect(iconButtonSource).toContain("[data-bs-theme='light'] .custom-hover:not(.disabled):focus-within {")
+        expect(iconButtonSource).toContain('border-color: color-mix(in srgb, var(--tblr-body-color) 18%, transparent);')
+        expect(iconButtonSource).toContain('background: color-mix(in srgb, var(--tblr-body-color) 8%, transparent);')
 
         expect(iconButtonSource).toContain("[data-bs-theme='dark'] .custom-hover:not(.disabled):hover,")
-        expect(iconButtonSource).toContain("[data-bs-theme='dark'] .custom-hover:not(.disabled):focus-visible {")
-        expect(iconButtonSource).toContain('background-color: var(--tblr-light);')
-        expect(iconButtonSource).toContain('color: var(--tblr-dark);')
+        expect(iconButtonSource).toContain("[data-bs-theme='dark'] .custom-hover:not(.disabled):focus-visible,")
+        expect(iconButtonSource).toContain("[data-bs-theme='dark'] .custom-hover:not(.disabled):focus-within {")
+        expect(iconButtonSource).toContain('border-color: color-mix(in srgb, var(--tblr-light) 30%, transparent);')
+        expect(iconButtonSource).toContain('background: color-mix(in srgb, var(--tblr-light) 12%, transparent);')
     })
 })

package/test/PillGroup.spec.ts

@@ -0,0 +1,149 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PillGroup from '../components/PillGroup.vue'
+
+const baseOptions = [
+    { value: 'a', label: 'Alpha' },
+    { value: 'b', label: 'Beta' },
+    { value: 'c', label: 'Gamma' },
+]
+
+describe('TablerPillGroup', () => {
+    it('renders all options as radio inputs with labels', () => {
+        const wrapper = mount(PillGroup, {
+            props: { modelValue: 'a', options: baseOptions },
+        })
+
+        const inputs = wrapper.findAll('input[type="radio"]')
+        const labels = wrapper.findAll('label')
+
+        expect(inputs).toHaveLength(3)
+        expect(labels).toHaveLength(3)
+        expect(labels[0].text()).toBe('Alpha')
+        expect(labels[1].text()).toBe('Beta')
+        expect(labels[2].text()).toBe('Gamma')
+    })
+
+    it('checks the input matching modelValue', () => {
+        const wrapper = mount(PillGroup, {
+            props: { modelValue: 'b', options: baseOptions },
+        })
+
+        const inputs = wrapper.findAll('input[type="radio"]')
+        expect((inputs[0].element as HTMLInputElement).checked).toBe(false)
+        expect((inputs[1].element as HTMLInputElement).checked).toBe(true)
+        expect((inputs[2].element as HTMLInputElement).checked).toBe(false)
+    })
+
+    it('emits update:modelValue on click', async () => {
+        const wrapper = mount(PillGroup, {
+            props: { modelValue: 'a', options: baseOptions },
+        })
+
+        await wrapper.findAll('input[type="radio"]')[2].trigger('click')
+        expect(wrapper.emitted('update:modelValue')).toEqual([['c']])
+    })
+
+    it('applies rounded and fullWidth classes by default', () => {
+        const wrapper = mount(PillGroup, {
+            props: { modelValue: 'a', options: baseOptions },
+        })
+
+        const group = wrapper.find('[role="group"]')
+        expect(group.classes()).toContain('btn-group')
+        expect(group.classes()).toContain('round')
+        expect(group.classes()).toContain('w-100')
+    })
+
+    it('omits round and w-100 classes when disabled', () => {
+        const wrapper = mount(PillGroup, {
+            props: { modelValue: 'a', options: baseOptions, rounded: false, fullWidth: false },
+        })
+
+        const group = wrapper.find('[role="group"]')
+        expect(group.classes()).toContain('btn-group')
+        expect(group.classes()).not.toContain('round')
+        expect(group.classes()).not.toContain('w-100')
+    })
+
+    it('applies btn-sm class when size is sm', () => {
+        const wrapper = mount(PillGroup, {
+            props: { modelValue: 'a', options: baseOptions, size: 'sm' },
+        })
+
+        const label = wrapper.find('label')
+        expect(label.classes()).toContain('btn')
+        expect(label.classes()).toContain('btn-sm')
+    })
+
+    it('does not apply btn-sm when size is default', () => {
+        const wrapper = mount(PillGroup, {
+            props: { modelValue: 'a', options: baseOptions, size: 'default' },
+        })
+
+        const label = wrapper.find('label')
+        expect(label.classes()).toContain('btn')
+        expect(label.classes()).not.toContain('btn-sm')
+    })
+
+    it('disables all inputs when disabled prop is true', () => {
+        const wrapper = mount(PillGroup, {
+            props: { modelValue: 'a', options: baseOptions, disabled: true },
+        })
+
+        wrapper.findAll('input[type="radio"]').forEach(input => {
+            expect((input.element as HTMLInputElement).disabled).toBe(true)
+        })
+    })
+
+    it('disables individual options', () => {
+        const opts = [
+            { value: 'a', label: 'A' },
+            { value: 'b', label: 'B', disabled: true },
+            { value: 'c', label: 'C' },
+        ]
+        const wrapper = mount(PillGroup, {
+            props: { modelValue: 'a', options: opts },
+        })
+
+        const inputs = wrapper.findAll('input[type="radio"]')
+        expect((inputs[0].element as HTMLInputElement).disabled).toBe(false)
+        expect((inputs[1].element as HTMLInputElement).disabled).toBe(true)
+        expect((inputs[2].element as HTMLInputElement).disabled).toBe(false)
+    })
+
+    it('uses custom name prop for radio group', () => {
+        const wrapper = mount(PillGroup, {
+            props: { modelValue: 'a', options: baseOptions, name: 'my-group' },
+        })
+
+        wrapper.findAll('input[type="radio"]').forEach(input => {
+            expect(input.attributes('name')).toBe('my-group')
+        })
+    })
+
+    it('applies custom padding', () => {
+        const wrapper = mount(PillGroup, {
+            props: { modelValue: 'a', options: baseOptions, padding: 'p-1' },
+        })
+
+        const group = wrapper.find('[role="group"]')
+        expect(group.classes()).toContain('p-1')
+        expect(group.classes()).not.toContain('px-2')
+    })
+
+    it('supports scoped option slot', () => {
+        const wrapper = mount(PillGroup, {
+            props: { modelValue: 'b', options: baseOptions },
+            slots: {
+                option: `<template #option="{ option, active }">
+                    <span class="custom">{{ option.label }} {{ active ? 'ON' : 'OFF' }}</span>
+                </template>`,
+            },
+        })
+
+        const labels = wrapper.findAll('label')
+        expect(labels[0].text()).toContain('Alpha OFF')
+        expect(labels[1].text()).toContain('Beta ON')
+    })
+})