atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 14:39:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
David Haz
2025-07-24 15:49:02 +03:00
parent 84f04f75d9
commit 64351cf078
4 changed files with 119 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/constants/code/Components/counterCode.ts
View File

@@ -1,5 +1,5 @@
import code from '@content/Components/Counter/Counter.vue?raw'
import { createCodeObject } from '../../../types/code'
import code from '@content/Components/Counter/Counter.vue?raw';
import { createCodeObject } from '../../../types/code';
export const counter = createCodeObject(code, 'Components/Counter', {
installation: `npm i motion-v`,
@@ -13,5 +13,5 @@ export const counter = createCodeObject(code, 'Components/Counter', {
:gap="10"
textColor="white"
:fontWeight="900"
/>`,
})
/>`
});

22
src/content/Components/RollingGallery/RollingGallery.vue
View File

@@ -50,17 +50,17 @@ const props = withDefaults(defineProps<RollingGalleryProps>(), {
});
const DEFAULT_IMAGES = shallowRef([
"https://images.unsplash.com/photo-1528181304800-259b08848526?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1506665531195-3566af2b4dfa?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?q=80&w=3456&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1495103033382-fe343886b671?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1506781961370-37a89d6b3095?q=80&w=3264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1599576838688-8a6c11263108?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1494094892896-7f14a4433b7a?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://plus.unsplash.com/premium_photo-1664910706524-e783eed89e71?q=80&w=3869&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1503788311183-fa3bf9c4bc32?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1585970480901-90d6bb2a48b5?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
])
'https://images.unsplash.com/photo-1528181304800-259b08848526?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1506665531195-3566af2b4dfa?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?q=80&w=3456&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1495103033382-fe343886b671?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1506781961370-37a89d6b3095?q=80&w=3264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1599576838688-8a6c11263108?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1494094892896-7f14a4433b7a?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://plus.unsplash.com/premium_photo-1664910706524-e783eed89e71?q=80&w=3869&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1503788311183-fa3bf9c4bc32?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
'https://images.unsplash.com/photo-1585970480901-90d6bb2a48b5?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
]);
const isScreenSizeSm = ref(false);
const rotateYValue = ref(0);

186
src/demo/Components/CounterDemo.vue
View File

@@ -17,13 +17,13 @@
<div class="flex gap-4 bottom-4 justify-center mt-4 absolute left-1/2 transform -translate-x-1/2">
<button
class="bg-[#170D27] rounded-[10px] border border-[#271E37] hover:bg-[#271E37] text-white h-10 w-10 transition-colors"
class="cursor-pointer bg-[#0b0b0b] rounded-[10px] border border-[#333] hover:bg-[#222] text-white h-10 w-10 transition-colors"
@click="value > 0 && value--"
>
-
</button>
<button
class="bg-[#170D27] rounded-[10px] border border-[#271E37] hover:bg-[#271E37] text-white h-10 w-10 transition-colors"
class="cursor-pointer bg-[#0b0b0b] rounded-[10px] border border-[#333] hover:bg-[#222] text-white h-10 w-10 transition-colors"
@click="value < 999 && value++"
>
+
@@ -32,29 +32,11 @@
</div>
<Customize>
<PreviewSlider
title="Value"
v-model="value"
:min="0"
:max="999"
:step="1"
/>
<PreviewSlider title="Value" v-model="value" :min="0" :max="999" :step="1" />
<PreviewSlider
title="Gap"
v-model="gap"
:min="0"
:max="50"
:step="5"
/>
<PreviewSlider title="Gap" v-model="gap" :min="0" :max="50" :step="5" />
<PreviewSlider
title="Font Size"
v-model="fontSize"
:min="40"
:max="200"
:step="10"
/>
<PreviewSlider title="Font Size" v-model="fontSize" :min="40" :max="200" :step="10" />
</Customize>
<PropTable :data="propData" />
@@ -72,124 +54,124 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import TabbedLayout from '../../components/common/TabbedLayout.vue'
import Customize from '../../components/common/Customize.vue'
import PreviewSlider from '../../components/common/PreviewSlider.vue'
import PropTable from '../../components/common/PropTable.vue'
import CodeExample from '../../components/code/CodeExample.vue'
import CliInstallation from '../../components/code/CliInstallation.vue'
import Dependencies from '../../components/code/Dependencies.vue'
import { ref } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PropTable from '../../components/common/PropTable.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import Counter from '../../content/Components/Counter/Counter.vue'
import { counter } from '../../constants/code/Components/counterCode'
import Counter from '../../content/Components/Counter/Counter.vue';
import { counter } from '../../constants/code/Components/counterCode';
const value = ref(123)
const fontSize = ref(80)
const gap = ref(10)
const value = ref(123);
const fontSize = ref(80);
const gap = ref(10);
const propData = [
{
name: "value",
type: "number",
default: "N/A (required)",
description: "The numeric value to display in the counter."
name: 'value',
type: 'number',
default: 'N/A (required)',
description: 'The numeric value to display in the counter.'
},
{
name: "fontSize",
type: "number",
default: "100",
description: "The base font size used for the counter digits."
name: 'fontSize',
type: 'number',
default: '100',
description: 'The base font size used for the counter digits.'
},
{
name: "padding",
type: "number",
default: "0",
description: "Additional padding added to the digit height."
name: 'padding',
type: 'number',
default: '0',
description: 'Additional padding added to the digit height.'
},
{
name: "places",
type: "number[]",
default: "[100, 10, 1]",
description: "An array of place values to determine which digits to display."
name: 'places',
type: 'number[]',
default: '[100, 10, 1]',
description: 'An array of place values to determine which digits to display.'
},
{
name: "gap",
type: "number",
default: "8",
description: "The gap (in pixels) between each digit."
name: 'gap',
type: 'number',
default: '8',
description: 'The gap (in pixels) between each digit.'
},
{
name: "borderRadius",
type: "number",
default: "4",
description: "The border radius (in pixels) for the counter container."
name: 'borderRadius',
type: 'number',
default: '4',
description: 'The border radius (in pixels) for the counter container.'
},
{
name: "horizontalPadding",
type: "number",
default: "8",
description: "The horizontal padding (in pixels) for the counter container."
name: 'horizontalPadding',
type: 'number',
default: '8',
description: 'The horizontal padding (in pixels) for the counter container.'
},
{
name: "textColor",
type: "string",
name: 'textColor',
type: 'string',
default: "'white'",
description: "The text color for the counter digits."
description: 'The text color for the counter digits.'
},
{
name: "fontWeight",
type: "string | number",
name: 'fontWeight',
type: 'string | number',
default: "'bold'",
description: "The font weight of the counter digits."
description: 'The font weight of the counter digits.'
},
{
name: "containerStyle",
type: "CSSProperties",
default: "{}",
description: "Custom inline styles for the outer container."
name: 'containerStyle',
type: 'CSSProperties',
default: '{}',
description: 'Custom inline styles for the outer container.'
},
{
name: "counterStyle",
type: "CSSProperties",
default: "{}",
description: "Custom inline styles for the counter element."
name: 'counterStyle',
type: 'CSSProperties',
default: '{}',
description: 'Custom inline styles for the counter element.'
},
{
name: "digitStyle",
type: "CSSProperties",
default: "{}",
description: "Custom inline styles for each digit container."
name: 'digitStyle',
type: 'CSSProperties',
default: '{}',
description: 'Custom inline styles for each digit container.'
},
{
name: "gradientHeight",
type: "number",
default: "16",
description: "The height (in pixels) of the gradient overlays."
name: 'gradientHeight',
type: 'number',
default: '16',
description: 'The height (in pixels) of the gradient overlays.'
},
{
name: "gradientFrom",
type: "string",
name: 'gradientFrom',
type: 'string',
default: "'black'",
description: "The starting color for the gradient overlays."
description: 'The starting color for the gradient overlays.'
},
{
name: "gradientTo",
type: "string",
name: 'gradientTo',
type: 'string',
default: "'transparent'",
description: "The ending color for the gradient overlays."
description: 'The ending color for the gradient overlays.'
},
{
name: "topGradientStyle",
type: "CSSProperties",
default: "undefined",
description: "Custom inline styles for the top gradient overlay."
name: 'topGradientStyle',
type: 'CSSProperties',
default: 'undefined',
description: 'Custom inline styles for the top gradient overlay.'
},
{
name: "bottomGradientStyle",
type: "CSSProperties",
default: "undefined",
description: "Custom inline styles for the bottom gradient overlay."
},
]
name: 'bottomGradientStyle',
type: 'CSSProperties',
default: 'undefined',
description: 'Custom inline styles for the bottom gradient overlay.'
}
];
</script>

