@kokoccc/vuetify 1.0.1

package/src/mixins/proxyable/__tests__/proxyable.spec.ts

@@ -0,0 +1,65 @@
+import Proxyable, { factory as Proxy } from '../'
+import {
+  mount,
+  MountOptions,
+  Wrapper,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+
+describe('proxyable.ts', () => {
+  enableAutoUnmount(afterEach)
+
+  const Mock = {
+    mixins: [Proxyable],
+    template: '<div></div>',
+  }
+
+  type Instance = InstanceType<typeof Mock>
+  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+
+  beforeEach(() => {
+    mountFunction = (options?: MountOptions<Instance>) => {
+      return mount(Mock, options)
+    }
+  })
+
+  it('should watch prop and emit event', async () => {
+    const wrapper = mountFunction({
+      props: { modelValue: 'foo' },
+    })
+
+    expect(wrapper.vm.internalValue).toBe('foo')
+
+    // Change by prop
+    await wrapper.setProps({ modelValue: 'bar' })
+
+    expect(wrapper.vm.internalValue).toBe('bar')
+    expect(wrapper.emitted()).toEqual({})
+
+    // Change internal
+    wrapper.vm.internalValue = 'fizzbuzz'
+
+    expect(wrapper.vm.internalValue).toBe('fizzbuzz')
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['fizzbuzz'])
+  })
+
+  it('should use provided prop and event arguments', async () => {
+    const wrapper = mount({
+      mixins: [Proxy('input', 'update:input-value')],
+      template: '<div></div>',
+    }, {
+      props: {
+        input: 'foo',
+      },
+    })
+
+    expect(wrapper.vm.input).toBe('foo')
+
+    wrapper.vm.internalValue = 'bar'
+
+    expect(wrapper.emitted('update:input-value')).toBeTruthy()
+    expect(wrapper.emitted('update:input-value')?.[0]).toEqual(['bar'])
+  })
+})

package/src/mixins/proxyable/index.ts

@@ -0,0 +1,57 @@
+import { defineComponent, Component, App } from 'vue'
+
+export type Proxyable<T extends string = 'value'> = Component<App & {
+  internalLazyValue: unknown
+  internalValue: unknown
+} & Record<T, any>>
+
+export function factory<T extends string = 'value'> (prop?: T, event?: string): Proxyable<T>
+export function factory (
+  prop = 'modelValue',
+  event = 'update:modelValue'
+) {
+  return defineComponent({
+    name: 'proxyable',
+
+    props: {
+      [prop]: {
+        required: false,
+      },
+    },
+
+    data () {
+      return {
+        internalLazyValue: this[prop] as unknown,
+      }
+    },
+
+    computed: {
+      internalValue: {
+        get (): unknown {
+          return this.internalLazyValue
+        },
+        set (val: any) {
+          if (val === this.internalLazyValue) return
+
+          this.internalLazyValue = val
+
+          // Don't emit events if component is being destroyed
+          if (!this.$.isUnmounted) {
+            this.$emit(event, val);
+          }
+        },
+      },
+    },
+
+    watch: {
+      [prop] (val) {
+        this.internalLazyValue = val
+      },
+    },
+  })
+}
+
+/* eslint-disable-next-line @typescript-eslint/no-redeclare */
+const Proxyable = factory()
+
+export default Proxyable

package/src/mixins/registrable/__tests__/registrable.spec.ts

@@ -0,0 +1,31 @@
+import { inject as RegistrableInject, provide as RegistrableProvide } from '../'
+import {
+  mount,
+  MountingOptions,
+  VueWrapper,
+} from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+describe('registrable.ts', () => {
+  it('should inject registrable', () => {
+    const Mock = defineComponent({
+      extends: RegistrableInject('test'),
+      render: () => null,
+    })
+
+    const wrapper = mount(Mock)
+
+    expect(wrapper.vm.test).toBeDefined()
+  })
+
+  it('should provide registrable', () => {
+    const Mock = defineComponent({
+      mixins: [RegistrableProvide('test')],
+      render: () => null,
+    })
+
+    const wrapper = mount(Mock)
+
+    expect(wrapper.vm.$options.provide).toBeDefined()
+  })
+})

package/src/mixins/registrable/index.ts

