@kokoccc/vuetify 1.0.1

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

@@ -0,0 +1,144 @@
+// Components
+import Scrollable from '../'
+
+// Utilities
+import { mount, VueWrapper } from '@vue/test-utils'
+import { defineComponent, h } from 'vue'
+import { scrollWindow } from '../../../../test'
+
+describe('Scrollable.ts', () => {
+  type Instance = InstanceType<typeof Scrollable>;
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  const createMockComponent = (options = {}) => {
+    return defineComponent({
+      mixins: [Scrollable],
+      ...options,
+      render () {
+        return h('div', {
+          onScroll: this.onScroll,
+        })
+      },
+    })
+  }
+
+  beforeEach(() => {
+    const Mock = createMockComponent()
+    mountFunction = (options = {}) => {
+      return mount(Mock, {
+        ...options,
+      })
+    }
+  })
+
+  it('should set isScrollingUp', async () => {
+    const wrapper = mountFunction()
+
+    // Сначала скроллим вниз
+    await scrollWindow(1000)
+    wrapper.vm.onScroll()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isScrollingUp).toBe(false)
+
+    // Затем скроллим вверх
+    await scrollWindow(0)
+    wrapper.vm.onScroll()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isScrollingUp).toBe(true)
+  })
+
+  it('should set a custom target', async () => {
+    const wrapper = mountFunction({
+      props: {
+        scrollTarget: 'body',
+      },
+    })
+
+    wrapper.vm.onScroll()
+    expect(wrapper.vm.target).toBe(document.body)
+  })
+
+  it('should do nothing if !canScroll', async () => {
+    const wrapper = mountFunction({
+      data () {
+        return {
+          currentScroll: 100,
+          previousScroll: 0,
+        }
+      },
+      computed: {
+        canScroll () {
+          return false
+        },
+      },
+    })
+
+    await scrollWindow(1000)
+    wrapper.vm.onScroll()
+
+    expect(wrapper.vm.currentScroll).toBe(100)
+    expect(wrapper.vm.previousScroll).toBe(0)
+  })
+
+  it('should accept a custom scrollThreshold', async () => {
+    const thresholdMet = jest.fn()
+
+    // Создаем специальный компонент с методом thresholdMet
+    const MockWithThreshold = createMockComponent({
+      props: {
+        scrollThreshold: {
+          type: Number,
+          default: 300,
+        },
+      },
+      methods: {
+        thresholdMet,
+      },
+    })
+
+    const wrapper = mount(MockWithThreshold, {
+      props: {
+        scrollThreshold: 1000,
+      },
+    })
+
+    // Скроллим меньше порога
+    await scrollWindow(900)
+    wrapper.vm.onScroll()
+    await wrapper.vm.$nextTick()
+
+    expect(thresholdMet).not.toHaveBeenCalled()
+
+    // Скроллим больше порога
+    await scrollWindow(1001)
+    wrapper.vm.onScroll()
+    await wrapper.vm.$nextTick()
+    expect(thresholdMet).toHaveBeenCalled()
+  })
+
+  it('should reset savedScroll when isActive state changes', async () => {
+    const wrapper = mountFunction({
+      data () {
+        return {
+          savedScroll: 100,
+        }
+      },
+    })
+
+    // В Vue 3 используем прямое изменение данных
+    wrapper.vm.isActive = true
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.savedScroll).toBe(0)
+  })
+
+  it(`should warn if target isn't present`, async () => {
+    mountFunction({
+      props: {
+        scrollTarget: '#test',
+      },
+    })
+
+    expect('Unable to locate element with identifier #test').toHaveBeenTipped()
+  })
+})

package/src/mixins/scrollable/index.ts

