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

Add prettier config, format codebase

Browse Source
This commit is contained in:
David Haz
2025-07-12 11:59:33 +03:00
parent ac8b2c04d8
commit f4d97ee94e
211 changed files with 10586 additions and 8810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/demo/Components/DockDemo.vue
View File

@@ -2,31 +2,73 @@
<div class="dock-demo">
<TabbedLayout>
<template #preview>
<div class="demo-container" style="min-height: 400px; position: relative;">
<div class="demo-container" style="min-height: 400px; position: relative">
<div class="demo-content">
<Dock :key="rerenderKey" :items="items" :panel-height="panelHeight" :base-item-size="baseItemSize"
:magnification="magnification" :distance="200" :dock-height="256"
:spring="{ mass: 0.1, stiffness: 150, damping: 12 }" />
<Dock
:key="rerenderKey"
:items="items"
:panel-height="panelHeight"
:base-item-size="baseItemSize"
:magnification="magnification"
:distance="200"
:dock-height="256"
:spring="{ mass: 0.1, stiffness: 150, damping: 12 }"
/>
</div>
<div
class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none">
class="absolute inset-0 flex items-center justify-center pointer-events-none text-[4rem] font-[900] text-[#222] select-none"
>
Try It!
</div>
</div>
<Customize>
<PreviewSlider title="Background Height" :min="30" :max="200" :step="10" :model-value="panelHeight"
@update:model-value="(val: number) => { panelHeight = val; forceRerender(); }" />
<PreviewSlider
title="Background Height"
:min="30"
:max="200"
:step="10"
:model-value="panelHeight"
@update:model-value="
(val: number) => {
panelHeight = val;
forceRerender();
}
"
/>
<PreviewSlider title="Item Size" :min="20" :max="60" :step="10" :model-value="baseItemSize"
@update:model-value="(val: number) => { baseItemSize = val; forceRerender(); }" />
<PreviewSlider
title="Item Size"
:min="20"
:max="60"
:step="10"
:model-value="baseItemSize"
@update:model-value="
(val: number) => {
baseItemSize = val;
forceRerender();
}
"
/>
<PreviewSlider title="Magnification" :min="50" :max="100" :step="10" :model-value="magnification"
@update:model-value="(val: number) => { magnification = val; forceRerender(); }" />
<PreviewSlider
title="Magnification"
:min="50"
:max="100"
:step="10"
:model-value="magnification"
@update:model-value="
(val: number) => {
magnification = val;
forceRerender();
}
"
/>
</Customize>
<PropTable :data="propData" />
<Dependencies :dependency-list="['motion-v']" />
</template>
@@ -42,96 +84,97 @@
</template>
<script setup lang="ts">
import { ref, h } from 'vue'
import TabbedLayout from '../../components/common/TabbedLayout.vue'
import PropTable from '../../components/common/PropTable.vue'
import CliInstallation from '../../components/code/CliInstallation.vue'
import CodeExample from '../../components/code/CodeExample.vue'
import Dependencies from '../../components/code/Dependencies.vue'
import Customize from '../../components/common/Customize.vue'
import PreviewSlider from '../../components/common/PreviewSlider.vue'
import Dock from '../../content/Components/Dock/Dock.vue'
import { dock } from '@/constants/code/Components/dockCode'
import { useToast } from 'primevue/usetoast'
import { useForceRerender } from '@/composables/useForceRerender'
import { ref, h } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import PropTable from '../../components/common/PropTable.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
import CodeExample from '../../components/code/CodeExample.vue';
import Dependencies from '../../components/code/Dependencies.vue';
import Customize from '../../components/common/Customize.vue';
import PreviewSlider from '../../components/common/PreviewSlider.vue';
import Dock from '../../content/Components/Dock/Dock.vue';
import { dock } from '@/constants/code/Components/dockCode';
import { useToast } from 'primevue/usetoast';
import { useForceRerender } from '@/composables/useForceRerender';
const panelHeight = ref(68)
const baseItemSize = ref(50)
const magnification = ref(70)
const panelHeight = ref(68);
const baseItemSize = ref(50);
const magnification = ref(70);
const toast = useToast()
const { rerenderKey, forceRerender } = useForceRerender()
const toast = useToast();
const { rerenderKey, forceRerender } = useForceRerender();
const HomeIcon = () => h('i', { class: 'pi pi-home', style: { fontSize: '18px', color: 'white' } })
const ArchiveIcon = () => h('i', { class: 'pi pi-inbox', style: { fontSize: '18px', color: 'white' } })
const ProfileIcon = () => h('i', { class: 'pi pi-user', style: { fontSize: '18px', color: 'white' } })
const SettingsIcon = () => h('i', { class: 'pi pi-cog', style: { fontSize: '18px', color: 'white' } })
const HomeIcon = () => h('i', { class: 'pi pi-home', style: { fontSize: '18px', color: 'white' } });
const ArchiveIcon = () => h('i', { class: 'pi pi-inbox', style: { fontSize: '18px', color: 'white' } });
const ProfileIcon = () => h('i', { class: 'pi pi-user', style: { fontSize: '18px', color: 'white' } });
const SettingsIcon = () => h('i', { class: 'pi pi-cog', style: { fontSize: '18px', color: 'white' } });
const showAlert = (message: string) => {
toast.add({
severity: 'secondary',
summary: `${message} button was clicked`,
life: 3000
})
}
});
};
const items = [
{ icon: HomeIcon, label: 'Home', onClick: () => showAlert('Home') },
{ icon: ArchiveIcon, label: 'Archive', onClick: () => showAlert('Archive') },
{ icon: ProfileIcon, label: 'Profile', onClick: () => showAlert('Profile') },
{ icon: SettingsIcon, label: 'Settings', onClick: () => showAlert('Settings') },
]
{ icon: SettingsIcon, label: 'Settings', onClick: () => showAlert('Settings') }
];
const propData = [
{
name: "items",
type: "DockItemData[]",
default: "[]",
description: "Array of dock items. Each item should include an icon, label, onClick handler, and an optional className."
name: 'items',
type: 'DockItemData[]',
default: '[]',
description:
'Array of dock items. Each item should include an icon, label, onClick handler, and an optional className.'
},
{
name: "className",
type: "string",
name: 'className',
type: 'string',
default: '""',
description: "Additional CSS classes for the dock panel."
description: 'Additional CSS classes for the dock panel.'
},
{
name: "distance",
type: "number",
default: "200",
description: "Pixel distance used to calculate the magnification effect based on mouse proximity."
name: 'distance',
type: 'number',
default: '200',
description: 'Pixel distance used to calculate the magnification effect based on mouse proximity.'
},
{
name: "panelHeight",
type: "number",
default: "68",
description: "Height (in pixels) of the dock panel."
name: 'panelHeight',
type: 'number',
default: '68',
description: 'Height (in pixels) of the dock panel.'
},
{
name: "baseItemSize",
type: "number",
default: "50",
description: "The base size (in pixels) for each dock item."
name: 'baseItemSize',
type: 'number',
default: '50',
description: 'The base size (in pixels) for each dock item.'
},
{
name: "dockHeight",
type: "number",
default: "256",
description: "Maximum height (in pixels) of the dock container."
name: 'dockHeight',
type: 'number',
default: '256',
description: 'Maximum height (in pixels) of the dock container.'
},
{
name: "magnification",
type: "number",
default: "70",
description: "The magnified size (in pixels) applied to a dock item when hovered."
name: 'magnification',
type: 'number',
default: '70',
description: 'The magnified size (in pixels) applied to a dock item when hovered.'
},
{
name: "spring",
type: "SpringOptions",
default: "{ mass: 0.1, stiffness: 150, damping: 12 }",
description: "Configuration options for the spring animation."
name: 'spring',
type: 'SpringOptions',
default: '{ mass: 0.1, stiffness: 150, damping: 12 }',
description: 'Configuration options for the spring animation.'
}
]
];
</script>
<style scoped>
@@ -157,8 +200,8 @@ const propData = [
.demo-title {
font-size: 2rem;
font-weight: 900;
color: #271E37;
color: #271e37;
margin: 0;
text-align: center;
}
</style>
</style>