@@ -0,0 +1,48 @@
+import {defineComponent} from 'vue'
+import { Component } from 'vue/types/vue'
+import { consoleWarn } from '../../util/console'
+
+function generateWarning (child: string, parent: string) {
+  return () => consoleWarn(`The ${child} component must be used inside a ${parent}`)
+}
+
+export type Registrable<T extends string, C extends Component | null = null> = Component<Vue & {
+  [K in T]: C extends Component ? InstanceType<C> : {
+    register (...props: any[]): void
+    unregister (self: any): void
+  }
+}>
+
+export function inject<
+  T extends string, C extends Component | null = null
+> (namespace: T, child?: string, parent?: string): Registrable<T, C> {
+  const defaultImpl = child && parent ? {
+    register: generateWarning(child, parent),
+    unregister: generateWarning(child, parent),
+  } : null
+
+  return defineComponent({
+    name: 'registrable-inject',
+
+    inject: {
+      [namespace]: {
+        default: defaultImpl,
+      },
+    },
+  })
+}
+
+export function provide (namespace: string, self = false) {
+  return defineComponent({
+    name: 'registrable-provide',
+
+    provide (): object {
+      return {
+        [namespace]: self ? this : {
+          register: (this as any).register,
+          unregister: (this as any).unregister,
+        },
+      }
+    },
+  })
+}

package/src/mixins/returnable/index.ts

@@ -0,0 +1,34 @@
+import {defineComponent} from 'vue'
+
+/* @vue/component */
+export default defineComponent({
+  name: 'returnable',
+
+  props: {
+    returnValue: null as any,
+  },
+
+  data: () => ({
+    isActive: false,
+    originalValue: null as any,
+  }),
+
+  watch: {
+    isActive (val) {
+      if (val) {
+        this.originalValue = this.returnValue
+      } else {
+        this.$emit('update:return-value', this.originalValue)
+      }
+    },
+  },
+
+  methods: {
+    save (value: any) {
+      this.originalValue = value
+      setTimeout(() => {
+        this.isActive = false
+      })
+    },
+  },
+})

