@kokoccc/vuetify 1.0.1

package/src/components/VProgressCircular/VProgressCircular.ts

@@ -0,0 +1,164 @@
+import {h, withDirectives} from 'vue'
+// Styles
+import './VProgressCircular.sass'
+
+// Directives
+import intersect, { Intersect } from '../../directives/intersect'
+
+// Mixins
+import Colorable from '../../mixins/colorable'
+
+// Utils
+import { convertToUnit, getSlot } from '../../util/helpers'
+
+// Types
+import { VNode, VNodeChild, defineComponent } from 'vue'
+
+/* @vue/component */
+export default defineComponent({
+  name: 'v-progress-circular',
+
+  extends: Colorable,
+
+
+  props: {
+    button: Boolean,
+    indeterminate: Boolean,
+    rotate: {
+      type: [Number, String],
+      default: 0,
+    },
+    size: {
+      type: [Number, String],
+      default: 32,
+    },
+    width: {
+      type: [Number, String],
+      default: 4,
+    },
+    value: {
+      type: [Number, String],
+      default: 0,
+    },
+  },
+
+  data: () => ({
+    radius: 20,
+    isVisible: true,
+  }),
+
+  computed: {
+    calculatedSize (): number {
+      return Number(this.size) + (this.button ? 8 : 0)
+    },
+
+    circumference (): number {
+      return 2 * Math.PI * this.radius
+    },
+
+    classes (): object {
+      return {
+        'v-progress-circular--visible': this.isVisible,
+        'v-progress-circular--indeterminate': this.indeterminate,
+        'v-progress-circular--button': this.button,
+      }
+    },
+
+    normalizedValue (): number {
+      const numValue = parseFloat(this.value)
+      if (numValue < 0) {
+        return 0
+      }
+
+      if (numValue > 100) {
+        return 100
+      }
+
+      return numValue
+    },
+
+    strokeDashArray (): number {
+      return Math.round(this.circumference * 1000) / 1000
+    },
+
+    strokeDashOffset (): string {
+      return ((100 - this.normalizedValue) / 100) * this.circumference + 'px'
+    },
+
+    strokeWidth (): number {
+      return Number(this.width) / +this.size * this.viewBoxSize * 2
+    },
+
+    styles (): object {
+      return {
+        height: convertToUnit(this.calculatedSize),
+        width: convertToUnit(this.calculatedSize),
+      }
+    },
+
+    svgStyles (): object {
+      return {
+        transform: `rotate(${Number(this.rotate)}deg)`,
+      }
+    },
+
+    viewBoxSize (): number {
+      return this.radius / (1 - Number(this.width) / +this.size)
+    },
+  },
+
+  methods: {
+    genCircle (name: string, offset: string | number): VNode {
+      return h('circle', {
+        class: `v-progress-circular__${name}`,
+        fill: 'transparent',
+        cx: 2 * this.viewBoxSize,
+        cy: 2 * this.viewBoxSize,
+        r: this.radius,
+        'stroke-width': this.strokeWidth,
+        'stroke-dasharray': this.strokeDashArray,
+        'stroke-dashoffset': offset,
+      })
+    },
+    genSvg (): VNode {
+      const children = [
+        this.indeterminate || this.genCircle('underlay', 0),
+        this.genCircle('overlay', this.strokeDashOffset),
+      ] as VNodeChild[]
+
+      return h('svg', {
+        style: this.svgStyles,
+        xmlns: 'http://www.w3.org/2000/svg',
+        viewBox: `${this.viewBoxSize} ${this.viewBoxSize} ${2 * this.viewBoxSize} ${2 * this.viewBoxSize}`,
+      }, children)
+    },
+    genInfo (): VNode {
+      return h('div', {
+        class: 'v-progress-circular__info',
+      }, getSlot(this))
+    },
+    onObserve (entries: IntersectionObserverEntry[], observer: IntersectionObserver, isIntersecting: boolean) {
+      this.isVisible = isIntersecting
+    },
+  },
+
+  render (): VNode {
+    return withDirectives(h('div', this.setTextColor(this.color, {
+      class: ['v-progress-circular', this.classes],
+      role: 'progressbar',
+      'aria-valuemin': 0,
+      'aria-valuemax': 100,
+      'aria-valuenow': this.indeterminate ? undefined : this.normalizedValue,
+      style: this.styles,
+      ...this.$listeners,
+    }), [
+      this.genSvg(),
+      this.genInfo(),
+    ]), [
+      [
+        Intersect,
+        this.onObserve
+      ]
+    ])
+  },
+})

