atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 22:49:31 -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 code from '@content/Components/Counter/Counter.vue?raw';
import { createCodeObject } from '../../../types/code' import { createCodeObject } from '../../../types/code';
export const counter = createCodeObject(code, 'Components/Counter', { export const counter = createCodeObject(code, 'Components/Counter', {
installation: `npm i motion-v`, installation: `npm i motion-v`,
@@ -13,5 +13,5 @@ export const counter = createCodeObject(code, 'Components/Counter', {
:gap="10" :gap="10"
textColor="white" textColor="white"
:fontWeight="900" :fontWeight="900"
/>`, />`
}) });

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

@@ -50,17 +50,17 @@ const props = withDefaults(defineProps<RollingGalleryProps>(), {
}); });
const DEFAULT_IMAGES = shallowRef([ 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-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-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-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-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-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-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://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://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-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-1585970480901-90d6bb2a48b5?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
]) ]);
const isScreenSizeSm = ref(false); const isScreenSizeSm = ref(false);
const rotateYValue = ref(0); 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"> <div class="flex gap-4 bottom-4 justify-center mt-4 absolute left-1/2 transform -translate-x-1/2">
<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 > 0 && value--" @click="value > 0 && value--"
> >
- -
</button> </button>
<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++" @click="value < 999 && value++"
> >
+ +
@@ -32,29 +32,11 @@
</div> </div>
<Customize> <Customize>
<PreviewSlider <PreviewSlider title="Value" v-model="value" :min="0" :max="999" :step="1" />
title="Value"
v-model="value"
:min="0"
:max="999"
:step="1"
/>
<PreviewSlider <PreviewSlider title="Gap" v-model="gap" :min="0" :max="50" :step="5" />
title="Gap"
v-model="gap"
:min="0"
:max="50"
:step="5"
/>
<PreviewSlider <PreviewSlider title="Font Size" v-model="fontSize" :min="40" :max="200" :step="10" />
title="Font Size"
v-model="fontSize"
:min="40"
:max="200"
:step="10"
/>
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
@@ -72,124 +54,124 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue' import TabbedLayout from '../../components/common/TabbedLayout.vue';
import Customize from '../../components/common/Customize.vue' import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue' import PreviewSlider from '../../components/common/PreviewSlider.vue';
import PropTable from '../../components/common/PropTable.vue' import PropTable from '../../components/common/PropTable.vue';
import CodeExample from '../../components/code/CodeExample.vue' import CodeExample from '../../components/code/CodeExample.vue';
import CliInstallation from '../../components/code/CliInstallation.vue' import CliInstallation from '../../components/code/CliInstallation.vue';
import Dependencies from '../../components/code/Dependencies.vue' import Dependencies from '../../components/code/Dependencies.vue';
import Counter from '../../content/Components/Counter/Counter.vue' import Counter from '../../content/Components/Counter/Counter.vue';
import { counter } from '../../constants/code/Components/counterCode' import { counter } from '../../constants/code/Components/counterCode';
const value = ref(123) const value = ref(123);
const fontSize = ref(80) const fontSize = ref(80);
const gap = ref(10) const gap = ref(10);
const propData = [ const propData = [
{ {
name: "value", name: 'value',
type: "number", type: 'number',
default: "N/A (required)", default: 'N/A (required)',
description: "The numeric value to display in the counter." description: 'The numeric value to display in the counter.'
}, },
{ {
name: "fontSize", name: 'fontSize',
type: "number", type: 'number',
default: "100", default: '100',
description: "The base font size used for the counter digits." description: 'The base font size used for the counter digits.'
}, },
{ {
name: "padding", name: 'padding',
type: "number", type: 'number',
default: "0", default: '0',
description: "Additional padding added to the digit height." description: 'Additional padding added to the digit height.'
}, },
{ {
name: "places", name: 'places',
type: "number[]", type: 'number[]',
default: "[100, 10, 1]", default: '[100, 10, 1]',
description: "An array of place values to determine which digits to display." description: 'An array of place values to determine which digits to display.'
}, },
{ {
name: "gap", name: 'gap',
type: "number", type: 'number',
default: "8", default: '8',
description: "The gap (in pixels) between each digit." description: 'The gap (in pixels) between each digit.'
}, },
{ {
name: "borderRadius", name: 'borderRadius',
type: "number", type: 'number',
default: "4", default: '4',
description: "The border radius (in pixels) for the counter container." description: 'The border radius (in pixels) for the counter container.'
}, },
{ {
name: "horizontalPadding", name: 'horizontalPadding',
type: "number", type: 'number',
default: "8", default: '8',
description: "The horizontal padding (in pixels) for the counter container." description: 'The horizontal padding (in pixels) for the counter container.'
}, },
{ {
name: "textColor", name: 'textColor',
type: "string", type: 'string',
default: "'white'", default: "'white'",
description: "The text color for the counter digits." description: 'The text color for the counter digits.'
}, },
{ {
name: "fontWeight", name: 'fontWeight',
type: "string | number", type: 'string | number',
default: "'bold'", default: "'bold'",
description: "The font weight of the counter digits." description: 'The font weight of the counter digits.'
}, },
{ {
name: "containerStyle", name: 'containerStyle',
type: "CSSProperties", type: 'CSSProperties',
default: "{}", default: '{}',
description: "Custom inline styles for the outer container." description: 'Custom inline styles for the outer container.'
}, },
{ {
name: "counterStyle", name: 'counterStyle',
type: "CSSProperties", type: 'CSSProperties',
default: "{}", default: '{}',
description: "Custom inline styles for the counter element." description: 'Custom inline styles for the counter element.'
}, },
{ {
name: "digitStyle", name: 'digitStyle',
type: "CSSProperties", type: 'CSSProperties',
default: "{}", default: '{}',
description: "Custom inline styles for each digit container." description: 'Custom inline styles for each digit container.'
}, },
{ {
name: "gradientHeight", name: 'gradientHeight',
type: "number", type: 'number',
default: "16", default: '16',
description: "The height (in pixels) of the gradient overlays." description: 'The height (in pixels) of the gradient overlays.'
}, },
{ {
name: "gradientFrom", name: 'gradientFrom',
type: "string", type: 'string',
default: "'black'", default: "'black'",
description: "The starting color for the gradient overlays." description: 'The starting color for the gradient overlays.'
}, },
{ {
name: "gradientTo", name: 'gradientTo',
type: "string", type: 'string',
default: "'transparent'", default: "'transparent'",
description: "The ending color for the gradient overlays." description: 'The ending color for the gradient overlays.'
}, },
{ {
name: "topGradientStyle", name: 'topGradientStyle',
type: "CSSProperties", type: 'CSSProperties',
default: "undefined", default: 'undefined',
description: "Custom inline styles for the top gradient overlay." description: 'Custom inline styles for the top gradient overlay.'
}, },
{ {
name: "bottomGradientStyle", name: 'bottomGradientStyle',
type: "CSSProperties", type: 'CSSProperties',
default: "undefined", default: 'undefined',
description: "Custom inline styles for the bottom gradient overlay." description: 'Custom inline styles for the bottom gradient overlay.'
}, }
] ];
</script> </script>

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