package/src/mixins/rippleable/__tests__/__snapshots__/rippleable.spec.ts.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rippleable.ts should match snapshot 1`] = `
+<div class="v-input--selection-controls__ripple">
+</div>
+`;

package/src/mixins/rippleable/__tests__/rippleable.spec.ts

@@ -0,0 +1,29 @@
+import Rippleable from '../'
+import { mount, MountingOptions, VueWrapper } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+describe('rippleable.ts', () => {
+  const Mock = defineComponent({
+    extends: Rippleable,
+    render () {
+      return this.genRipple()
+    },
+  })
+
+  type Instance = InstanceType<typeof Mock>;
+  let mountFunction: (
+    options?: MountingOptions<Instance>
+  ) => VueWrapper<Instance>
+
+  beforeEach(() => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
+      return mount(Mock, options)
+    }
+  })
+
+  it('should match snapshot', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

package/src/mixins/rippleable/index.ts

@@ -0,0 +1,41 @@
+// Directives
+import ripple from '../../directives/ripple'
+
+// Types
+import Vue, { VNode, VNodeData, VNodeDirective, defineComponent, withDirectives, h } from 'vue'
+
+export default defineComponent({
+  name: 'rippleable',
+
+  directives: { ripple },
+
+  props: {
+    ripple: {
+      type: [Boolean, Object],
+      default: true,
+    },
+  },
+
+  methods: {
+    genRipple (data: VNodeData = {}): VNode | null {
+      if (!this.ripple) return null
+
+      data.class = 'v-input--selection-controls__ripple'
+
+      const node = h('div', data)
+
+      const directives = data.directives || []
+      delete data.directives
+
+      return withDirectives(node, [
+        ...(directives),
+        [
+          ripple,
+          { center: true },
+          '',
+          {}
+        ]
+      ])
+    },
+  },
+})

package/src/mixins/roundable/__tests__/roundable.spec.ts

@@ -0,0 +1,40 @@
+import { defineComponent, h } from 'vue'
+import Roundable from '../'
+import {
+  mount,
+  MountOptions,
+  Wrapper,
+} from '@vue/test-utils'
+
+describe('roundable.ts', () => {
+  const Mock = defineComponent({
+    mixins: [Roundable],
+    render () {
+      return h('div', {
+        class: this.roundedClasses,
+      })
+    },
+  })
+
+  type Instance = InstanceType<typeof Mock>
+  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  beforeEach(() => {
+    mountFunction = (options?: MountOptions<Instance>) => {
+      return mount(Mock, options)
+    }
+  })
+
+  it.each([
+    [undefined, {}],
+    [{ tile: true }, { 'rounded-0': true }],
+    [{ rounded: true, tile: true }, { 'rounded-0': true }],
+    [{ rounded: '0' }, { 'rounded-0': true }],
+    [{ rounded: true }, { rounded: true }],
+    [{ rounded: false }, {}],
+    [{ rounded: 'tr-xl br-lg' }, { 'rounded-tr-xl rounded-br-lg': true }],
+  ])('should return correct rounded classes', (propsData, expected: any) => {
+    const wrapper = mountFunction({ props: propsData })
+
+    expect(wrapper.vm.roundedClasses).toEqual(expected)
+  })
+})

package/src/mixins/roundable/index.ts

@@ -0,0 +1,36 @@
+import {defineComponent} from 'vue'
+
+/* @vue/component */
+export default defineComponent({
+  name: 'roundable',
+
+  props: {
+    rounded: [Boolean, String],
+    tile: Boolean,
+  },
+
+  computed: {
+    roundedClasses (): Record<string, boolean> {
+      const composite = []
+      const rounded = typeof this.rounded === 'string'
+        ? String(this.rounded)
+        : this.rounded === true
+
+      if (this.tile) {
+        composite.push('rounded-0')
+      } else if (typeof rounded === 'string') {
+        const values = rounded.split(' ')
+
+        for (const value of values) {
+          composite.push(`rounded-${value}`)
+        }
+      } else if (rounded) {
+        composite.push('rounded')
+      }
+
+      return composite.length > 0 ? {
+        [composite.join(' ')]: true,
+      } : {}
+    },
+  },
+})

package/src/mixins/routable/__tests__/routable.spec.ts

@@ -0,0 +1,105 @@
+import Routable from '../'
+import { mount, Wrapper } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { nextTick } from 'vue'
+
+describe('routable.ts', () => {
+  let mountFunction: (options?: object) => Wrapper<any>
+  let router: any
+
+  beforeEach(() => {
+    router = createRouter({
+      history: createWebHistory(),
+      routes: [
+        { path: '/', component: { template: '<div>Home</div>' } },
+        { path: '/foo', component: { template: '<div>Foo</div>' } },
+      ],
+    })
+
+    mountFunction = (options = {}) => {
+      return mount({
+        mixins: [Routable],
+        props: {
+          activeClass: {
+            default: 'active',
+          },
+          exactActiveClass: {
+            default: 'exact-active',
+          },
+        },
+        template: '<div ref="link" :class="classes"></div>',
+      }, {
+        global: {
+          plugins: [router],
+        },
+        ...options,
+      })
+    }
+  })
+
+  it('should have correct computed properties', async () => {
+    const wrapper = mountFunction({
+      props: {
+        to: '/',
+      },
+    })
+
+    expect(wrapper.vm.isLink).toBeTruthy() // isLink returns the 'to' value, which is truthy
+    expect(wrapper.vm.isClickable).toBe(true)
+  })
+
+  it('should have correct classes computed property', async () => {
+    const wrapper = mountFunction({
+      props: {
+        to: '/',
+        activeClass: 'custom-active',
+      },
+    })
+
+    expect(wrapper.vm.classes).toBeDefined()
+  })
+
+  it('should handle disabled state', async () => {
+    const wrapper = mountFunction({
+      props: {
+        to: '/',
+        disabled: true,
+      },
+    })
+
+    expect(wrapper.vm.isClickable).toBe(false)
+  })
+
+  it('should handle notALink prop', async () => {
+    const wrapper = mountFunction({
+      props: {
+        to: '/',
+        notALink: true,
+      },
+    })
+
+    expect(wrapper.vm.isClickable).toBe(false)
+  })
+
+  it('should handle href prop', async () => {
+    const wrapper = mountFunction({
+      props: {
+        href: 'https://example.com',
+      },
+    })
+
+    expect(wrapper.vm.isLink).toBe('https://example.com')
+    expect(wrapper.vm.isClickable).toBe(true)
+  })
+
+  it('should handle link prop', async () => {
+    const wrapper = mountFunction({
+      props: {
+        link: true,
+      },
+    })
+
+    expect(wrapper.vm.isLink).toBe(true)
+    expect(wrapper.vm.isClickable).toBe(true)
+  })
+})

package/src/mixins/routable/index.ts

@@ -0,0 +1,162 @@
+import { VNodeData, PropType, defineComponent, resolveComponent } from 'vue'
+
+// Directives
+import Ripple, { RippleOptions } from '../../directives/ripple'
+
+// Utilities
+import { getObjectValueByPath } from '../../util/helpers'
+
+export default defineComponent({
+  name: 'routable',
+
+  directives: {
+    Ripple,
+  },
+
+  props: {
+    activeClass: String,
+    append: Boolean,
+    disabled: Boolean,
+    exact: {
+      type: Boolean as PropType<boolean | undefined>,
+      default: undefined,
+    },
+    exactPath: Boolean,
+    exactActiveClass: String,
+    link: Boolean,
+    href: [String, Object],
+    to: [String, Object],
+    nuxt: Boolean,
+    replace: Boolean,
+    ripple: {
+      type: [Boolean, Object],
+      default: null,
+    },
+    tag: String,
+    target: String,
+    notALink: Boolean
+  },
+
+  data: () => ({
+    isActive: false,
+    proxyClass: '',
+  }),
+
+  computed: {
+    classes (): object {
+      const classes: Record<string, boolean> = {}
+
+      if (this.to) return classes
+
+      const activeClass = this.activeClass || ('$activeClass' in this ? this.$activeClass : undefined)
+      // const activeClass = this.activeClass || this.$activeClass
+
+      if (activeClass) classes[activeClass] = this.isActive
+      if (this.proxyClass) classes[this.proxyClass] = this.isActive
+
+      return classes
+    },
+    computedRipple (): RippleOptions | boolean {
+      return this.ripple ?? (!this.disabled && this.isClickable)
+    },
+    isClickable (): boolean {
+      if(this.notALink) return false
+
+      if (this.disabled) return false
+
+      return Boolean(
+        this.isLink ||
+        this.$attrs.onClick ||
+        this.$attrs["on!click"] ||
+        this.$attrs.tabindex ||
+        this.$props?.onClick
+      );
+    },
+    isLink (): boolean {
+      return this.to || this.href || this.link
+    },
+    styles: () => ({}),
+  },
+
+  watch: {
+    $route: 'onRouteChange',
+  },
+
+  mounted () {
+    this.onRouteChange()
+  },
+
+  methods: {
+    generateRouteLink () {
+      let exact = this.exact
+      let tag
+
+      const directives = [[
+        Ripple,
+        this.computedRipple,
+      ]]
+
+      const data: VNodeData = {
+        tabindex: 'tabindex' in this.$attrs ? this.$attrs.tabindex : undefined,
+        class: this.classes,
+        style: this.styles,
+        ...this.$listeners,
+        ...('click' in this ? { onClick: (this as any).click } : undefined), // #14447
+        ref: 'link'
+      }
+
+      if (typeof this.exact === 'undefined') {
+        exact = this.to === '/' ||
+          (this.to === Object(this.to) && this.to.path === '/')
+      }
+
+      if (this.to) {
+        // Add a special activeClass hook
+        // for component level styles
+        let activeClass = this.activeClass
+        let exactActiveClass = this.exactActiveClass || activeClass
+
+        if (this.proxyClass) {
+          activeClass = `${activeClass} ${this.proxyClass}`.trim()
+          exactActiveClass = `${exactActiveClass} ${this.proxyClass}`.trim()
+        }
+
+        tag = resolveComponent(this.nuxt ? 'nuxt-link' : 'router-link')
+        Object.assign(data, {
+          to: this.to,
+          exact,
+          exactPath: this.exactPath,
+          activeClass,
+          exactActiveClass,
+          append: this.append,
+          replace: this.replace,
+        })
+      } else {
+        tag = (this.href && 'a') || this.tag || 'div'
+
+        if (tag === 'a' && this.href) data.href = this.href
+      }
+
+      if (this.target) data.target = this.target
+
+      return { tag, data, directives }
+    },
+    onRouteChange () {
+      if (!this.to || !this.$refs.link || !this.$route) return
+      const activeClass = `${this.activeClass || ''} ${this.proxyClass || ''}`.trim()
+      const exactActiveClass = `${this.exactActiveClass || ''} ${this.proxyClass || ''}`.trim() || activeClass
+
+      const path = '_vnode.data.class.' + (this.exact ? exactActiveClass : activeClass)
+
+      this.$nextTick(() => {
+        /* istanbul ignore else */
+        if (!getObjectValueByPath(this.$refs.link, path) === this.isActive) {
+          this.toggle()
+        }
+      })
+    },
+    toggle () {
+      this.isActive = !this.isActive
+    },
+  },
+})