@@ -0,0 +1,104 @@
+// Directives
+import { Scroll } from '../../directives'
+
+// Utilities
+import { consoleWarn } from '../../util/console'
+
+// Types
+import {defineComponent} from 'vue'
+
+/**
+ * Scrollable
+ *
+ * Used for monitoring scrolling and
+ * invoking functions based upon
+ * scrolling thresholds being
+ * met.
+ */
+/* @vue/component */
+export default defineComponent({
+  name: 'scrollable',
+
+  directives: { Scroll },
+
+  props: {
+    scrollTarget: String,
+    scrollThreshold: [String, Number],
+  },
+
+  data: () => ({
+    currentScroll: 0,
+    currentThreshold: 0,
+    isActive: false,
+    isScrollingUp: false,
+    previousScroll: 0,
+    savedScroll: 0,
+    target: null as Element | null,
+  }),
+
+  computed: {
+    /**
+     * A computed property that returns
+     * whether scrolling features are
+     * enabled or disabled
+     */
+    canScroll (): boolean {
+      return typeof window !== 'undefined'
+    },
+    /**
+     * The threshold that must be met before
+     * thresholdMet function is invoked
+     */
+    computedScrollThreshold (): number {
+      return this.scrollThreshold
+        ? Number(this.scrollThreshold)
+        : 300
+    },
+  },
+
+  watch: {
+    isScrollingUp () {
+      this.savedScroll = this.savedScroll || this.currentScroll
+    },
+    isActive () {
+      this.savedScroll = 0
+    },
+  },
+
+  mounted () {
+    if (this.scrollTarget) {
+      this.target = document.querySelector(this.scrollTarget)
+
+      if (!this.target) {
+        consoleWarn(`Unable to locate element with identifier ${this.scrollTarget}`, this)
+      }
+    }
+  },
+
+  methods: {
+    onScroll () {
+      if (!this.canScroll) return
+
+      this.previousScroll = this.currentScroll
+      this.currentScroll = this.target
+        ? this.target.scrollTop
+        : window.pageYOffset
+
+      this.isScrollingUp = this.currentScroll < this.previousScroll
+      this.currentThreshold = Math.abs(this.currentScroll - this.computedScrollThreshold)
+
+      this.$nextTick(() => {
+        if (
+          Math.abs(this.currentScroll - this.savedScroll) >
+          this.computedScrollThreshold
+        ) this.thresholdMet()
+      })
+    },
+    /**
+     * The method invoked when
+     * scrolling in any direction
+     * has exceeded the threshold
+     */
+    thresholdMet () { /* noop */ },
+  },
+})

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

@@ -0,0 +1,53 @@
+// Components
+import Selectable from '../index'
+
+// Utilities
+import {
+  mount,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+import { ComponentPublicInstance, h, defineComponent } from 'vue'
+
+describe('Selectable.ts', () => {
+  const Mock = defineComponent({
+    mixins: [Selectable],
+    render: () => h('div'),
+  })
+
+  type Instance = ComponentPublicInstance & InstanceType<typeof Mock>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(Mock, {
+        ...options,
+      })
+    }
+  })
+
+  it('should update lazyValue and hasColor data when value changes', async () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.vm.lazyValue).toBeUndefined()
+    expect(wrapper.vm.hasColor).toBeUndefined()
+
+    await wrapper.setProps({ modelValue: true })
+
+    expect(wrapper.vm.lazyValue).toBe(true)
+    expect(wrapper.vm.hasColor).toBe(true)
+  })
+
+  it('should handle disabled state', async () => {
+    const wrapper = mountFunction({
+      props: {
+        disabled: true,
+      },
+    })
+
+    expect(wrapper.vm.rippleState).toBeUndefined()
+  })
+})

package/src/mixins/selectable/index.ts