46
src/demo/Components/RollingGalleryDemo.vue
View File

@@ -17,15 +17,9 @@
</div>
<Customize>
<PreviewSwitch
title="Autoplay"
v-model="autoplay"
/>
<PreviewSwitch title="Autoplay" v-model="autoplay" />
<PreviewSwitch
title="Pause on Hover"
v-model="pauseOnHover"
/>
<PreviewSwitch title="Pause on Hover" v-model="pauseOnHover" />
</Customize>
<PropTable :data="propData" />
@@ -43,39 +37,39 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import TabbedLayout from '@/components/common/TabbedLayout.vue'
import PropTable from '@/components/common/PropTable.vue'
import Dependencies from '@/components/code/Dependencies.vue'
import CliInstallation from '@/components/code/CliInstallation.vue'
import CodeExample from '@/components/code/CodeExample.vue'
import Customize from '@/components/common/Customize.vue'
import PreviewSwitch from '@/components/common/PreviewSwitch.vue'
import RollingGallery from '@/content/Components/RollingGallery/RollingGallery.vue'
import { rollingGallery } from '@/constants/code/Components/rollingGalleryCode'
import { ref } from 'vue';
import TabbedLayout from '@/components/common/TabbedLayout.vue';
import PropTable from '@/components/common/PropTable.vue';
import Dependencies from '@/components/code/Dependencies.vue';
import CliInstallation from '@/components/code/CliInstallation.vue';
import CodeExample from '@/components/code/CodeExample.vue';
import Customize from '@/components/common/Customize.vue';
import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
import RollingGallery from '@/content/Components/RollingGallery/RollingGallery.vue';
import { rollingGallery } from '@/constants/code/Components/rollingGalleryCode';
const autoplay = ref(true)
const pauseOnHover = ref(true)
const customImages = ref<string[]>([])
const autoplay = ref(true);
const pauseOnHover = ref(true);
const customImages = ref<string[]>([]);
const propData = [
{
name: 'autoplay',
type: 'boolean',
default: 'false',
description: 'Controls the autoplay toggle of the carousel. When turned on, it rotates and loops infinitely.',
description: 'Controls the autoplay toggle of the carousel. When turned on, it rotates and loops infinitely.'
},
{
name: 'pauseOnHover',
type: 'boolean',
default: 'false',
description: 'Allows the carousel to be paused on hover when autoplay is turned on.',
description: 'Allows the carousel to be paused on hover when autoplay is turned on.'
},
{
name: 'images',
type: 'string[]',
default: '[]',
description: 'Array of image URLs to display in the gallery.',
},
]
description: 'Array of image URLs to display in the gallery.'
}
];
</script>