mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-09 00:19:31 -06:00
documentation structure
This commit is contained in:
David Haz
47
src/components/common/ContributionSection.vue
Normal file
47
src/components/common/ContributionSection.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="contribute-container">
|
||||
<h2 class="demo-title-contribute">Help improve this component!</h2>
|
||||
<div class="contribute-buttons">
|
||||
<a
|
||||
:href="bugReportUrl"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="contribute-button"
|
||||
>
|
||||
<i class="pi pi-exclamation-triangle"></i>
|
||||
<span>Report an issue</span>
|
||||
</a>
|
||||
<span class="contribute-separator">or</span>
|
||||
<a
|
||||
:href="featureRequestUrl"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="contribute-button"
|
||||
>
|
||||
<i class="pi pi-lightbulb"></i>
|
||||
<span>Request a feature</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const bugReportUrl = computed(() => {
|
||||
const category = route.params.category
|
||||
const subcategory = route.params.subcategory
|
||||
const title = encodeURIComponent(`[BUG]: ${category}/${subcategory}`)
|
||||
return `https://github.com/DavidHDev/vue-bits/issues/new?template=1-bug-report.yml&title=${title}&labels=bug`
|
||||
})
|
||||
|
||||
const featureRequestUrl = computed(() => {
|
||||
const category = route.params.category
|
||||
const subcategory = route.params.subcategory
|
||||
const title = encodeURIComponent(`[FEAT]: ${category}/${subcategory}`)
|
||||
return `https://github.com/DavidHDev/vue-bits/issues/new?template=2-feature-request.yml&title=${title}&labels=enhancement`
|
||||
})
|
||||
</script>
|
||||
6
src/components/common/Customize.vue
Normal file
6
src/components/common/Customize.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="demo-title">Customize</h2>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
118
src/components/common/PreviewSlider.vue
Normal file
118
src/components/common/PreviewSlider.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="preview-slider">
|
||||
<span class="slider-label">{{ title }}</span>
|
||||
<Slider
|
||||
:model-value="modelValue"
|
||||
@update:model-value="handleSliderChange"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
:disabled="disabled"
|
||||
class="custom-slider"
|
||||
/>
|
||||
<span class="slider-value">{{ modelValue }}{{ valueUnit }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Slider from 'primevue/slider'
|
||||
|
||||
defineProps<{
|
||||
title: string
|
||||
modelValue: number
|
||||
min?: number
|
||||
max?: number
|
||||
step?: number
|
||||
valueUnit?: string
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: number]
|
||||
}>()
|
||||
|
||||
const handleSliderChange = (value: number | number[]) => {
|
||||
const numValue = Array.isArray(value) ? value[0] : value
|
||||
emit('update:modelValue', numValue)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.preview-slider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.slider-label {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.custom-slider {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.slider-value {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
min-width: 3rem;
|
||||
}
|
||||
|
||||
:deep(.p-slider) {
|
||||
background: #222;
|
||||
border-radius: 10px;
|
||||
height: 8px !important;
|
||||
border: 1px solid #333 !important;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:deep(.p-slider-range) {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.p-slider-handle) {
|
||||
background: #0b0b0b !important;
|
||||
border: 2px solid #fff !important;
|
||||
box-shadow: none !important;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 50%;
|
||||
transition: all 0.1s ease;
|
||||
outline: none !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:deep(.p-slider-handle:hover) {
|
||||
transform: scale(1.1);
|
||||
border: 2px solid #fff !important;
|
||||
box-shadow: 0 0 8px rgba(82, 39, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
:deep(.p-slider-handle:focus) {
|
||||
outline: none !important;
|
||||
border: 2px solid #fff !important;
|
||||
box-shadow: 0 0 8px rgba(82, 39, 255, 0.5) !important;
|
||||
}
|
||||
|
||||
:deep(.p-slider-handle:active) {
|
||||
transform: scale(1.05);
|
||||
transition: all 0.05s ease;
|
||||
border: 2px solid #fff !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
:deep(.p-slider-handle::before),
|
||||
:deep(.p-slider-handle::after) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:deep(.p-slider-handle > *) {
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
</style>
|
||||
115
src/components/common/PreviewSwitch.vue
Normal file
115
src/components/common/PreviewSwitch.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="preview-switch">
|
||||
<span class="switch-label">{{ title }}</span>
|
||||
<ToggleSwitch
|
||||
:model-value="modelValue"
|
||||
@update:model-value="$emit('update:modelValue', $event)"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ToggleSwitch from 'primevue/toggleswitch'
|
||||
|
||||
defineProps<{
|
||||
title: string
|
||||
modelValue: boolean
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.preview-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:deep(.p-toggleswitch) {
|
||||
width: 2.5rem;
|
||||
height: 1.25rem;
|
||||
border: 1px solid #333;
|
||||
border-radius: 10px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:deep(.p-toggleswitch-slider) {
|
||||
background: #222;
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider) {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
:deep(.p-toggleswitch-handle) {
|
||||
background: #0b0b0b;
|
||||
border: 2px solid #fff;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
transition: all 0.1s ease;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:deep(.p-toggleswitch:hover .p-toggleswitch-slider) {
|
||||
background: #222 !important;
|
||||
}
|
||||
|
||||
:deep(.p-toggleswitch.p-toggleswitch-checked:hover .p-toggleswitch-slider) {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
:deep(.p-toggleswitch-handle:hover) {
|
||||
background: #0b0b0b !important;
|
||||
border: 2px solid #fff !important;
|
||||
box-shadow: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
:deep(.p-toggleswitch-handle:focus) {
|
||||
outline: none !important;
|
||||
background: #0b0b0b !important;
|
||||
border: 2px solid #fff !important;
|
||||
box-shadow: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
:deep(.p-toggleswitch-handle:active) {
|
||||
background: #0b0b0b !important;
|
||||
border: 2px solid #fff !important;
|
||||
box-shadow: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
:deep(.p-toggleswitch:focus) {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
:deep(.p-toggleswitch-handle::before),
|
||||
:deep(.p-toggleswitch-handle::after) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.p-toggleswitch-handle > *) {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
131
src/components/common/PropTable.vue
Normal file
131
src/components/common/PropTable.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div class="prop-table-container">
|
||||
<h2 class="demo-title">Props</h2>
|
||||
<div class="table-wrapper">
|
||||
<DataTable :value="data" class="props-table">
|
||||
<Column field="name" header="Property">
|
||||
<template #body="{ data }">
|
||||
<div class="code-cell">{{ data.name }}</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="type" header="Type">
|
||||
<template #body="{ data }">
|
||||
<span class="type-text">{{ data.type }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="default" header="Default">
|
||||
<template #body="{ data }">
|
||||
<div class="code-cell">{{ data.default || '—' }}</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="description" header="Description">
|
||||
<template #body="{ data }">
|
||||
<div class="description-text">{{ data.description }}</div>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import DataTable from 'primevue/datatable'
|
||||
import Column from 'primevue/column'
|
||||
|
||||
interface PropData {
|
||||
name: string
|
||||
type: string
|
||||
default: string
|
||||
description: string
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
data: PropData[]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.prop-table-container {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.code-cell {
|
||||
font-family: monospace;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 5px;
|
||||
width: fit-content;
|
||||
font-weight: 500;
|
||||
color: #e9e9e9;
|
||||
background-color: #222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.type-text {
|
||||
font-family: monospace;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.description-text {
|
||||
max-width: 300px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.p-datatable) {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.p-datatable-header) {
|
||||
background: #111;
|
||||
border: 1px solid #142216;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
:deep(.p-datatable-thead > tr > th) {
|
||||
background: #111;
|
||||
border-right: 1px solid #142216;
|
||||
border-bottom: 1px solid #142216;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: -0.5px;
|
||||
padding: 1rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.p-datatable-thead > tr > th:last-child) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
:deep(.p-datatable-tbody > tr > td) {
|
||||
background: #0b0b0b;
|
||||
border-right: 1px solid #142216;
|
||||
border-bottom: 1px solid #142216;
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.p-datatable-tbody > tr > td:last-child) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
:deep(.p-datatable-tbody > tr:last-child > td) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
:deep(.p-datatable-tbody > tr:hover) {
|
||||
background: #0b0b0b;
|
||||
}
|
||||
</style>
|
||||
39
src/components/common/RefreshButton.vue
Normal file
39
src/components/common/RefreshButton.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<Button class="refresh-button" @click="$emit('refresh')" outlined rounded size="small">
|
||||
<i class="pi pi-refresh"></i>
|
||||
</Button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Button from 'primevue/button'
|
||||
|
||||
defineEmits<{
|
||||
refresh: []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.refresh-button {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
z-index: 2;
|
||||
background-color: #111;
|
||||
border: 1px solid #142216;
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
padding: 0.5rem;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.refresh-button:hover {
|
||||
background-color: #222 !important;
|
||||
color: #fff !important;
|
||||
border: 1px solid #142216 !important;
|
||||
outline: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
.refresh-button:active {
|
||||
background-color: #142216;
|
||||
}
|
||||
</style>
|
||||
166
src/components/common/TabbedLayout.vue
Normal file
166
src/components/common/TabbedLayout.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="tabbed-layout">
|
||||
<Tabs value="0">
|
||||
<TabList>
|
||||
<Tab value="0">
|
||||
<div class="tab-header">
|
||||
<i class="pi pi-eye"></i>
|
||||
<span>Preview</span>
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab value="1">
|
||||
<div class="tab-header">
|
||||
<i class="pi pi-code"></i>
|
||||
<span>Code</span>
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab value="2">
|
||||
<div class="tab-header">
|
||||
<i class="pi pi-box"></i>
|
||||
<span>CLI</span>
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab value="3">
|
||||
<div class="tab-header">
|
||||
<i class="pi pi-heart"></i>
|
||||
<span>Contribute</span>
|
||||
</div>
|
||||
</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanels>
|
||||
<TabPanel value="0">
|
||||
<slot name="preview" />
|
||||
</TabPanel>
|
||||
<TabPanel value="1">
|
||||
<slot name="code" />
|
||||
</TabPanel>
|
||||
<TabPanel value="2">
|
||||
<slot name="cli" />
|
||||
</TabPanel>
|
||||
<TabPanel value="3">
|
||||
<ContributionSection />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Tabs from 'primevue/tabs'
|
||||
import TabList from 'primevue/tablist'
|
||||
import Tab from 'primevue/tab'
|
||||
import TabPanels from 'primevue/tabpanels'
|
||||
import TabPanel from 'primevue/tabpanel'
|
||||
import ContributionSection from './ContributionSection.vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tabbed-layout {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #142216;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
height: 36px;
|
||||
color: #ffffff;
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-header:hover {
|
||||
background: #142216;
|
||||
}
|
||||
|
||||
:deep(.p-tablist),
|
||||
:deep(.p-tablist-tab-list) {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.p-tablist) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
:deep(.p-tablist .p-tab:nth-child(1)),
|
||||
:deep(.p-tablist .p-tab:nth-child(2)),
|
||||
:deep(.p-tablist .p-tab:nth-child(3)) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
:deep(.p-tablist .p-tab:nth-child(4)) {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
:deep(.p-tab) {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.p-tab:not(.p-disabled):focus) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
:deep(.p-tab:hover) {
|
||||
background: transparent !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
:deep(.p-tablist-active-bar),
|
||||
:deep(.p-tab-indicator),
|
||||
:deep(.p-tab::before),
|
||||
:deep(.p-tab::after),
|
||||
:deep(.p-tab[aria-selected="true"]::before),
|
||||
:deep(.p-tab[aria-selected="true"]::after),
|
||||
:deep(.p-tablist::after),
|
||||
:deep(.p-tablist-tab-list::before),
|
||||
:deep(.p-tablist-tab-list::after),
|
||||
:deep(.p-tab .p-tab-header-action::before),
|
||||
:deep(.p-tab .p-tab-header-action::after) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:deep(.p-tab[aria-selected="true"]) {
|
||||
background: transparent !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
:deep(.p-tab[aria-selected="true"] .tab-header) {
|
||||
background: #333333;
|
||||
color: #A7EF9E;
|
||||
}
|
||||
|
||||
:deep(.p-tabpanels) {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(.p-tabpanel) {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:deep(.p-tablist) {
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
:deep(.p-tablist .p-tab:nth-child(4)) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user