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

Added defineModel support for PreviewSlider component.

Browse Source
This commit is contained in:
snepsnepy
2025-07-15 17:05:43 +03:00
parent 183a81ae88
commit 53b8e674b5
35 changed files with 97 additions and 748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,47 +21,11 @@
</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="100" :max="200" :step="10" v-model="panelHeight" />
<PreviewSlider
title="Item Size"
:min="20"
:max="60"
:step="10"
:model-value="baseItemSize"
@update:model-value="
(val: number) => {
baseItemSize = val;
forceRerender();
}
"
/>
<PreviewSlider title="Base Item Size" :min="40" :max="100" :step="5" v-model="baseItemSize" />
<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" v-model="magnification" />
</Customize>
<PropTable :data="propData" />
@@ -80,7 +44,7 @@
</template>
<script setup lang="ts">
import { ref, h } from 'vue';
import { ref, h, watch } from 'vue';
import TabbedLayout from '../../components/common/TabbedLayout.vue';
import PropTable from '../../components/common/PropTable.vue';
import CliInstallation from '../../components/code/CliInstallation.vue';
@@ -100,6 +64,10 @@ const magnification = ref(70);
const toast = useToast();
const { rerenderKey, forceRerender } = useForceRerender();
watch([magnification, panelHeight, baseItemSize], () => {
forceRerender();
});
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' } });