@@ -17,15 +17,9 @@
</div> </div>
<Customize> <Customize>
<PreviewSwitch <PreviewSwitch title="Autoplay" v-model="autoplay" />
title="Autoplay"
v-model="autoplay"
/>
<PreviewSwitch <PreviewSwitch title="Pause on Hover" v-model="pauseOnHover" />
title="Pause on Hover"
v-model="pauseOnHover"
/>
</Customize> </Customize>
<PropTable :data="propData" /> <PropTable :data="propData" />
@@ -43,39 +37,39 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue';
import TabbedLayout from '@/components/common/TabbedLayout.vue' import TabbedLayout from '@/components/common/TabbedLayout.vue';
import PropTable from '@/components/common/PropTable.vue' import PropTable from '@/components/common/PropTable.vue';
import Dependencies from '@/components/code/Dependencies.vue' import Dependencies from '@/components/code/Dependencies.vue';
import CliInstallation from '@/components/code/CliInstallation.vue' import CliInstallation from '@/components/code/CliInstallation.vue';
import CodeExample from '@/components/code/CodeExample.vue' import CodeExample from '@/components/code/CodeExample.vue';
import Customize from '@/components/common/Customize.vue' import Customize from '@/components/common/Customize.vue';
import PreviewSwitch from '@/components/common/PreviewSwitch.vue' import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
import RollingGallery from '@/content/Components/RollingGallery/RollingGallery.vue' import RollingGallery from '@/content/Components/RollingGallery/RollingGallery.vue';
import { rollingGallery } from '@/constants/code/Components/rollingGalleryCode' import { rollingGallery } from '@/constants/code/Components/rollingGalleryCode';
const autoplay = ref(true) const autoplay = ref(true);
const pauseOnHover = ref(true) const pauseOnHover = ref(true);
const customImages = ref<string[]>([]) const customImages = ref<string[]>([]);
const propData = [ const propData = [
{ {
name: 'autoplay', name: 'autoplay',
type: 'boolean', type: 'boolean',
default: 'false', 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', name: 'pauseOnHover',
type: 'boolean', type: 'boolean',
default: 'false', 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', name: 'images',
type: 'string[]', type: 'string[]',
default: '[]', default: '[]',
description: 'Array of image URLs to display in the gallery.', description: 'Array of image URLs to display in the gallery.'
}, }
] ];
</script> </script>