package/src/components/VProgressCircular/__tests__/VProgressCircular.spec.ts

@@ -0,0 +1,158 @@
+// Components
+import VProgressCircular from '../VProgressCircular'
+
+// Utilities
+import {
+  mount,
+  VueWrapper,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+
+describe('VProgressCircular.ts', () => {
+  type Instance = InstanceType<typeof VProgressCircular>
+  let mountFunction: (options?: Record<string, any>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VProgressCircular, options)
+    }
+  })
+
+  it('should render component and match snapshot', async () => {
+    const wrapper = mountFunction({
+      data: () => ({
+        isVisible: false,
+      }),
+      props: {
+        value: 33,
+      },
+      slots: {
+        default: '<span>content</span>',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.setProps({ value: -1 })
+    const htmlMinus1 = wrapper.html()
+
+    await wrapper.setProps({ value: 0 })
+    const html0 = wrapper.html()
+
+    await wrapper.setProps({ value: 100 })
+    const html100 = wrapper.html()
+
+    await wrapper.setProps({ value: 101 })
+    const html101 = wrapper.html()
+
+    expect(htmlMinus1).toBe(html0)
+    expect(html100).toBe(html101)
+    expect(html0).not.toBe(html100)
+
+    await wrapper.setProps({ value: '-1' })
+    const htmlMinus1String = wrapper.html()
+
+    await wrapper.setProps({ value: '0' })
+    const html0String = wrapper.html()
+
+    await wrapper.setProps({ value: '100' })
+    const html100String = wrapper.html()
+
+    await wrapper.setProps({ value: '101' })
+    const html101String = wrapper.html()
+
+    expect(htmlMinus1String).toBe(html0String)
+    expect(html100String).toBe(html101String)
+    expect(html0String).not.toBe(html100String)
+  })
+
+  it('should render component with color prop and match snapshot', () => {
+    const wrapper = mountFunction({
+      props: {
+        value: 33,
+        color: 'orange lighten-1',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with button prop and match snapshot', () => {
+    const wrapper = mountFunction({
+      props: {
+        value: 33,
+        button: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with rotate prop and match snapshot', () => {
+    const wrapper = mountFunction({
+      props: {
+        value: 33,
+        rotate: 29,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with size prop and match snapshot', () => {
+    const wrapper = mountFunction({
+      props: {
+        value: 33,
+        size: 17,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with indeterminate prop and match snapshot', () => {
+    const wrapper = mountFunction({
+      props: {
+        indeterminate: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with width prop and match snapshot', () => {
+    const wrapper = mountFunction({
+      props: {
+        value: 33,
+        width: 13,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with fill prop and match snapshot', () => {
+    const wrapper = mountFunction({
+      props: {
+        value: 33,
+        fill: 'green lighten-1',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should set isVisible with onObserve', () => {
+    const wrapper = mountFunction()
+    expect(wrapper.vm.isVisible).toEqual(false)
+    
+    // Создаем мок-объекты для IntersectionObserverEntry
+    const mockEntries = [] as IntersectionObserverEntry[]
+    const mockObserver = {} as IntersectionObserver
+    
+    wrapper.vm.onObserve(mockEntries, mockObserver, true)
+    expect(wrapper.vm.isVisible).toEqual(true)
+  })
+})

package/src/components/VProgressCircular/__tests__/__snapshots__/VProgressCircular.spec.ts.snap

@@ -0,0 +1,298 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VProgressCircular.ts should render component and match snapshot 1`] = `
+<div class="v-progress-circular"
+     role="progressbar"
+     aria-valuemin="0"
+     aria-valuemax="100"
+     aria-valuenow="33"
+     style="height: 32px; width: 32px;"
+>
+  <svg style="transform: rotate(0deg);"
+       xmlns="http://www.w3.org/2000/svg"
+       viewbox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
+  >
+    <circle class="v-progress-circular__underlay"
+            fill="transparent"
+            cx="45.714285714285715"
+            cy="45.714285714285715"
+            r="20"
+            stroke-width="5.714285714285714"
+            stroke-dasharray="125.664"
+            stroke-dashoffset="0"
+    >
+    </circle>
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
+            cx="45.714285714285715"
+            cy="45.714285714285715"
+            r="20"
+            stroke-width="5.714285714285714"
+            stroke-dasharray="125.664"
+            stroke-dashoffset="84.19468311620646px"
+    >
+    </circle>
+  </svg>
+  <div class="v-progress-circular__info">
+    <span>
+      content
+    </span>
+  </div>
+</div>
+`;
+
+exports[`VProgressCircular.ts should render component with button prop and match snapshot 1`] = `
+<div class="v-progress-circular v-progress-circular--visible v-progress-circular--button"
+     role="progressbar"
+     aria-valuemin="0"
+     aria-valuemax="100"
+     aria-valuenow="33"
+     style="height: 40px; width: 40px;"
+>
+  <svg style="transform: rotate(0deg);"
+       xmlns="http://www.w3.org/2000/svg"
+       viewbox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
+  >
+    <circle class="v-progress-circular__underlay"
+            fill="transparent"
+            cx="45.714285714285715"
+            cy="45.714285714285715"
+            r="20"
+            stroke-width="5.714285714285714"
+            stroke-dasharray="125.664"
+            stroke-dashoffset="0"
+    >
+    </circle>
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
+            cx="45.714285714285715"
+            cy="45.714285714285715"
+            r="20"
+            stroke-width="5.714285714285714"
+            stroke-dasharray="125.664"
+            stroke-dashoffset="84.19468311620646px"
+    >
+    </circle>
+  </svg>
+  <div class="v-progress-circular__info">
+  </div>
+</div>
+`;
+
+exports[`VProgressCircular.ts should render component with color prop and match snapshot 1`] = `
+<div class="v-progress-circular v-progress-circular--visible orange--text text--lighten-1"
+     role="progressbar"
+     aria-valuemin="0"
+     aria-valuemax="100"
+     aria-valuenow="33"
+     style="height: 32px; width: 32px;"
+>
+  <svg style="transform: rotate(0deg);"
+       xmlns="http://www.w3.org/2000/svg"
+       viewbox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
+  >
+    <circle class="v-progress-circular__underlay"
+            fill="transparent"
+            cx="45.714285714285715"
+            cy="45.714285714285715"
+            r="20"
+            stroke-width="5.714285714285714"
+            stroke-dasharray="125.664"
+            stroke-dashoffset="0"
+    >
+    </circle>
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
+            cx="45.714285714285715"
+            cy="45.714285714285715"
+            r="20"
+            stroke-width="5.714285714285714"
+            stroke-dasharray="125.664"
+            stroke-dashoffset="84.19468311620646px"
+    >
+    </circle>
+  </svg>
+  <div class="v-progress-circular__info">
+  </div>
+</div>
+`;
+
+exports[`VProgressCircular.ts should render component with fill prop and match snapshot 1`] = `
+<div class="v-progress-circular v-progress-circular--visible"
+     role="progressbar"
+     aria-valuemin="0"
+     aria-valuemax="100"
+     aria-valuenow="33"
+     style="height: 32px; width: 32px;"
+     fill="green lighten-1"
+>
+  <svg style="transform: rotate(0deg);"
+       xmlns="http://www.w3.org/2000/svg"
+       viewbox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
+  >
+    <circle class="v-progress-circular__underlay"
+            fill="transparent"
+            cx="45.714285714285715"
+            cy="45.714285714285715"
+            r="20"
+            stroke-width="5.714285714285714"
+            stroke-dasharray="125.664"
+            stroke-dashoffset="0"
+    >
+    </circle>
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
+            cx="45.714285714285715"
+            cy="45.714285714285715"
+            r="20"
+            stroke-width="5.714285714285714"
+            stroke-dasharray="125.664"
+            stroke-dashoffset="84.19468311620646px"
+    >
+    </circle>
+  </svg>
+  <div class="v-progress-circular__info">
+  </div>
+</div>
+`;
+
+exports[`VProgressCircular.ts should render component with indeterminate prop and match snapshot 1`] = `
+<div class="v-progress-circular v-progress-circular--visible v-progress-circular--indeterminate"
+     role="progressbar"
+     aria-valuemin="0"
+     aria-valuemax="100"
+     style="height: 32px; width: 32px;"
+>
+  <svg style="transform: rotate(0deg);"
+       xmlns="http://www.w3.org/2000/svg"
+       viewbox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
+  >
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
+            cx="45.714285714285715"
+            cy="45.714285714285715"
+            r="20"
+            stroke-width="5.714285714285714"
+            stroke-dasharray="125.664"
+            stroke-dashoffset="125.66370614359172px"
+    >
+    </circle>
+  </svg>
+  <div class="v-progress-circular__info">
+  </div>
+</div>
+`;
+
+exports[`VProgressCircular.ts should render component with rotate prop and match snapshot 1`] = `
+<div class="v-progress-circular v-progress-circular--visible"
+     role="progressbar"
+     aria-valuemin="0"
+     aria-valuemax="100"
+     aria-valuenow="33"
+     style="height: 32px; width: 32px;"
+>
+  <svg style="transform: rotate(29deg);"
+       xmlns="http://www.w3.org/2000/svg"
+       viewbox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
+  >
+    <circle class="v-progress-circular__underlay"
+            fill="transparent"
+            cx="45.714285714285715"
+            cy="45.714285714285715"
+            r="20"
+            stroke-width="5.714285714285714"
+            stroke-dasharray="125.664"
+            stroke-dashoffset="0"
+    >
+    </circle>
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
+            cx="45.714285714285715"
+            cy="45.714285714285715"
+            r="20"
+            stroke-width="5.714285714285714"
+            stroke-dasharray="125.664"
+            stroke-dashoffset="84.19468311620646px"
+    >
+    </circle>
+  </svg>
+  <div class="v-progress-circular__info">
+  </div>
+</div>
+`;
+
+exports[`VProgressCircular.ts should render component with size prop and match snapshot 1`] = `
+<div class="v-progress-circular v-progress-circular--visible"
+     role="progressbar"
+     aria-valuemin="0"
+     aria-valuemax="100"
+     aria-valuenow="33"
+     style="height: 17px; width: 17px;"
+>
+  <svg style="transform: rotate(0deg);"
+       xmlns="http://www.w3.org/2000/svg"
+       viewbox="26.153846153846157 26.153846153846157 52.307692307692314 52.307692307692314"
+  >
+    <circle class="v-progress-circular__underlay"
+            fill="transparent"
+            cx="52.307692307692314"
+            cy="52.307692307692314"
+            r="20"
+            stroke-width="12.307692307692308"
+            stroke-dasharray="125.664"
+            stroke-dashoffset="0"
+    >
+    </circle>
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
+            cx="52.307692307692314"
+            cy="52.307692307692314"
+            r="20"
+            stroke-width="12.307692307692308"
+            stroke-dasharray="125.664"
+            stroke-dashoffset="84.19468311620646px"
+    >
+    </circle>
+  </svg>
+  <div class="v-progress-circular__info">
+  </div>
+</div>
+`;
+
+exports[`VProgressCircular.ts should render component with width prop and match snapshot 1`] = `
+<div class="v-progress-circular v-progress-circular--visible"
+     role="progressbar"
+     aria-valuemin="0"
+     aria-valuemax="100"
+     aria-valuenow="33"
+     style="height: 32px; width: 32px;"
+>
+  <svg style="transform: rotate(0deg);"
+       xmlns="http://www.w3.org/2000/svg"
+       viewbox="33.68421052631579 33.68421052631579 67.36842105263158 67.36842105263158"
+  >
+    <circle class="v-progress-circular__underlay"
+            fill="transparent"
+            cx="67.36842105263158"
+            cy="67.36842105263158"
+            r="20"
+            stroke-width="27.36842105263158"
+            stroke-dasharray="125.664"
+            stroke-dashoffset="0"
+    >
+    </circle>
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
+            cx="67.36842105263158"
+            cy="67.36842105263158"
+            r="20"
+            stroke-width="27.36842105263158"
+            stroke-dasharray="125.664"
+            stroke-dashoffset="84.19468311620646px"
+    >
+    </circle>
+  </svg>
+  <div class="v-progress-circular__info">
+  </div>
+</div>
+`;

package/src/components/VProgressCircular/_variables.scss

@@ -0,0 +1,7 @@
+@import '../../styles/styles.sass';
+
+$progress-circular-rotate-animation: progress-circular-rotate 1.4s linear infinite !default;
+$progress-circular-rotate-dash: progress-circular-dash 1.4s ease-in-out infinite !default;
+$process-circular-intermediate-svg-transition: all .2s ease-in-out !default;
+$progress-circular-underlay-stroke: rgba(map-get($grey, 'base'), 0.4) !default;
+$progress-circular-overlay-transition: all .6s ease-in-out !default;

package/src/components/VProgressCircular/index.ts

@@ -0,0 +1,4 @@
+import VProgressCircular from './VProgressCircular'
+
+export { VProgressCircular }
+export default VProgressCircular