1
// Mixins
2
import { Registrable, inject as RegistrableInject } from '../registrable'
3

4
// Utilities
5
import { ExtractVue } from '../../util/mixins'
6
import { VueConstructor } from 'vue'
7
import { PropValidator } from 'vue/types/options'
8

9
export type Groupable<T extends string, C extends VueConstructor | null = null> = VueConstructor<ExtractVue<Registrable<T, C>> & {
10
  activeClass: string
11
  isActive: boolean
12
  disabled: boolean
13
  groupClasses: object
14
  toggle (): void
15
}>
16

17
export function factory<T extends string, C extends VueConstructor | null = null> (
18
  namespace: T,
19
  child?: string,
20
  parent?: string
21 1
): Groupable<T, C> {
22 1
  return RegistrableInject<T, C>(namespace, child, parent).extend({
23
    name: 'groupable',
24

25
    props: {
26
      activeClass: {
27
        type: String,
28 1
        default (): string | undefined {
29 1
          if (!this[namespace]) return undefined
30

31 1
          return this[namespace].activeClass
32
        },
33
      } as any as PropValidator<string>,
34
      disabled: Boolean,
35
    },
36

37 1
    data () {
38 1
      return {
39
        isActive: false,
40
      }
41
    },
42

43
    computed: {
44 1
      groupClasses (): object {
45 1
        if (!this.activeClass) return {}
46

47 1
        return {
48
          [this.activeClass]: this.isActive,
49
        }
50
      },
51
    },
52

53 1
    created () {
54 1
      this[namespace] && (this[namespace] as any).register(this)
55
    },
56

57 1
    beforeDestroy () {
58 1
      this[namespace] && (this[namespace] as any).unregister(this)
59
    },
60

61
    methods: {
62 1
      toggle () {
63 1
        this.$emit('change')
64
      },
65
    },
66
  })
67
}
68

69
/* eslint-disable-next-line @typescript-eslint/no-redeclare */
70 1
const Groupable = factory('itemGroup')
71

72
export default Groupable

Read our documentation on viewing source code .

Loading