@@ -0,0 +1,171 @@
+// Components
+import VInput from '../../components/VInput'
+
+// Mixins
+import Rippleable from '../rippleable'
+import Comparable from '../comparable'
+
+// Utilities
+import mixins from '../../util/mixins'
+import { h } from 'vue'
+
+export function prevent (e: Event) {
+  e.preventDefault()
+}
+
+/* @vue/component */
+export default mixins(
+  VInput,
+  Rippleable,
+  Comparable
+).extend({
+  name: 'selectable',
+
+  props: {
+    id: String,
+    value: null as any,
+    falseValue: null as any,
+    trueValue: null as any,
+    multiple: {
+      type: Boolean,
+      default: null,
+    },
+    label: String,
+  },
+
+  data () {
+    return {
+      hasColor: this.modelValue,
+      lazyValue: this.modelValue,
+    }
+  },
+
+  created() {
+    this.$_emitChangeEvent = true
+  },
+
+  computed: {
+    computedColor (): string | undefined {
+      if (!this.isActive) return undefined
+      if (this.color) return this.color
+      if (this.isDark && !this.appIsDark) return 'white'
+      return 'primary'
+    },
+    isMultiple (): boolean {
+      return this.multiple === true || (this.multiple === null && Array.isArray(this.internalValue))
+    },
+    isActive (): boolean {
+      const value = this.value
+      const input = this.internalValue
+
+      if (this.isMultiple) {
+        if (!Array.isArray(input)) return false
+
+        return input.some(item => this.valueComparator(item, value))
+      }
+
+      if (this.trueValue === undefined || this.falseValue === undefined) {
+        return value
+          ? this.valueComparator(value, input)
+          : Boolean(input)
+      }
+
+      return this.valueComparator(input, this.trueValue)
+    },
+    isDirty (): boolean {
+      return this.isActive
+    },
+    rippleState (): string | undefined {
+      return !this.isDisabled && !this.validationState
+        ? undefined
+        : this.validationState
+    },
+  },
+
+  watch: {
+    modelValue (val) {
+      this.lazyValue = val
+      this.hasColor = val
+    },
+  },
+
+  methods: {
+    genLabel () {
+      const label = VInput.methods.genLabel.call(this)
+
+      if (!label) return label
+
+      // Label shouldn't cause the input to focus
+      label!.onClick = this.onClick
+
+      return label
+    },
+    genInput (type: string, attrs: object) {
+      // Allow components to override aria-checked by providing it in attrs
+      const defaultAttrs = {
+        'aria-checked': this.isActive.toString(),
+        disabled: this.isDisabled,
+        id: this.computedId,
+        role: type,
+        type,
+      }
+
+      return h('input', {
+        ...Object.assign(defaultAttrs, attrs),
+        value: this.value,
+        checked: this.isActive,
+        onBlur: this.onBlur,
+        onChange: this.onChange,
+        onFocus: this.onFocus,
+        onKeydown: this.onKeydown,
+        onClick: prevent,
+        ref: 'input'
+      })
+    },
+    onClick (e: Event) {
+      e.preventDefault()
+      this.onChange()
+      this.$emit('click', e)
+    },
+    onChange () {
+      if (!this.isInteractive) return
+
+      const value = this.value
+      let input = this.internalValue
+
+      if (this.isMultiple) {
+        if (!Array.isArray(input)) {
+          input = []
+        }
+
+        const length = input.length
+
+        input = input.filter((item: any) => !this.valueComparator(item, value))
+
+        if (input.length === length) {
+          input.push(value)
+        }
+      } else if (this.trueValue !== undefined && this.falseValue !== undefined) {
+        input = this.valueComparator(input, this.trueValue) ? this.falseValue : this.trueValue
+      } else if (value) {
+        input = this.valueComparator(input, value) ? null : value
+      } else {
+        input = !input
+      }
+
+      this.validate(true, input)
+      this.internalValue = input
+      this.hasColor = input
+    },
+    onFocus (e: FocusEvent) {
+      this.isFocused = true
+      this.$emit('focus', e)
+    },
+    onBlur (e: FocusEvent) {
+      this.isFocused = false
+      this.$emit('blur', e)
+    },
+    /** @abstract */
+    onKeydown (e: Event) {},
+  },
+})

package/src/mixins/sizeable/index.ts

@@ -0,0 +1,32 @@
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+  name: 'sizeable',
+
+  props: {
+    large: Boolean,
+    small: Boolean,
+    xLarge: Boolean,
+    xSmall: Boolean,
+  },
+
+  computed: {
+    medium (): boolean {
+      return Boolean(
+        !this.xSmall &&
+        !this.small &&
+        !this.large &&
+        !this.xLarge
+      )
+    },
+    sizeableClasses (): object {
+      return {
+        'v-size--x-small': this.xSmall,
+        'v-size--small': this.small,
+        'v-size--default': this.medium,
+        'v-size--large': this.large,
+        'v-size--x-large': this.xLarge,
+      }
+    },
+  },
+})

package/src/mixins/ssr-bootable/index.ts

@@ -0,0 +1,27 @@
+import {defineComponent} from 'vue'
+
+/**
+ * SSRBootable
+ *
+ * @mixin
+ *
+ * Used in layout components (drawer, toolbar, content)
+ * to avoid an entry animation when using SSR
+ */
+export default defineComponent({
+  name: 'ssr-bootable',
+
+  data: () => ({
+    isBooted: false,
+  }),
+
+  mounted () {
+    // Use setAttribute instead of dataset
+    // because dataset does not work well
+    // with unit tests
+    window.requestAnimationFrame(() => {
+      this.$el.setAttribute('data-booted', 'true')
+      this.isBooted = true
+    })
+  },
+})

package/src/mixins/stackable/index.ts

