routie dev init since i didn't adhere to any proper guidance up until now

2026-04-29 22:27:29 -06:00
commit e1dabb71e2
15301 changed files with 3562618 additions and 0 deletions
@@ -0,0 +1,148 @@
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, createVNode as _createVNode } from "vue";
+// Styles
+import "./VProgressCircular.css";
+
+// Composables
+import { useTextColor } from "../../composables/color.js";
+import { makeComponentProps } from "../../composables/component.js";
+import { useIntersectionObserver } from "../../composables/intersectionObserver.js";
+import { useResizeObserver } from "../../composables/resizeObserver.js";
+import { makeRevealProps, useReveal } from "../../composables/reveal.js";
+import { makeSizeProps, useSize } from "../../composables/size.js";
+import { makeTagProps } from "../../composables/tag.js";
+import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
+import { computed, ref, toRef, watchEffect } from 'vue';
+import { clamp, convertToUnit, genericComponent, PREFERS_REDUCED_MOTION, propsFactory, useRender } from "../../util/index.js"; // Types
+export const makeVProgressCircularProps = propsFactory({
+  bgColor: String,
+  color: String,
+  indeterminate: [Boolean, String],
+  rounded: Boolean,
+  modelValue: {
+    type: [Number, String],
+    default: 0
+  },
+  rotate: {
+    type: [Number, String],
+    default: 0
+  },
+  width: {
+    type: [Number, String],
+    default: 4
+  },
+  ...makeComponentProps(),
+  ...makeRevealProps(),
+  ...makeSizeProps(),
+  ...makeTagProps({
+    tag: 'div'
+  }),
+  ...makeThemeProps()
+}, 'VProgressCircular');
+export const VProgressCircular = genericComponent()({
+  name: 'VProgressCircular',
+  props: makeVProgressCircularProps(),
+  setup(props, {
+    slots
+  }) {
+    const MAGIC_RADIUS_CONSTANT = 20;
+    const CIRCUMFERENCE = 2 * Math.PI * MAGIC_RADIUS_CONSTANT;
+    const root = ref();
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      sizeClasses,
+      sizeStyles
+    } = useSize(props);
+    const {
+      textColorClasses,
+      textColorStyles
+    } = useTextColor(() => props.color);
+    const {
+      textColorClasses: underlayColorClasses,
+      textColorStyles: underlayColorStyles
+    } = useTextColor(() => props.bgColor);
+    const {
+      intersectionRef,
+      isIntersecting
+    } = useIntersectionObserver();
+    const {
+      resizeRef,
+      contentRect
+    } = useResizeObserver();
+    const {
+      state: revealState,
+      duration: revealDuration
+    } = useReveal(props);
+    const normalizedValue = toRef(() => revealState.value === 'initial' ? 0 : clamp(parseFloat(props.modelValue), 0, 100));
+    const width = toRef(() => Number(props.width));
+    const size = toRef(() => {
+      // Get size from element if size prop value is small, large etc
+      return sizeStyles.value ? Number(props.size) : contentRect.value ? contentRect.value.width : Math.max(width.value, 32);
+    });
+    const diameter = toRef(() => MAGIC_RADIUS_CONSTANT / (1 - width.value / size.value) * 2);
+    const strokeWidth = toRef(() => width.value / size.value * diameter.value);
+    const strokeDashOffset = toRef(() => {
+      const baseLength = (100 - normalizedValue.value) / 100 * CIRCUMFERENCE;
+      return props.rounded && normalizedValue.value > 0 && normalizedValue.value < 100 ? convertToUnit(Math.min(CIRCUMFERENCE - 0.01, baseLength + strokeWidth.value)) : convertToUnit(baseLength);
+    });
+    const startAngle = computed(() => {
+      const baseAngle = Number(props.rotate);
+      return props.rounded ? baseAngle + strokeWidth.value / 2 / CIRCUMFERENCE * 360 : baseAngle;
+    });
+    watchEffect(() => {
+      intersectionRef.value = root.value;
+      resizeRef.value = root.value;
+    });
+    useRender(() => _createVNode(props.tag, {
+      "ref": root,
+      "class": _normalizeClass(['v-progress-circular', {
+        'v-progress-circular--indeterminate': !!props.indeterminate,
+        'v-progress-circular--visible': isIntersecting.value,
+        'v-progress-circular--disable-shrink': props.indeterminate && (props.indeterminate === 'disable-shrink' || PREFERS_REDUCED_MOTION()),
+        'v-progress-circular--revealing': ['initial', 'pending'].includes(revealState.value)
+      }, themeClasses.value, sizeClasses.value, textColorClasses.value, props.class]),
+      "style": _normalizeStyle([sizeStyles.value, textColorStyles.value, {
+        '--progress-reveal-duration': `${revealDuration.value}ms`
+      }, props.style]),
+      "role": "progressbar",
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": props.indeterminate ? undefined : normalizedValue.value
+    }, {
+      default: () => [_createElementVNode("svg", {
+        "style": {
+          transform: `rotate(calc(-90deg + ${startAngle.value}deg))`
+        },
+        "xmlns": "http://www.w3.org/2000/svg",
+        "viewBox": `0 0 ${diameter.value} ${diameter.value}`
+      }, [_createElementVNode("circle", {
+        "class": _normalizeClass(['v-progress-circular__underlay', underlayColorClasses.value]),
+        "style": _normalizeStyle(underlayColorStyles.value),
+        "fill": "transparent",
+        "cx": "50%",
+        "cy": "50%",
+        "r": MAGIC_RADIUS_CONSTANT,
+        "stroke-width": strokeWidth.value,
+        "stroke-dasharray": CIRCUMFERENCE,
+        "stroke-dashoffset": 0
+      }, null), _createElementVNode("circle", {
+        "class": "v-progress-circular__overlay",
+        "fill": "transparent",
+        "cx": "50%",
+        "cy": "50%",
+        "r": MAGIC_RADIUS_CONSTANT,
+        "stroke-width": strokeWidth.value,
+        "stroke-dasharray": CIRCUMFERENCE,
+        "stroke-dashoffset": strokeDashOffset.value,
+        "stroke-linecap": props.rounded ? 'round' : undefined
+      }, null)]), slots.default && _createElementVNode("div", {
+        "class": "v-progress-circular__content"
+      }, [slots.default({
+        value: normalizedValue.value
+      })])]
+    }));
+    return {};
+  }
+});
+//# sourceMappingURL=VProgressCircular.js.map