@kokoccc/vuetify 1.0.1

package/src/components/VProgressLinear/VProgressLinear.sass

@@ -0,0 +1,273 @@
+@import './_variables.scss'
+
++theme(v-progress-linear) using ($material)
+  color: map-deep-get($material, 'text', 'primary')
+
+// Block
+.v-progress-linear
+  background: transparent
+  overflow: hidden
+  position: relative
+  transition: .2s map-get($transition, 'ease-in-out')
+  width: 100%
+
+// Element
+.v-progress-linear__buffer
+  height: inherit
+  left: 0
+  position: absolute
+  top: 0
+  transition: inherit
+  width: 100%
+
+.v-progress-linear--reverse
+  .v-progress-linear__buffer
+    left: auto
+    right: 0
+
+.v-progress-linear__background
+  bottom: 0
+  left: 0
+  position: absolute
+  top: 0
+  transition: inherit
+
+.v-progress-linear--reverse
+  .v-progress-linear__background
+    left: auto
+    right: 0
+
+.v-progress-linear__content
+  align-items: center
+  display: flex
+  height: 100%
+  left: 0
+  justify-content: center
+  position: absolute
+  top: 0
+  width: 100%
+
+.v-progress-linear--reverse
+  .v-progress-linear__content
+    left: auto
+    right: 0
+
+.v-progress-linear__determinate
+  height: inherit
+  left: 0
+  position: absolute
+  transition: inherit
+
+.v-progress-linear--reverse
+  .v-progress-linear__determinate
+    left: auto
+    right: 0
+
+.v-progress-linear
+  .v-progress-linear__indeterminate
+    .long, .short
+      animation-play-state: paused
+      background-color: inherit
+      bottom: 0
+      height: inherit
+      left: 0
+      position: absolute
+      right: auto
+      top: 0
+      width: auto
+      will-change: left, right
+
+    &--active .long
+      animation-name: indeterminate-ltr
+      animation-duration: 2.2s
+      animation-iteration-count: infinite
+
+    &--active .short
+      animation-name: indeterminate-short-ltr
+      animation-duration: 2.2s
+      animation-iteration-count: infinite
+
+.v-progress-linear--reverse
+  .v-progress-linear__indeterminate
+    .long, .short
+      left: auto
+      right: 0
+
+    &--active .long
+      animation-name: indeterminate-rtl
+
+    &--active .short
+      animation-name: indeterminate-short-rtl
+
+.v-progress-linear__stream
+  animation: stream-ltr .25s infinite linear
+  animation-play-state: paused
+  border-color: currentColor
+  border-top: $progress-linear-stream-border-width dotted
+  bottom: 0
+  left: auto
+  right: -8px
+  opacity: $progress-linear-stream-opacity
+  pointer-events: none
+  position: absolute
+  top: calc(50% - #{$progress-linear-stream-border-width / 2})
+  transition: inherit
+
+.v-progress-linear--reverse
+  .v-progress-linear__stream
+    animation: stream-rtl .25s infinite linear
+    left: -8px
+    right: auto
+
+.v-progress-linear__wrapper
+  overflow: hidden
+  position: relative
+  transition: inherit
+
+// Modifier
+.v-progress-linear--absolute,
+.v-progress-linear--fixed
+  left: 0
+  z-index: 1
+
+.v-progress-linear--absolute
+  position: absolute
+
+.v-progress-linear--fixed
+  position: fixed
+
+.v-progress-linear--reactive
+  .v-progress-linear__content
+    pointer-events: none
+
+.v-progress-linear--rounded
+  border-radius: $progress-linear-border-radius
+
+.v-progress-linear--striped
+  .v-progress-linear__determinate
+    background-image: $progress-linear-stripe-gradient
+    background-size: $progress-linear-stripe-background-size
+    background-repeat: repeat
+
+.v-progress-linear--query
+  .v-progress-linear__indeterminate--active
+    .long
+      animation-name: query-ltr
+      animation-duration: 2s
+      animation-iteration-count: infinite
+
+    .short
+      animation-name: query-short-ltr
+      animation-duration: 2s
+      animation-iteration-count: infinite
+
+  &.v-progress-linear--reverse
+    .v-progress-linear__indeterminate--active
+      .long
+        animation-name: query-rtl
+
+      .short
+        animation-name: query-short-rtl
+
+.v-progress-linear--visible
+  .v-progress-linear__indeterminate--active
+    .long, .short
+      animation-play-state: running
+  .v-progress-linear__stream
+    animation-play-state: running
+
+@keyframes indeterminate-ltr
+  0%
+    left: -90%
+    right: 100%
+  60%
+    left: -90%
+    right: 100%
+  100%
+    left: 100%
+    right: -35%
+
+@keyframes indeterminate-rtl
+  0%
+    left: 100%
+    right: -90%
+  60%
+    left: 100%
+    right: -90%
+  100%
+    left: -35%
+    right: 100%
+
+@keyframes indeterminate-short-ltr
+  0%
+    left: -200%
+    right: 100%
+  60%
+    left: 107%
+    right: -8%
+  100%
+    left: 107%
+    right: -8%
+
+@keyframes indeterminate-short-rtl
+  0%
+    left: 100%
+    right: -200%
+  60%
+    left: -8%
+    right: 107%
+  100%
+    left: -8%
+    right: 107%
+
+@keyframes query-ltr
+  0%
+    right: -90%
+    left: 100%
+  60%
+    right: -90%
+    left: 100%
+  100%
+    right: 100%
+    left: -35%
+
+@keyframes query-rtl
+  0%
+    right: 100%
+    left: -90%
+  60%
+    right: 100%
+    left: -90%
+  100%
+    right: -35%
+    left: 100%
+
+@keyframes query-short-ltr
+  0%
+    right: -200%
+    left: 100%
+  60%
+    right: 107%
+    left: -8%
+  100%
+    right: 107%
+    left: -8%
+
+@keyframes query-short-rtl
+  0%
+    right: 100%
+    left: -200%
+  60%
+    right: -8%
+    left: 107%
+  100%
+    right: -8%
+    left: 107%
+
+@keyframes stream-ltr
+  to
+    transform: translateX(-8px)
+
+@keyframes stream-rtl
+  to
+    transform: translateX(8px)

package/src/components/VProgressLinear/VProgressLinear.ts

@@ -0,0 +1,291 @@
+import { h, withDirectives } from 'vue'
+import './VProgressLinear.sass'
+
+// Components
+import {
+  VFadeTransition,
+  VSlideXTransition,
+} from '../transitions'
+
+// Directives
+import intersect, { Intersect } from '../../directives/intersect'
+
+// Mixins
+import Colorable from '../../mixins/colorable'
+import { factory as PositionableFactory } from '../../mixins/positionable'
+import { factory as ProxyableFactory } from '../../mixins/proxyable'
+import Themeable from '../../mixins/themeable'
+
+// Utilities
+import { convertToUnit, getSlot } from '../../util/helpers'
+import mixins from '../../util/mixins'
+
+// Types
+import { VNode } from 'vue'
+
+const baseMixins = mixins(
+  Colorable,
+  PositionableFactory(['absolute', 'fixed', 'top', 'bottom']),
+  ProxyableFactory('modelValue', 'update:modelValue'),
+  Themeable
+)
+
+/* @vue/component */
+export default baseMixins.extend({
+  name: 'v-progress-linear',
+
+  props: {
+    active: {
+      type: Boolean,
+      default: true,
+    },
+    backgroundColor: {
+      type: String,
+      default: null,
+    },
+    backgroundOpacity: {
+      type: [Number, String],
+      default: null,
+    },
+    bufferValue: {
+      type: [Number, String],
+      default: 100,
+    },
+    color: {
+      type: String,
+      default: 'primary',
+    },
+    height: {
+      type: [Number, String],
+      default: 4,
+    },
+    indeterminate: Boolean,
+    modelValue: {
+      type: [Number, String],
+      default: 0,
+    },
+    query: Boolean,
+    reverse: Boolean,
+    rounded: Boolean,
+    stream: Boolean,
+    striped: Boolean,
+    // Оставляем value для обратной совместимости
+    value: {
+      type: [Number, String],
+      default: 0,
+    },
+    // События как пропсы для определения реактивности
+    onChange: Function,
+    onUpdateModelValue: Function,
+  },
+
+  emits: ['update:modelValue', 'change', 'click'],
+
+  data () {
+    return {
+      internalLazyValue: this.modelValue || this.value || 0,
+      isVisible: true,
+    }
+  },
+
+  computed: {
+    __cachedBackground (): VNode {
+      return h('div', this.setBackgroundColor(this.backgroundColor || this.color, {
+        class: 'v-progress-linear__background',
+        style: this.backgroundStyle,
+      }))
+    },
+    __cachedBar (): VNode {
+      return h(this.computedTransition, {}, {
+        default: () => [this.__cachedBarType],
+      })
+    },
+    __cachedBarType (): VNode {
+      return this.indeterminate ? this.__cachedIndeterminate : this.__cachedDeterminate
+    },
+    __cachedBuffer (): VNode {
+      return h('div', {
+        class: 'v-progress-linear__buffer',
+        style: this.styles,
+      })
+    },
+    __cachedDeterminate (): VNode {
+      return h('div', this.setBackgroundColor(this.color, {
+        class: `v-progress-linear__determinate`,
+        style: {
+          width: convertToUnit(this.normalizedValue, '%'),
+        },
+      }))
+    },
+    __cachedIndeterminate (): VNode {
+      return h('div', {
+        class: ['v-progress-linear__indeterminate',
+          {
+            'v-progress-linear__indeterminate--active': this.active,
+          },
+        ],
+      }, [
+        this.genProgressBar('long'),
+        this.genProgressBar('short'),
+      ])
+    },
+    __cachedStream (): VNode | null {
+      if (!this.stream) return null
+
+      return h('div', this.setTextColor(this.color, {
+        class: 'v-progress-linear__stream',
+        style: {
+          width: convertToUnit(100 - this.normalizedBuffer, '%'),
+        },
+      }))
+    },
+    backgroundStyle (): object {
+      const backgroundOpacity = this.backgroundOpacity == null
+        ? (this.backgroundColor ? 1 : 0.3)
+        : parseFloat(this.backgroundOpacity)
+
+      return {
+        opacity: backgroundOpacity,
+        [this.isReversed ? 'right' : 'left']: convertToUnit(this.normalizedValue, '%'),
+        width: convertToUnit(Math.max(0, this.normalizedBuffer - this.normalizedValue), '%'),
+      }
+    },
+    classes (): object {
+      return {
+        'v-progress-linear--absolute': this.absolute,
+        'v-progress-linear--fixed': this.fixed,
+        'v-progress-linear--query': this.query,
+        'v-progress-linear--reactive': this.reactive,
+        'v-progress-linear--reverse': this.isReversed,
+        'v-progress-linear--rounded': this.rounded,
+        'v-progress-linear--striped': this.striped,
+        'v-progress-linear--visible': this.isVisible,
+        ...this.themeClasses,
+      }
+    },
+    computedTransition (): any {
+      return this.indeterminate ? VFadeTransition : VSlideXTransition
+    },
+    isReversed (): boolean {
+      return this.$vuetify.rtl !== this.reverse
+    },
+    normalizedBuffer (): number {
+      return this.normalize(this.bufferValue)
+    },
+    normalizedValue (): number {
+      return this.normalize(this.internalLazyValue)
+    },
+    reactive (): boolean {
+      return Boolean(this.onChange) || Boolean(this.onUpdateModelValue) ||
+             Boolean(this.$attrs.onChange) || Boolean(this.$attrs['onUpdate:modelValue'])
+    },
+    styles (): object {
+      const styles: Record<string, any> = {}
+
+      if (!this.active) {
+        styles.height = 0
+      }
+
+      if (!this.indeterminate && parseFloat(this.normalizedBuffer) !== 100) {
+        styles.width = convertToUnit(this.normalizedBuffer, '%')
+      }
+
+      return styles
+    },
+  },
+
+  watch: {
+    modelValue (val) {
+      this.internalLazyValue = val
+    },
+    value (val) {
+      this.internalLazyValue = val
+    },
+  },
+
+  methods: {
+    genContent () {
+      const slot = getSlot(this, 'default', { value: this.internalLazyValue })
+
+      if (!slot) return null
+
+      return h(
+        'div',
+        {
+          class: 'v-progress-linear__content',
+        },
+        {
+          default: () => slot,
+        }
+      )
+    },
+    genListeners (): any {
+      const listeners = this.$listeners || {}
+
+      if (this.reactive) {
+        listeners.onClick = this.onClick
+      }
+
+      return listeners
+    },
+    genProgressBar (name: 'long' | 'short'): VNode {
+      return h('div', this.setBackgroundColor(this.color, {
+        class: ['v-progress-linear__indeterminate',
+          {
+            [name]: true,
+          },
+        ],
+      }))
+    },
+    onClick (e: MouseEvent) {
+      if (!this.reactive) return
+
+      const { width } = this.$el.getBoundingClientRect()
+
+      const newValue = e.offsetX / width * 100
+      this.internalLazyValue = newValue
+
+      this.$emit('update:modelValue', newValue)
+      this.$emit('change', newValue)
+      this.$emit('click', e)
+    },
+    onObserve (entries: IntersectionObserverEntry[], observer: IntersectionObserver, isIntersecting: boolean) {
+      this.isVisible = isIntersecting
+    },
+    normalize (value: string | number): number {
+      const numValue = typeof value === 'string' ? parseFloat(value) : value
+      if (numValue < 0) return 0
+      if (numValue > 100) return 100
+      return numValue
+    },
+  },
+
+  render (): VNode {
+    const data = {
+      class: ['v-progress-linear', this.classes],
+      role: 'progressbar',
+      'aria-valuemin': 0,
+      'aria-valuemax': this.normalizedBuffer,
+      'aria-valuenow': this.indeterminate ? undefined : this.normalizedValue,
+      style: {
+        bottom: this.bottom ? 0 : undefined,
+        height: this.active ? convertToUnit(this.height) : 0,
+        top: this.top ? 0 : undefined,
+      },
+      ...this.genListeners(),
+    }
+
+    return withDirectives(h('div', data, [
+      this.__cachedStream,
+      this.__cachedBackground,
+      this.__cachedBuffer,
+      this.__cachedBar,
+      this.genContent(),
+    ]), [
+      [
+        Intersect,
+        this.onObserve,
+      ],
+    ])
+  },
+})