@@ -0,0 +1,65 @@
+import {defineComponent} from 'vue'
+
+import { getZIndex } from '../../util/helpers'
+
+interface options extends Vue {
+  $refs: {
+    content: Element
+  }
+}
+
+/* @vue/component */
+export default defineComponent({
+  name: 'stackable',
+
+  data () {
+    return {
+      stackElement: null as Element | null,
+      stackExclude: null as Element[] | null,
+      stackMinZIndex: 0,
+      isActive: false,
+    }
+  },
+  computed: {
+    activeZIndex (): number {
+      if (typeof window === 'undefined') return 0
+
+      const content = this.stackElement || this.$refs.content
+      // Return current zindex if not active
+
+      const index = !this.isActive
+        ? getZIndex(content)
+        : this.getMaxZIndex(this.stackExclude || [content]) + 2
+
+      if (index == null) return index
+
+      // Return max current z-index (excluding self) + 2
+      // (2 to leave room for an overlay below, if needed)
+      return parseInt(index)
+    },
+  },
+  methods: {
+    getMaxZIndex (exclude: Element[] = []) {
+      const base = this.$el
+      // Start with lowest allowed z-index or z-index of
+      // base component's element, whichever is greater
+      const zis = [this.stackMinZIndex, getZIndex(base)]
+      // Convert the NodeList to an array to
+      // prevent an Edge bug with Symbol.iterator
+      // https://github.com/vuetifyjs/vuetify/issues/2146
+      const activeElements = [
+        ...document.getElementsByClassName('v-menu__content--active'),
+        ...document.getElementsByClassName('v-dialog__content--active'),
+      ]
+
+      // Get z-index for all active dialogs
+      for (let index = 0; index < activeElements.length; index++) {
+        if (!exclude.includes(activeElements[index])) {
+          zis.push(getZIndex(activeElements[index]))
+        }
+      }
+
+      return Math.max(...zis)
+    },
+  },
+})

package/src/mixins/themeable/index.ts

@@ -0,0 +1,107 @@
+import {defineComponent, App} from 'vue'
+import { PropType, RenderContext } from 'vue/types/options'
+
+interface options extends App {
+  theme: {
+    isDark: boolean
+  }
+}
+
+/* @vue/component */
+const Themeable = defineComponent({
+  name: 'themeable',
+
+  provide (): object {
+    return {
+      theme: this.themeableProvide,
+    }
+  },
+
+  inject: {
+    theme: {
+      default: {
+        isDark: false,
+      },
+    },
+  },
+
+  props: {
+    dark: {
+      type: Boolean as PropType<boolean | null>,
+      default: null,
+    },
+    light: {
+      type: Boolean as PropType<boolean | null>,
+      default: null,
+    },
+  },
+
+  data () {
+    return {
+      themeableProvide: {
+        isDark: false,
+      },
+    }
+  },
+
+  computed: {
+    appIsDark (): boolean {
+      return this.$vuetify.theme.dark || false
+    },
+    isDark (): boolean {
+      if (this.dark === true) {
+        // explicitly dark
+        return true
+      } else if (this.light === true) {
+        // explicitly light
+        return false
+      } else {
+        // inherit from parent, or default false if there is none
+        return this.theme.isDark
+      }
+    },
+    themeClasses (): object {
+      return {
+        'theme--dark': this.isDark,
+        'theme--light': !this.isDark,
+      }
+    },
+    /** Used by menus and dialogs, inherits from v-app instead of the parent */
+    rootIsDark (): boolean {
+      if (this.dark === true) {
+        // explicitly dark
+        return true
+      } else if (this.light === true) {
+        // explicitly light
+        return false
+      } else {
+        // inherit from v-app
+        return this.appIsDark
+      }
+    },
+    rootThemeClasses (): Dictionary<boolean> {
+      return {
+        'theme--dark': this.rootIsDark,
+        'theme--light': !this.rootIsDark,
+      }
+    },
+  },
+
+  watch: {
+    isDark: {
+      handler (newVal, oldVal) {
+        if (newVal !== oldVal) {
+          this.themeableProvide.isDark = this.isDark
+        }
+      },
+      immediate: true,
+    },
+  },
+})
+
+export default Themeable
+
+export function functionalThemeClasses (vm: any): object {
+  const isDark = Themeable.computed.isDark.call(vm)
+  return Themeable.computed.themeClasses.call({ isDark })
+}