mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-04-21 17:44:39 -06:00
Initial plan for TypeScript compilation fix
Co-authored-by: DavidHDev <48634587+DavidHDev@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
{"name":"Counter","title":"Counter","description":"Flexible animated counter supporting increments + easing.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n <div class=\"relative inline-block\" :style=\"containerStyle\">\n <div class=\"flex overflow-hidden\" :style=\"counterStyles\">\n <div v-for=\"place in places\" :key=\"place\" class=\"relative w-[1ch] tabular-nums\" :style=\"digitStyles\">\n <Motion\n v-for=\"digit in 10\"\n :key=\"digit - 1\"\n tag=\"span\"\n class=\"absolute top-0 left-0 w-full h-full flex items-center justify-center\"\n :animate=\"{ y: getDigitPosition(place, digit - 1) }\"\n >\n {{ digit - 1 }}\n </Motion>\n </div>\n </div>\n <div class=\"pointer-events-none absolute inset-0\">\n <div class=\"absolute top-0 w-full\" :style=\"topGradientStyle ?? topGradientStyles\" />\n <div class=\"absolute bottom-0 w-full\" :style=\"bottomGradientStyle ?? bottomGradientStyles\" />\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport { Motion } from 'motion-v';\nimport type { CSSProperties } from 'vue';\n\ninterface CounterProps {\n value: number;\n fontSize?: number;\n padding?: number;\n places?: number[];\n gap?: number;\n borderRadius?: number;\n horizontalPadding?: number;\n textColor?: string;\n fontWeight?: string | number;\n containerStyle?: CSSProperties;\n counterStyle?: CSSProperties;\n digitStyle?: CSSProperties;\n gradientHeight?: number;\n gradientFrom?: string;\n gradientTo?: string;\n topGradientStyle?: CSSProperties;\n bottomGradientStyle?: CSSProperties;\n}\n\nconst props = withDefaults(defineProps<CounterProps>(), {\n fontSize: 100,\n padding: 0,\n places: () => [100, 10, 1],\n gap: 8,\n borderRadius: 4,\n horizontalPadding: 8,\n textColor: 'white',\n fontWeight: 'bold',\n containerStyle: () => ({}),\n counterStyle: () => ({}),\n digitStyle: () => ({}),\n gradientHeight: 16,\n gradientFrom: 'black',\n gradientTo: 'transparent',\n topGradientStyle: undefined,\n bottomGradientStyle: undefined\n});\n\nconst digitHeight = computed(() => props.fontSize + props.padding);\n\nconst counterStyles = computed(() => ({\n fontSize: `${props.fontSize}px`,\n gap: `${props.gap}px`,\n borderRadius: `${props.borderRadius}px`,\n paddingLeft: `${props.horizontalPadding}px`,\n paddingRight: `${props.horizontalPadding}px`,\n color: props.textColor,\n fontWeight: props.fontWeight,\n ...props.counterStyle\n}));\n\nconst digitStyles = computed(() => ({\n height: `${digitHeight.value}px`,\n ...props.digitStyle\n}));\n\nconst topGradientStyles = computed(\n (): CSSProperties => ({\n height: `${props.gradientHeight}px`,\n background: `linear-gradient(to bottom, ${props.gradientFrom}, ${props.gradientTo})`\n })\n);\n\nconst bottomGradientStyles = computed(\n (): CSSProperties => ({\n height: `${props.gradientHeight}px`,\n background: `linear-gradient(to top, ${props.gradientFrom}, ${props.gradientTo})`\n })\n);\n\nconst springValues = ref<Record<number, number>>({});\n\nconst initializeSpringValues = () => {\n props.places.forEach(place => {\n springValues.value[place] = Math.floor(props.value / place);\n });\n};\n\ninitializeSpringValues();\n\nwatch(\n () => props.value,\n (newValue, oldValue) => {\n if (newValue === oldValue) return;\n\n props.places.forEach(place => {\n const newRoundedValue = Math.floor(newValue / place);\n const oldRoundedValue = springValues.value[place];\n\n if (newRoundedValue !== oldRoundedValue) {\n springValues.value[place] = newRoundedValue;\n }\n });\n },\n { immediate: true }\n);\n\nwatch(\n () => digitHeight.value,\n () => {\n positionCache.clear();\n }\n);\n\nconst positionCache = new Map<string, number>();\n\nconst getDigitPosition = (place: number, digit: number): number => {\n const springValue = springValues.value[place] || 0;\n const cacheKey = `${place}-${digit}-${springValue}`;\n\n if (positionCache.has(cacheKey)) {\n return positionCache.get(cacheKey)!;\n }\n\n const placeValue = springValue % 10;\n const offset = (10 + digit - placeValue) % 10;\n let position = offset * digitHeight.value;\n\n if (offset > 5) {\n position -= 10 * digitHeight.value;\n }\n\n if (positionCache.size > 200) {\n const firstKey = positionCache.keys().next().value;\n if (typeof firstKey === 'string') {\n positionCache.delete(firstKey);\n }\n }\n\n positionCache.set(cacheKey, position);\n return position;\n};\n</script>\n","path":"Counter/Counter.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["Components"]}
|
||||
{"name":"Counter","title":"Counter","description":"Flexible animated counter supporting increments + easing.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n <div class=\"relative inline-block\" :style=\"containerStyle\">\n <div class=\"flex overflow-hidden\" :style=\"counterStyles\">\n <div v-for=\"place in places\" :key=\"place\" class=\"relative w-[1ch] tabular-nums\" :style=\"digitStyles\">\n <Motion\n v-for=\"digit in 10\"\n :key=\"digit - 1\"\n tag=\"span\"\n class=\"absolute top-0 left-0 w-full h-full flex items-center justify-center\"\n :animate=\"{ y: getDigitPosition(place, digit - 1) }\"\n >\n {{ digit - 1 }}\n </Motion>\n </div>\n </div>\n <div class=\"pointer-events-none absolute inset-0\">\n <div class=\"absolute top-0 w-full\" :style=\"topGradientStyle ?? topGradientStyles\" />\n <div class=\"absolute bottom-0 w-full\" :style=\"bottomGradientStyle ?? bottomGradientStyles\" />\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\nimport { Motion } from 'motion-v';\nimport type { CSSProperties } from 'vue';\n\ninterface CounterProps {\n value: number;\n fontSize?: number;\n padding?: number;\n places?: number[];\n gap?: number;\n borderRadius?: number;\n horizontalPadding?: number;\n textColor?: string;\n fontWeight?: string | number;\n containerStyle?: CSSProperties;\n counterStyle?: CSSProperties;\n digitStyle?: CSSProperties;\n gradientHeight?: number;\n gradientFrom?: string;\n gradientTo?: string;\n topGradientStyle?: CSSProperties;\n bottomGradientStyle?: CSSProperties;\n}\n\nconst props = withDefaults(defineProps<CounterProps>(), {\n fontSize: 100,\n padding: 0,\n places: () => [100, 10, 1],\n gap: 8,\n borderRadius: 4,\n horizontalPadding: 8,\n textColor: 'white',\n fontWeight: 'bold',\n containerStyle: () => ({}),\n counterStyle: () => ({}),\n digitStyle: () => ({}),\n gradientHeight: 16,\n gradientFrom: 'black',\n gradientTo: 'transparent',\n topGradientStyle: undefined,\n bottomGradientStyle: undefined\n});\n\nconst digitHeight = computed(() => props.fontSize + props.padding);\n\nconst counterStyles = computed(() => ({\n fontSize: `${props.fontSize}px`,\n gap: `${props.gap}px`,\n borderRadius: `${props.borderRadius}px`,\n paddingLeft: `${props.horizontalPadding}px`,\n paddingRight: `${props.horizontalPadding}px`,\n color: props.textColor,\n fontWeight: props.fontWeight,\n ...props.counterStyle\n}));\n\nconst digitStyles = computed(() => ({\n height: `${digitHeight.value}px`,\n ...props.digitStyle\n}));\n\nconst topGradientStyles = computed(\n (): CSSProperties => ({\n height: `${props.gradientHeight}px`,\n background: `linear-gradient(to bottom, ${props.gradientFrom}, ${props.gradientTo})`\n })\n);\n\nconst bottomGradientStyles = computed(\n (): CSSProperties => ({\n height: `${props.gradientHeight}px`,\n background: `linear-gradient(to top, ${props.gradientFrom}, ${props.gradientTo})`\n })\n);\n\nconst springValues = ref<Record<number, number>>({});\n\nconst initializeSpringValues = () => {\n props.places.forEach(place => {\n springValues.value[place] = Math.floor(props.value / place);\n });\n};\n\ninitializeSpringValues();\n\nwatch(\n () => props.value,\n (newValue, oldValue) => {\n if (newValue === oldValue) return;\n\n props.places.forEach(place => {\n const newRoundedValue = Math.floor(newValue / place);\n const oldRoundedValue = springValues.value[place];\n\n if (newRoundedValue !== oldRoundedValue) {\n springValues.value[place] = newRoundedValue;\n }\n });\n },\n { immediate: true }\n);\n\nwatch(\n () => digitHeight.value,\n () => {\n positionCache.clear();\n }\n);\n\nconst positionCache = new Map<string, number>();\n\nconst getDigitPosition = (place: number, digit: number): number => {\n const springValue = springValues.value[place] || 0;\n const cacheKey = `${place}-${digit}-${springValue}`;\n\n if (positionCache.has(cacheKey)) {\n return positionCache.get(cacheKey)!;\n }\n\n const placeValue = springValue % 10;\n const offset = (10 + digit - placeValue) % 10;\n let position = offset * digitHeight.value;\n\n if (offset > 5) {\n position -= 10 * digitHeight.value;\n }\n\n if (positionCache.size > 200) {\n const firstKey = positionCache.keys().next().value;\n if (typeof firstKey === 'string') {\n positionCache.delete(firstKey);\n }\n }\n\n positionCache.set(cacheKey, position);\n return position;\n};\n</script>\n","path":"Counter/Counter.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.10.2"}],"devDependencies":[],"categories":["Components"]}
|
||||
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
{"name":"TiltedCard","title":"TiltedCard","description":"3D perspective tilt card reacting to pointer.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n <figure\n ref=\"cardRef\"\n class=\"relative w-full h-full [perspective:800px] flex flex-col items-center justify-center\"\n :style=\"{\n height: containerHeight,\n width: containerWidth\n }\"\n @mousemove=\"handleMouse\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n >\n <div v-if=\"showMobileWarning\" class=\"absolute top-4 text-center text-sm block sm:hidden\">\n This effect is not optimized for mobile. Check on desktop.\n </div>\n\n <Motion\n tag=\"div\"\n class=\"relative [transform-style:preserve-3d]\"\n :style=\"{\n width: imageWidth,\n height: imageHeight\n }\"\n :animate=\"{\n rotateX: rotateXValue,\n rotateY: rotateYValue,\n scale: scaleValue\n }\"\n :transition=\"springTransition\"\n >\n <img\n :src=\"imageSrc\"\n :alt=\"altText\"\n class=\"absolute top-0 left-0 object-cover rounded-[15px] will-change-transform [transform:translateZ(0)]\"\n :style=\"{\n width: imageWidth,\n height: imageHeight\n }\"\n />\n\n <Motion\n v-if=\"displayOverlayContent && overlayContent\"\n tag=\"div\"\n class=\"absolute top-0 left-0 z-[2] will-change-transform [transform:translateZ(30px)]\"\n >\n <slot name=\"overlay\" />\n </Motion>\n </Motion>\n\n <Motion\n v-if=\"showTooltip && captionText\"\n tag=\"figcaption\"\n class=\"pointer-events-none absolute left-0 top-0 rounded-[4px] bg-white px-[10px] py-[4px] text-[10px] text-[#2d2d2d] opacity-0 z-[3] hidden sm:block\"\n :animate=\"{\n x: xValue,\n y: yValue,\n opacity: opacityValue,\n rotate: rotateFigcaptionValue\n }\"\n :transition=\"tooltipTransition\"\n >\n {{ captionText }}\n </Motion>\n </figure>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, useTemplateRef } from 'vue';\nimport { Motion } from 'motion-v';\n\ninterface TiltedCardProps {\n imageSrc: string;\n altText?: string;\n captionText?: string;\n containerHeight?: string;\n containerWidth?: string;\n imageHeight?: string;\n imageWidth?: string;\n scaleOnHover?: number;\n rotateAmplitude?: number;\n showMobileWarning?: boolean;\n showTooltip?: boolean;\n overlayContent?: boolean;\n displayOverlayContent?: boolean;\n}\n\nconst props = withDefaults(defineProps<TiltedCardProps>(), {\n altText: 'Tilted card image',\n captionText: '',\n containerHeight: '300px',\n containerWidth: '100%',\n imageHeight: '300px',\n imageWidth: '300px',\n scaleOnHover: 1.1,\n rotateAmplitude: 14,\n showMobileWarning: true,\n showTooltip: true,\n overlayContent: false,\n displayOverlayContent: false\n});\n\nconst cardRef = useTemplateRef<HTMLElement>('cardRef');\nconst xValue = ref(0);\nconst yValue = ref(0);\nconst rotateXValue = ref(0);\nconst rotateYValue = ref(0);\nconst scaleValue = ref(1);\nconst opacityValue = ref(0);\nconst rotateFigcaptionValue = ref(0);\nconst lastY = ref(0);\n\nconst springTransition = computed(() => ({\n type: 'spring' as const,\n damping: 30,\n stiffness: 100,\n mass: 2\n}));\n\nconst tooltipTransition = computed(() => ({\n type: 'spring' as const,\n damping: 30,\n stiffness: 350,\n mass: 1\n}));\n\nfunction handleMouse(e: MouseEvent) {\n if (!cardRef.value) return;\n\n const rect = cardRef.value.getBoundingClientRect();\n const offsetX = e.clientX - rect.left - rect.width / 2;\n const offsetY = e.clientY - rect.top - rect.height / 2;\n\n const rotationX = (offsetY / (rect.height / 2)) * -props.rotateAmplitude;\n const rotationY = (offsetX / (rect.width / 2)) * props.rotateAmplitude;\n\n rotateXValue.value = rotationX;\n rotateYValue.value = rotationY;\n\n xValue.value = e.clientX - rect.left;\n yValue.value = e.clientY - rect.top;\n\n const velocityY = offsetY - lastY.value;\n rotateFigcaptionValue.value = -velocityY * 0.6;\n lastY.value = offsetY;\n}\n\nfunction handleMouseEnter() {\n scaleValue.value = props.scaleOnHover;\n opacityValue.value = 1;\n}\n\nfunction handleMouseLeave() {\n opacityValue.value = 0;\n scaleValue.value = 1;\n rotateXValue.value = 0;\n rotateYValue.value = 0;\n rotateFigcaptionValue.value = 0;\n}\n</script>\n","path":"TiltedCard/TiltedCard.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["Components"]}
|
||||
{"name":"TiltedCard","title":"TiltedCard","description":"3D perspective tilt card reacting to pointer.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n <figure\n ref=\"cardRef\"\n class=\"relative w-full h-full [perspective:800px] flex flex-col items-center justify-center\"\n :style=\"{\n height: containerHeight,\n width: containerWidth\n }\"\n @mousemove=\"handleMouse\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n >\n <div v-if=\"showMobileWarning\" class=\"absolute top-4 text-center text-sm block sm:hidden\">\n This effect is not optimized for mobile. Check on desktop.\n </div>\n\n <Motion\n tag=\"div\"\n class=\"relative [transform-style:preserve-3d]\"\n :style=\"{\n width: imageWidth,\n height: imageHeight\n }\"\n :animate=\"{\n rotateX: rotateXValue,\n rotateY: rotateYValue,\n scale: scaleValue\n }\"\n :transition=\"springTransition\"\n >\n <img\n :src=\"imageSrc\"\n :alt=\"altText\"\n class=\"absolute top-0 left-0 object-cover rounded-[15px] will-change-transform [transform:translateZ(0)]\"\n :style=\"{\n width: imageWidth,\n height: imageHeight\n }\"\n />\n\n <Motion\n v-if=\"displayOverlayContent && overlayContent\"\n tag=\"div\"\n class=\"absolute top-0 left-0 z-[2] will-change-transform [transform:translateZ(30px)]\"\n >\n <slot name=\"overlay\" />\n </Motion>\n </Motion>\n\n <Motion\n v-if=\"showTooltip && captionText\"\n tag=\"figcaption\"\n class=\"pointer-events-none absolute left-0 top-0 rounded-[4px] bg-white px-[10px] py-[4px] text-[10px] text-[#2d2d2d] opacity-0 z-[3] hidden sm:block\"\n :animate=\"{\n x: xValue,\n y: yValue,\n opacity: opacityValue,\n rotate: rotateFigcaptionValue\n }\"\n :transition=\"tooltipTransition\"\n >\n {{ captionText }}\n </Motion>\n </figure>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, useTemplateRef } from 'vue';\nimport { Motion } from 'motion-v';\n\ninterface TiltedCardProps {\n imageSrc: string;\n altText?: string;\n captionText?: string;\n containerHeight?: string;\n containerWidth?: string;\n imageHeight?: string;\n imageWidth?: string;\n scaleOnHover?: number;\n rotateAmplitude?: number;\n showMobileWarning?: boolean;\n showTooltip?: boolean;\n overlayContent?: boolean;\n displayOverlayContent?: boolean;\n}\n\nconst props = withDefaults(defineProps<TiltedCardProps>(), {\n altText: 'Tilted card image',\n captionText: '',\n containerHeight: '300px',\n containerWidth: '100%',\n imageHeight: '300px',\n imageWidth: '300px',\n scaleOnHover: 1.1,\n rotateAmplitude: 14,\n showMobileWarning: true,\n showTooltip: true,\n overlayContent: false,\n displayOverlayContent: false\n});\n\nconst cardRef = useTemplateRef<HTMLElement>('cardRef');\nconst xValue = ref(0);\nconst yValue = ref(0);\nconst rotateXValue = ref(0);\nconst rotateYValue = ref(0);\nconst scaleValue = ref(1);\nconst opacityValue = ref(0);\nconst rotateFigcaptionValue = ref(0);\nconst lastY = ref(0);\n\nconst springTransition = computed(() => ({\n type: 'spring' as const,\n damping: 30,\n stiffness: 100,\n mass: 2\n}));\n\nconst tooltipTransition = computed(() => ({\n type: 'spring' as const,\n damping: 30,\n stiffness: 350,\n mass: 1\n}));\n\nfunction handleMouse(e: MouseEvent) {\n if (!cardRef.value) return;\n\n const rect = cardRef.value.getBoundingClientRect();\n const offsetX = e.clientX - rect.left - rect.width / 2;\n const offsetY = e.clientY - rect.top - rect.height / 2;\n\n const rotationX = (offsetY / (rect.height / 2)) * -props.rotateAmplitude;\n const rotationY = (offsetX / (rect.width / 2)) * props.rotateAmplitude;\n\n rotateXValue.value = rotationX;\n rotateYValue.value = rotationY;\n\n xValue.value = e.clientX - rect.left;\n yValue.value = e.clientY - rect.top;\n\n const velocityY = offsetY - lastY.value;\n rotateFigcaptionValue.value = -velocityY * 0.6;\n lastY.value = offsetY;\n}\n\nfunction handleMouseEnter() {\n scaleValue.value = props.scaleOnHover;\n opacityValue.value = 1;\n}\n\nfunction handleMouseLeave() {\n opacityValue.value = 0;\n scaleValue.value = 1;\n rotateXValue.value = 0;\n rotateYValue.value = 0;\n rotateFigcaptionValue.value = 0;\n}\n</script>\n","path":"TiltedCard/TiltedCard.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.10.2"}],"devDependencies":[],"categories":["Components"]}
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user