fix
This commit is contained in:
zwgczx committed
1 parent
75f293f877
commit
d8f8b629d2
8 files changed
+350
-956
No files matched your search
@@ -7,6 +7,7 @@
|
||||
"dependencies": {
|
||||
"@ag-grid-community/locale": "^35.1.0",
|
||||
"@iconify/vue": "^5.0.0",
|
||||
"@internationalized/date": "^3.12.0",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@vueuse/core": "^14.2.1",
|
||||
"ag-grid-community": "^35.1.0",
|
||||
@@ -72,7 +73,7 @@
|
||||
|
||||
"@iconify/vue": ["@iconify/vue@5.0.0", "", { "dependencies": { "@iconify/types": "^2.0.0" }, "peerDependencies": { "vue": ">=3" } }, "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg=="],
|
||||
|
||||
"@internationalized/date": ["@internationalized/date@3.11.0", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-BOx5huLAWhicM9/ZFs84CzP+V3gBW6vlpM02yzsdYC7TGlZJX1OJiEEHcSayF00Z+3jLlm4w79amvSt6RqKN3Q=="],
|
||||
"@internationalized/date": ["@internationalized/date@3.12.0", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-/PyIMzK29jtXaGU23qTvNZxvBXRtKbNnGDFD+PY6CZw/Y8Ex8pFUzkuCJCG9aOqmShjqhS9mPqP6Dk5onQY8rQ=="],
|
||||
|
||||
"@internationalized/number": ["@internationalized/number@3.6.5", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g=="],
|
||||
|
||||
@@ -542,6 +543,8 @@
|
||||
|
||||
"lazystream/readable-stream": ["readable-stream@2.3.8", "", { "dependencies": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", "isarray": "~1.0.0", "process-nextick-args": "~2.0.0", "safe-buffer": "~5.1.1", "string_decoder": "~1.1.1", "util-deprecate": "~1.0.1" } }, "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA=="],
|
||||
|
||||
"reka-ui/@internationalized/date": ["@internationalized/date@3.11.0", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-BOx5huLAWhicM9/ZFs84CzP+V3gBW6vlpM02yzsdYC7TGlZJX1OJiEEHcSayF00Z+3jLlm4w79amvSt6RqKN3Q=="],
|
||||
|
||||
"rolldown/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.5", "", {}, "sha512-RxlLX/DPoarZ9PtxVrQgZhPoor987YtKQqCo5zkjX+0S0yLJ7Vv515Wk6+xtTL67VONKJKxETWZwuZjss2idYw=="],
|
||||
|
||||
"string_decoder/safe-buffer": ["safe-buffer@5.2.1", "", {}, "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="],
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
"dependencies": {
|
||||
"@ag-grid-community/locale": "^35.1.0",
|
||||
"@iconify/vue": "^5.0.0",
|
||||
"@internationalized/date": "^3.12.0",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@vueuse/core": "^14.2.1",
|
||||
"ag-grid-community": "^35.1.0",
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onActivated, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { computed, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { AgGridVue } from 'ag-grid-vue3'
|
||||
import type { CellValueChangedEvent, ColDef } from 'ag-grid-community'
|
||||
import type { CellValueChangedEvent, ColDef, GridApi, GridReadyEvent } from 'ag-grid-community'
|
||||
import { AG_GRID_LOCALE_CN } from '@ag-grid-community/locale'
|
||||
import { myTheme, gridOptions } from '@/lib/diyAgGridOptions'
|
||||
import localforage from 'localforage'
|
||||
import { decimalAggSum, roundTo, sumByNumber } from '@/lib/decimal'
|
||||
import { formatThousands } from '@/lib/numberFormat'
|
||||
import { industryTypeList } from '@/sql'
|
||||
import { SwitchRoot, SwitchThumb } from 'reka-ui'
|
||||
|
||||
interface DetailRow {
|
||||
id: string
|
||||
@@ -20,12 +21,19 @@ interface DetailRow {
|
||||
amount: number | null
|
||||
landArea: number | null
|
||||
path: string[]
|
||||
hide?: boolean
|
||||
}
|
||||
|
||||
interface XmBaseInfoState {
|
||||
projectIndustry?: string
|
||||
}
|
||||
|
||||
interface GridPersistState {
|
||||
detailRows?: DetailRow[]
|
||||
roughCalcEnabled?: boolean
|
||||
totalAmount?: number | null
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
rowData: DetailRow[]
|
||||
@@ -34,6 +42,7 @@ const props = defineProps<{
|
||||
|
||||
const BASE_INFO_KEY = 'xm-base-info-v1'
|
||||
let persistTimer: ReturnType<typeof setTimeout> | null = null
|
||||
const gridApi = ref<GridApi<DetailRow> | null>(null)
|
||||
const activeIndustryId = ref('')
|
||||
const industryNameMap = new Map(
|
||||
industryTypeList.flatMap(item => [
|
||||
@@ -45,6 +54,18 @@ const totalLabel = computed(() => {
|
||||
const industryName = industryNameMap.get(activeIndustryId.value.trim()) || ''
|
||||
return industryName ? `${industryName}总投资` : '总投资'
|
||||
})
|
||||
const roughCalcEnabled = ref(false)
|
||||
const visibleRowData = computed(() => props.rowData.filter(row => !row.hide))
|
||||
|
||||
const refreshPinnedTotalLabelCell = () => {
|
||||
if (!gridApi.value) return
|
||||
const pinnedTopNode = gridApi.value.getPinnedTopRow(0)
|
||||
if (!pinnedTopNode) return
|
||||
gridApi.value.refreshCells({
|
||||
rowNodes: [pinnedTopNode],
|
||||
force: true
|
||||
})
|
||||
}
|
||||
|
||||
const columnDefs: ColDef<DetailRow>[] = [
|
||||
{
|
||||
@@ -53,14 +74,21 @@ const columnDefs: ColDef<DetailRow>[] = [
|
||||
headerClass: 'ag-right-aligned-header',
|
||||
minWidth: 100,
|
||||
flex: 1,
|
||||
editable: params => !params.node?.group && !params.node?.rowPinned && Boolean(params.data?.hasCost),
|
||||
editable: params => {
|
||||
if (roughCalcEnabled.value) return Boolean(params.node?.rowPinned)
|
||||
return !params.node?.group && !params.node?.rowPinned && Boolean(params.data?.hasCost)
|
||||
},
|
||||
cellClass: params =>
|
||||
!params.node?.group && !params.node?.rowPinned && params.data?.hasCost
|
||||
roughCalcEnabled.value && params.node?.rowPinned
|
||||
? 'ag-right-aligned-cell editable-cell-line'
|
||||
: !roughCalcEnabled.value && !params.node?.group && !params.node?.rowPinned && params.data?.hasCost
|
||||
? 'ag-right-aligned-cell editable-cell-line'
|
||||
: 'ag-right-aligned-cell',
|
||||
cellClassRules: {
|
||||
'editable-cell-empty': params =>
|
||||
!params.node?.group && !params.node?.rowPinned && Boolean(params.data?.hasCost) && (params.value == null || params.value === '')
|
||||
roughCalcEnabled.value && params.node?.rowPinned
|
||||
? params.value == null || params.value === ''
|
||||
: !params.node?.group && !params.node?.rowPinned && Boolean(params.data?.hasCost) && (params.value == null || params.value === '')
|
||||
},
|
||||
aggFunc: decimalAggSum,
|
||||
valueParser: params => {
|
||||
@@ -69,6 +97,11 @@ const columnDefs: ColDef<DetailRow>[] = [
|
||||
return Number.isFinite(v) ? roundTo(v, 2) : null
|
||||
},
|
||||
valueFormatter: params => {
|
||||
if (roughCalcEnabled.value) {
|
||||
if (!params.node?.rowPinned) return ''
|
||||
if (params.value == null || params.value === '') return '点击输入'
|
||||
return formatThousands(params.value)
|
||||
}
|
||||
if (!params.node?.group && !params.node?.rowPinned && !params.data?.hasCost) {
|
||||
return ''
|
||||
}
|
||||
@@ -85,7 +118,7 @@ const columnDefs: ColDef<DetailRow>[] = [
|
||||
headerClass: 'ag-right-aligned-header',
|
||||
minWidth: 100,
|
||||
flex: 1,
|
||||
editable: params => !params.node?.group && !params.node?.rowPinned && Boolean(params.data?.hasArea),
|
||||
editable: params => !roughCalcEnabled.value && !params.node?.group && !params.node?.rowPinned && Boolean(params.data?.hasArea),
|
||||
cellClass: params =>
|
||||
!params.node?.group && !params.node?.rowPinned && params.data?.hasArea
|
||||
? 'ag-right-aligned-cell editable-cell-line'
|
||||
@@ -100,6 +133,9 @@ const columnDefs: ColDef<DetailRow>[] = [
|
||||
return Number.isFinite(v) ? roundTo(v, 3) : null
|
||||
},
|
||||
valueFormatter: params => {
|
||||
if (roughCalcEnabled.value) {
|
||||
return ''
|
||||
}
|
||||
if (!params.node?.group && !params.node?.rowPinned && !params.data?.hasArea) {
|
||||
return ''
|
||||
}
|
||||
@@ -129,18 +165,16 @@ const autoGroupColumnDef: ColDef = {
|
||||
}
|
||||
}
|
||||
|
||||
const totalAmount = computed(() => sumByNumber(props.rowData, row => row.amount))
|
||||
|
||||
const pinnedTopRowData = computed<DetailRow[]>(() => [
|
||||
const pinnedTopRowData = ref<DetailRow[]>([
|
||||
{
|
||||
id: 'pinned-total-row',
|
||||
groupCode: '',
|
||||
groupName: '',
|
||||
majorCode: '',
|
||||
majorName: totalLabel.value,
|
||||
majorName: '',
|
||||
hasCost: false,
|
||||
hasArea: false,
|
||||
amount: totalAmount.value,
|
||||
amount: null,
|
||||
landArea: null,
|
||||
path: ['TOTAL']
|
||||
}
|
||||
@@ -148,19 +182,74 @@ const pinnedTopRowData = computed<DetailRow[]>(() => [
|
||||
|
||||
const saveToIndexedDB = async () => {
|
||||
try {
|
||||
await localforage.setItem(props.dbKey, {
|
||||
detailRows: JSON.parse(JSON.stringify(props.rowData))
|
||||
})
|
||||
const payload: GridPersistState = {
|
||||
detailRows: props.rowData.map(row => ({
|
||||
...JSON.parse(JSON.stringify(row)),
|
||||
hide: Boolean(row.hide)
|
||||
}))
|
||||
}
|
||||
payload.roughCalcEnabled = roughCalcEnabled.value
|
||||
payload.totalAmount = pinnedTopRowData.value[0].amount
|
||||
await localforage.setItem(props.dbKey, payload)
|
||||
} catch (error) {
|
||||
console.error('saveToIndexedDB failed:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const onCellValueChanged = (_event: CellValueChangedEvent) => {
|
||||
const schedulePersist = () => {
|
||||
if (persistTimer) clearTimeout(persistTimer)
|
||||
persistTimer = setTimeout(() => {
|
||||
void saveToIndexedDB()
|
||||
}, 1000)
|
||||
}, 600)
|
||||
}
|
||||
|
||||
const setDetailRowsHidden = (hidden: boolean) => {
|
||||
for (const row of props.rowData) {
|
||||
row.hide = hidden
|
||||
}
|
||||
}
|
||||
|
||||
const onRoughCalcSwitch = (checked: boolean) => {
|
||||
gridApi.value?.stopEditing(true)
|
||||
roughCalcEnabled.value = checked
|
||||
setDetailRowsHidden(checked)
|
||||
if (!checked) {
|
||||
syncPinnedTotalForNormalMode()
|
||||
}else{
|
||||
pinnedTopRowData.value[0].amount = null
|
||||
const pinnedTopNode = gridApi.value?.getPinnedTopRow(0)
|
||||
if (pinnedTopNode) {
|
||||
pinnedTopNode.setDataValue('amount', null)
|
||||
}
|
||||
}
|
||||
schedulePersist()
|
||||
}
|
||||
|
||||
|
||||
|
||||
const onCellValueChanged = (event: CellValueChangedEvent) => {
|
||||
if (roughCalcEnabled.value && event.node?.rowPinned && event.colDef.field === 'amount') {
|
||||
if (typeof event.newValue === 'number') {
|
||||
pinnedTopRowData.value[0].amount = roundTo(event.newValue, 2)
|
||||
} else {
|
||||
const parsed = Number(event.newValue)
|
||||
pinnedTopRowData.value[0].amount = Number.isFinite(parsed) ? roundTo(parsed, 2) : null
|
||||
}
|
||||
|
||||
} else if (!roughCalcEnabled.value) {
|
||||
syncPinnedTotalForNormalMode()
|
||||
}
|
||||
schedulePersist()
|
||||
}
|
||||
|
||||
const onGridReady = (event: GridReadyEvent<DetailRow>) => {
|
||||
gridApi.value = event.api
|
||||
void loadIndustryFromBaseInfo()
|
||||
|
||||
|
||||
void loadGridPersistState()
|
||||
void refreshPinnedTotalLabelCell()
|
||||
|
||||
}
|
||||
|
||||
const processCellForClipboard = (params: any) => {
|
||||
@@ -191,16 +280,69 @@ const loadIndustryFromBaseInfo = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadIndustryFromBaseInfo()
|
||||
const loadGridPersistState = async () => {
|
||||
try {
|
||||
const data = await localforage.getItem<GridPersistState>(props.dbKey)
|
||||
roughCalcEnabled.value = Boolean(data?.roughCalcEnabled)
|
||||
const detailRows = Array.isArray(data?.detailRows) ? data.detailRows : []
|
||||
const detailRowById = new Map(detailRows.map(row => [row.id, row]))
|
||||
for (const row of props.rowData) {
|
||||
const persisted = detailRowById.get(row.id)
|
||||
if (!persisted) {
|
||||
row.hide = roughCalcEnabled.value
|
||||
continue
|
||||
}
|
||||
row.amount = typeof persisted.amount === 'number' ? roundTo(persisted.amount, 2) : null
|
||||
row.landArea = typeof persisted.landArea === 'number' ? roundTo(persisted.landArea, 3) : null
|
||||
row.hide = typeof persisted.hide === 'boolean' ? persisted.hide : roughCalcEnabled.value
|
||||
}
|
||||
pinnedTopRowData.value[0].amount = typeof data?.totalAmount === 'number' ? data.totalAmount : null
|
||||
|
||||
const pinnedTopNode = (gridApi as any).value.getPinnedTopRow(0)
|
||||
if (pinnedTopNode) {
|
||||
pinnedTopNode.setDataValue('amount', pinnedTopRowData.value[0].amount)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('loadGridPersistState failed:', error)
|
||||
roughCalcEnabled.value = false
|
||||
pinnedTopRowData.value[0].amount= null
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
watch(totalLabel, () => {
|
||||
refreshPinnedTotalLabelCell()
|
||||
})
|
||||
|
||||
onActivated(() => {
|
||||
void loadIndustryFromBaseInfo()
|
||||
})
|
||||
const syncPinnedTotalForNormalMode = () => {
|
||||
if (roughCalcEnabled.value) return
|
||||
|
||||
if (!gridApi.value) {
|
||||
pinnedTopRowData.value[0].amount = sumByNumber(props.rowData, row => row.amount)
|
||||
return
|
||||
}
|
||||
let total = 0
|
||||
let hasValue = false
|
||||
|
||||
props.rowData.forEach(node => {
|
||||
|
||||
const amount = node.amount
|
||||
if (typeof amount === 'number' && Number.isFinite(amount)) {
|
||||
total += amount
|
||||
hasValue = true
|
||||
}
|
||||
})
|
||||
pinnedTopRowData.value[0].amount = hasValue ? roundTo(total, 2) : null
|
||||
const pinnedTopNode = gridApi.value.getPinnedTopRow(0)
|
||||
if (pinnedTopNode) {
|
||||
pinnedTopNode.setDataValue('amount', hasValue ? roundTo(total, 2) : null)
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (persistTimer) clearTimeout(persistTimer)
|
||||
gridApi.value = null
|
||||
void saveToIndexedDB()
|
||||
})
|
||||
</script>
|
||||
@@ -212,18 +354,30 @@ onBeforeUnmount(() => {
|
||||
<h3 class="text-sm font-semibold text-foreground cursor-pointer select-none transition-colors hover:text-primary">
|
||||
{{ props.title }}
|
||||
</h3>
|
||||
<div class="text-xs text-muted-foreground"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class=" text-xs text-muted-foreground">粗略计算</span>
|
||||
<SwitchRoot
|
||||
class="cursor-pointer peer h-5 w-9 shrink-0 rounded-full border border-transparent bg-muted shadow-sm transition-colors data-[state=checked]:bg-primary"
|
||||
:modelValue="roughCalcEnabled"
|
||||
@update:modelValue="onRoughCalcSwitch"
|
||||
>
|
||||
<SwitchThumb
|
||||
class="block h-4 w-4 translate-x-0.5 rounded-full bg-background shadow transition-transform data-[state=checked]:translate-x-4"
|
||||
/>
|
||||
</SwitchRoot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ag-theme-quartz w-full flex-1 min-h-0 h-full">
|
||||
<AgGridVue
|
||||
:style="{ height: '100%' }"
|
||||
:rowData="props.rowData"
|
||||
:rowData="visibleRowData"
|
||||
:pinnedTopRowData="pinnedTopRowData"
|
||||
:columnDefs="columnDefs"
|
||||
:autoGroupColumnDef="autoGroupColumnDef"
|
||||
:gridOptions="gridOptions"
|
||||
:theme="myTheme"
|
||||
@grid-ready="onGridReady"
|
||||
@cell-value-changed="onCellValueChanged"
|
||||
:suppressColumnVirtualisation="true"
|
||||
:suppressRowVirtualisation="true"
|
||||
|
||||
@@ -1,9 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import { parseDate } from '@internationalized/date'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import localforage from 'localforage'
|
||||
import { industryTypeList } from '@/sql'
|
||||
import { CircleHelp } from 'lucide-vue-next'
|
||||
import { Calendar as CalendarIcon, CircleHelp } from 'lucide-vue-next'
|
||||
import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import {
|
||||
DatePickerAnchor,
|
||||
DatePickerArrow,
|
||||
DatePickerCalendar,
|
||||
DatePickerCell,
|
||||
DatePickerCellTrigger,
|
||||
DatePickerClose,
|
||||
DatePickerContent,
|
||||
DatePickerField,
|
||||
DatePickerGrid,
|
||||
DatePickerGridBody,
|
||||
DatePickerGridHead,
|
||||
DatePickerGridRow,
|
||||
DatePickerHeadCell,
|
||||
DatePickerHeader,
|
||||
DatePickerHeading,
|
||||
DatePickerInput,
|
||||
DatePickerNext,
|
||||
DatePickerPrev,
|
||||
DatePickerRoot,
|
||||
DatePickerTrigger
|
||||
} from 'reka-ui'
|
||||
|
||||
interface XmInfoState {
|
||||
projectIndustry?: string
|
||||
@@ -31,6 +54,37 @@ const preparedBy = ref('')
|
||||
const reviewedBy = ref('')
|
||||
const preparedCompany = ref('')
|
||||
const preparedDate = ref('')
|
||||
const preparedDatePickerValue = ref<any>(undefined)
|
||||
|
||||
const normalizeDateString = (value: unknown): string => {
|
||||
if (typeof value !== 'string') return ''
|
||||
const trimmed = value.trim()
|
||||
if (!trimmed) return ''
|
||||
try {
|
||||
const parsed = parseDate(trimmed)
|
||||
return parsed.toString() === trimmed ? trimmed : ''
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const syncPreparedDatePickerFromString = () => {
|
||||
if (!preparedDate.value) {
|
||||
preparedDatePickerValue.value = undefined
|
||||
return
|
||||
}
|
||||
try {
|
||||
preparedDatePickerValue.value = parseDate(preparedDate.value)
|
||||
} catch {
|
||||
preparedDatePickerValue.value = undefined
|
||||
preparedDate.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const handlePreparedDateSelect = (date: any) => {
|
||||
preparedDatePickerValue.value = date
|
||||
preparedDate.value = date?.toString() ?? ''
|
||||
}
|
||||
|
||||
const majorParentNodes: MajorParentNode[] = industryTypeList.map(item => ({
|
||||
id: item.id,
|
||||
@@ -69,7 +123,8 @@ const loadFromIndexedDB = async () => {
|
||||
preparedBy.value = typeof data.preparedBy === 'string' ? data.preparedBy : ''
|
||||
reviewedBy.value = typeof data.reviewedBy === 'string' ? data.reviewedBy : ''
|
||||
preparedCompany.value = typeof data.preparedCompany === 'string' ? data.preparedCompany : ''
|
||||
preparedDate.value = typeof data.preparedDate === 'string' ? data.preparedDate : ''
|
||||
preparedDate.value = normalizeDateString(data.preparedDate)
|
||||
syncPreparedDatePickerFromString()
|
||||
return
|
||||
}
|
||||
|
||||
@@ -80,6 +135,7 @@ const loadFromIndexedDB = async () => {
|
||||
reviewedBy.value = ''
|
||||
preparedCompany.value = ''
|
||||
preparedDate.value = ''
|
||||
syncPreparedDatePickerFromString()
|
||||
} catch (error) {
|
||||
console.error('loadFromIndexedDB failed:', error)
|
||||
projectIndustry.value = DEFAULT_PROJECT_INDUSTRY
|
||||
@@ -88,6 +144,7 @@ const loadFromIndexedDB = async () => {
|
||||
reviewedBy.value = ''
|
||||
preparedCompany.value = ''
|
||||
preparedDate.value = ''
|
||||
syncPreparedDatePickerFromString()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -126,6 +183,7 @@ const createProject = async () => {
|
||||
reviewedBy.value = ''
|
||||
preparedCompany.value = ''
|
||||
preparedDate.value = ''
|
||||
syncPreparedDatePickerFromString()
|
||||
isProjectInitialized.value = true
|
||||
showCreateDialog.value = false
|
||||
await saveToIndexedDB()
|
||||
@@ -238,12 +296,112 @@ onMounted(async () => {
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground">编制日期</label>
|
||||
<input
|
||||
v-model="preparedDate"
|
||||
type="text"
|
||||
placeholder="请输入编制日期"
|
||||
class="mt-2 h-10 w-full rounded-lg border bg-background px-4 text-sm outline-none ring-offset-background shadow-sm transition placeholder:text-muted-foreground/70 focus-visible:border-primary/60 focus-visible:ring-2 focus-visible:ring-ring"
|
||||
/>
|
||||
<DatePickerRoot
|
||||
locale="en-CA"
|
||||
:model-value="preparedDatePickerValue"
|
||||
@update:model-value="handlePreparedDateSelect"
|
||||
>
|
||||
<DatePickerAnchor class="mt-2 block w-full">
|
||||
<DatePickerField
|
||||
v-slot="{ segments }"
|
||||
class="flex h-10 w-full items-center justify-between rounded-lg border bg-background px-4 text-sm outline-none ring-offset-background shadow-sm transition focus-within:border-primary/60 focus-within:ring-2 focus-within:ring-ring"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<template
|
||||
v-for="(segment, index) in segments"
|
||||
:key="`${segment.part}-${index}`"
|
||||
>
|
||||
<DatePickerInput
|
||||
:part="segment.part"
|
||||
:class="segment.part === 'literal' ? 'text-muted-foreground/70' : 'text-foreground'"
|
||||
>
|
||||
{{ segment.part === 'literal' ? '-' : segment.value }}
|
||||
</DatePickerInput>
|
||||
</template>
|
||||
</div>
|
||||
<DatePickerTrigger as-child>
|
||||
<button type="button" class="inline-flex h-6 w-6 items-center justify-center text-muted-foreground">
|
||||
<CalendarIcon class="h-4 w-4" />
|
||||
</button>
|
||||
</DatePickerTrigger>
|
||||
</DatePickerField>
|
||||
</DatePickerAnchor>
|
||||
<DatePickerContent class="z-50 w-[22rem] rounded-lg border bg-card p-4 shadow-lg">
|
||||
<DatePickerArrow class="fill-border" />
|
||||
<DatePickerCalendar v-slot="{ weekDays, grid }" locale="zh-CN">
|
||||
<DatePickerHeader class="mb-2 flex items-center justify-between">
|
||||
<DatePickerPrev as-child>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex h-9 w-9 items-center justify-center rounded-md border text-sm transition hover:bg-muted"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
</DatePickerPrev>
|
||||
<DatePickerHeading class="text-base font-medium text-foreground" />
|
||||
<DatePickerNext as-child>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex h-9 w-9 items-center justify-center rounded-md border text-sm transition hover:bg-muted"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</DatePickerNext>
|
||||
</DatePickerHeader>
|
||||
<div class="space-y-2">
|
||||
<DatePickerGrid
|
||||
v-for="month in grid"
|
||||
:key="month.value.toString()"
|
||||
class="w-full border-collapse select-none"
|
||||
>
|
||||
<DatePickerGridHead>
|
||||
<DatePickerGridRow class="grid grid-cols-7">
|
||||
<DatePickerHeadCell
|
||||
v-for="day in weekDays"
|
||||
:key="day"
|
||||
class="flex h-9 items-center justify-center text-sm text-muted-foreground"
|
||||
>
|
||||
{{ day }}
|
||||
</DatePickerHeadCell>
|
||||
</DatePickerGridRow>
|
||||
</DatePickerGridHead>
|
||||
<DatePickerGridBody>
|
||||
<DatePickerGridRow
|
||||
v-for="(weekDates, index) in month.rows"
|
||||
:key="`${month.value.toString()}-${index}`"
|
||||
class="grid grid-cols-7"
|
||||
>
|
||||
<DatePickerCell
|
||||
v-for="dateValue in weekDates"
|
||||
:key="dateValue.toString()"
|
||||
:date="dateValue"
|
||||
class="h-10 w-full p-0.5"
|
||||
>
|
||||
<DatePickerCellTrigger
|
||||
:day="dateValue"
|
||||
:month="month.value"
|
||||
class="h-full w-full rounded-md border border-transparent bg-transparent text-base outline-none transition hover:bg-muted data-[outside-view]:text-muted-foreground/40 data-[selected]:border-primary data-[selected]:bg-transparent data-[selected]:text-foreground data-[disabled]:opacity-40 data-[unavailable]:text-muted-foreground/40"
|
||||
>
|
||||
{{ dateValue.day }}
|
||||
</DatePickerCellTrigger>
|
||||
</DatePickerCell>
|
||||
</DatePickerGridRow>
|
||||
</DatePickerGridBody>
|
||||
</DatePickerGrid>
|
||||
</div>
|
||||
</DatePickerCalendar>
|
||||
<div class="mt-2 flex justify-end">
|
||||
<DatePickerClose as-child>
|
||||
<button
|
||||
type="button"
|
||||
class="h-8 rounded-md border px-3 text-xs text-foreground transition hover:bg-muted"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</DatePickerClose>
|
||||
</div>
|
||||
</DatePickerContent>
|
||||
</DatePickerRoot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+2
-2
@@ -10,7 +10,7 @@ import {
|
||||
RowAutoHeightModule,
|
||||
TextEditorModule,
|
||||
TooltipModule,
|
||||
UndoRedoEditModule,
|
||||
UndoRedoEditModule,RenderApiModule
|
||||
|
||||
} from 'ag-grid-community'
|
||||
import {
|
||||
@@ -40,7 +40,7 @@ const AG_GRID_MODULES = [
|
||||
LargeTextEditorModule,
|
||||
UndoRedoEditModule,
|
||||
CellStyleModule,
|
||||
PinnedRowModule,
|
||||
PinnedRowModule,RenderApiModule ,
|
||||
TooltipModule,
|
||||
TreeDataModule,
|
||||
AggregationModule,
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Dialog Gesture Driven | Reka UI</title>
|
||||
<meta name="description" content="An open-source library with unstyled, primitive components, accompanied by a variety of examples & use cases ready to be integrated into your projects.">
|
||||
<meta name="generator" content="VitePress v1.6.3">
|
||||
<link rel="preload stylesheet" href="/assets/style.BMneOzY2.css" as="style">
|
||||
<link rel="preload stylesheet" href="/vp-icons.css" as="style">
|
||||
|
||||
<script type="module" src="/assets/app.CpQGAlIw.js"></script>
|
||||
<link rel="modulepreload" href="/assets/chunks/theme.dny5emIm.js">
|
||||
<link rel="modulepreload" href="/assets/chunks/framework.CmFBNk3_.js">
|
||||
<link rel="modulepreload" href="/assets/examples_dialog-gesture-driven.md.3-AGfNIC.lean.js">
|
||||
<meta name="theme-color" content="#00C38A">
|
||||
<link rel="icon" href="/logo.png">
|
||||
<link rel="icon" href="/logo.svg" type="image/svg+xml">
|
||||
<link rel="canonical" href="https://reka-ui.com">
|
||||
<meta name="author" content="Zernonia, Khairul Haaziq, Mujahid Anuar, Max, Artem Melnyk, Eduard Predescu and Reka contributors">
|
||||
<meta name="keywords" content="vue, nuxt, component-library, radix, radix-vue, reka-ui, typescript">
|
||||
<meta property="og:title" content="Reka">
|
||||
<meta property="og:description" content="An open-source library with unstyled, primitive components, accompanied by a variety of examples & use cases ready to be integrated into your projects.">
|
||||
<meta property="og:url" content="https://reka-ui.com/">
|
||||
<meta property="og:image" content="https://reka-ui.com/og.jpg">
|
||||
<meta name="twitter:title" content="Reka">
|
||||
<meta name="twitter:description" content="An open-source library with unstyled, primitive components, accompanied by a variety of examples & use cases ready to be integrated into your projects.">
|
||||
<meta name="twitter:image" content="https://reka-ui.com/og.jpg">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap">
|
||||
<noscript><link rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" /></noscript>
|
||||
<link rel="mask-icon" href="/logo.svg" color="#ffffff">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
|
||||
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"dark",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||||
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--[--><div class="flex flex-col items-center min-h-screen h-full"><header class="w-full py-4 sticky top-0 z-20 transition-all duration-500 h-[68px] md:h-full bg-transparent backdrop-blur-0"><div class="max-w-[1440px] flex items-center justify-between mx-auto px-6"><div class="w-full justify-between md:justify-normal flex items-center gap-8"><a href="/" class="flex items-center gap-2"><img class="w-6 md:w-9" alt="Reka UI logo" src="/logo.svg"><span class="font-bold text-xl md:text-2xl">Reka</span></a><!--[--><button type="button" aria-haspopup="dialog" aria-expanded="false" data-state="closed" class="flex items-center space-x-2 text-md md:text-sm py-[7px] px-3 rounded-lg md:border border-muted md:bg-card hover:bg-muted text-muted-foreground"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" style="" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="hidden md:inline-flex w-24 lg:w-40 text-left">Search</span><span class="hidden md:inline-flex text-xs"><kbd>⌘ K</kbd></span><!--]--></button><!--v-if--><!--]--></div><!--[--><nav class="hidden lg:flex items-center"><!--[--><!--[--><a href="/docs/overview/getting-started" class="py-2 mx-3 text-sm font-semibold text-muted-foreground hover:text-foreground h-full inline-flex items-center">Docs</a><!--]--><!--[--><a href="/examples/checkbox-group" class="!text-primary py-2 mx-3 text-sm font-semibold text-muted-foreground hover:text-foreground h-full inline-flex items-center">Examples</a><!--]--><!--[--><a href="/showcase" class="py-2 mx-3 text-sm font-semibold text-muted-foreground hover:text-foreground h-full inline-flex items-center">Showcase</a><!--]--><!--[--><!--[--><!--[--><!--[--><button class="py-2 px-2 text-nowrap md:px-0 mx-0 md:mx-3 text-sm font-semibold text-muted-foreground hover:text-foreground h-full inline-flex items-center justify-between data-[state=open]:text-foreground" id="reka-dropdown-menu-trigger-v-1" type="button" aria-haspopup="menu" aria-expanded="false" data-state="closed"><!--[--><span>v2.8.2</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="ml-1 text-lg" style="" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--]--></button><!--v-if--><!--]--><!--]--><!--]--><!--]--><!--]--><div data-orientation="vertical" role="none" class="bg-muted h-4 w-px mx-4"><!--[--><!--]--></div><button class="w-11 h-6 flex bg-muted border border-muted-foreground/10 rounded-full relative flex-shrink-0" aria-label id="theme-toggle" role="switch" type="button" value="on" aria-checked="true" aria-required="false" data-state="checked"><!--[--><span data-state="checked" class="w-5 h-5 my-auto bg-background text-xs flex items-center justify-center text-muted-foreground border border-muted rounded-full !transition-transform translate-x-0.5 will-change-transform data-[state=checked]:translate-x-5"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" style="" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--]--></span><!--]--><!--v-if--></button><div data-orientation="vertical" role="none" class="bg-muted h-4 w-px mx-4"><!--[--><!--]--></div><!--[--><a href="https://chat.unovue.com" aria-label="discord" target="_blank" class="w-9 h-9 bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted flex items-center justify-center rounded-lg text-xl flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" style="" width="1em" height="1em" viewBox="0 0 16 16"></svg></a><a href="https://github.com/unovue/reka-ui" aria-label="github" target="_blank" class="w-9 h-9 bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted flex items-center justify-center rounded-lg text-xl flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" style="" width="1em" height="1em" viewBox="0 0 16 16"></svg></a><!--]--></nav><div class="lg:hidden"><!--[--><!--[--><!--[--><button class="p-2 rounded-lg" id="reka-dropdown-menu-trigger-v-2" type="button" aria-haspopup="menu" aria-expanded="false" data-state="closed"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="text-lg" style="" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--]--></button><!--v-if--><!--]--><!--]--><!--]--></div><!--]--></div></header><div class="max-w-[1440px] w-full h-full grow"><div class="w-full"><div class="z-0 w-full h-max absolute top-0 left-0 inset-0 pointer-events-none flex justify-center overflow-hidden"><div class="w-[108rem] flex-none flex justify-end"><img class="w-[90rem] flex-none max-w-none" decoding="async" src="/new-bg.png" alt="backdrop"></div></div><div class="border-y w-full h-12 sticky top-[4.25rem] z-10Line truncated
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"docs_components_accordion.md\":\"C33ZB1M7\",\"docs_components_alert-dialog.md\":\"DioEjGn3\",\"docs_components_aspect-ratio.md\":\"Cv7CxCfa\",\"docs_components_autocomplete.md\":\"Bwar3psY\",\"docs_components_avatar.md\":\"B26hfGuv\",\"docs_components_calendar.md\":\"BAt6S7MZ\",\"docs_components_checkbox.md\":\"SoQ8XpF9\",\"docs_components_collapsible.md\":\"DgWVFrwl\",\"docs_components_color-swatch-picker.md\":\"BoizDi9i\",\"docs_components_color-swatch.md\":\"BG7IGStm\",\"docs_components_combobox.md\":\"BDPYe6g6\",\"docs_components_context-menu.md\":\"DPGAeyb2\",\"docs_components_date-field.md\":\"DEGPR-vn\",\"docs_components_date-picker.md\":\"DvgwoKUn\",\"docs_components_date-range-field.md\":\"D4Ld6xMN\",\"docs_components_date-range-picker.md\":\"OWw5fMM3\",\"docs_components_dialog.md\":\"BxmwjuTs\",\"docs_components_dropdown-menu.md\":\"DOvfGYz4\",\"docs_components_editable.md\":\"SKjAD8js\",\"docs_components_hover-card.md\":\"oHcMYEoR\",\"docs_components_label.md\":\"BrbvMzN3\",\"docs_components_listbox.md\":\"CGO0aHN1\",\"docs_components_menubar.md\":\"BF0GyFf1\",\"docs_components_month-picker.md\":\"CNPWgzW4\",\"docs_components_month-range-picker.md\":\"DWMJWIJz\",\"docs_components_navigation-menu.md\":\"DZhZcqb_\",\"docs_components_number-field.md\":\"BTvlBWG-\",\"docs_components_pagination.md\":\"DYcxYpd0\",\"docs_components_pin-input.md\":\"BqLu0JBF\",\"docs_components_popover.md\":\"Dx7s5_TE\",\"docs_components_progress.md\":\"CXGdOtk5\",\"docs_components_radio-group.md\":\"1MRIfVjg\",\"docs_components_range-calendar.md\":\"CK3uQ_r4\",\"docs_components_scroll-area.md\":\"D5kAh49L\",\"docs_components_select.md\":\"I_chwbEx\",\"docs_components_separator.md\":\"BHQxCiPK\",\"docs_components_slider.md\":\"3lC8daxm\",\"docs_components_splitter.md\":\"Dqkj-xTE\",\"docs_components_stepper.md\":\"Cnp2m4Vd\",\"docs_components_switch.md\":\"UzzV_ylx\",\"docs_components_tabs.md\":\"CQ_4d6Pe\",\"docs_components_tags-input.md\":\"Csz-ELec\",\"docs_components_time-field.md\":\"B9YP0O_g\",\"docs_components_toast.md\":\"DMTHBbgW\",\"docs_components_toggle-group.md\":\"CmwhHzzF\",\"docs_components_toggle.md\":\"CQ2Ivccb\",\"docs_components_toolbar.md\":\"Df3hM2Qi\",\"docs_components_tooltip.md\":\"Bhv_Jf39\",\"docs_components_tree.md\":\"9LTBmBRi\",\"docs_components_year-picker.md\":\"63nH7pBC\",\"docs_components_year-range-picker.md\":\"BtN1CuM4\",\"docs_guides_animation.md\":\"DeV8tNd6\",\"docs_guides_composition.md\":\"DEyROfsE\",\"docs_guides_controlled-state.md\":\"BBXgd0P8\",\"docs_guides_dates.md\":\"Dy8WpC87\",\"docs_guides_i18n.md\":\"BI_3WJOd\",\"docs_guides_inject-context.md\":\"B6opSak9\",\"docs_guides_migration.md\":\"D4K8EIlQ\",\"docs_guides_namespaced-components.md\":\"dIhM8ZF6\",\"docs_guides_server-side-rendering.md\":\"BuQTNxdk\",\"docs_guides_styling.md\":\"CvcgUnLP\",\"docs_guides_virtualization.md\":\"C_v7OIte\",\"docs_overview_accessibility.md\":\"DHpAe0-q\",\"docs_overview_getting-started.md\":\"Bi74fDIw\",\"docs_overview_installation.md\":\"DNMbtp1Z\",\"docs_overview_introduction.md\":\"C7cZGLq8\",\"docs_overview_releases.md\":\"CTRcqgeR\",\"docs_utilities_config-provider.md\":\"Bq-JEzPn\",\"docs_utilities_focus-scope.md\":\"wo8dpp3t\",\"docs_utilities_presence.md\":\"DeRw9tc5\",\"docs_utilities_primitive.md\":\"BYXN4fSv\",\"docs_utilities_roving-focus.md\":\"BNYtQadJ\",\"docs_utilities_slot.md\":\"Mz4DbJd7\",\"docs_utilities_use-date-formatter.md\":\"DAfLd2oy\",\"docs_utilities_use-direction.md\":\"ByUpvALW\",\"docs_utilities_use-emit-as-props.md\":\"DmFt-lGq\",\"docs_utilities_use-filter.md\":\"DgTarmTU\",\"docs_utilities_use-forward-expose.md\":\"CDAy8Ppe\",\"docs_utilities_use-forward-props-emits.md\":\"Cx24cJNY\",\"docs_utilities_use-forward-props.md\":\"Dz4_IiEJ\",\"docs_utilities_use-id.md\":\"C_2s3jh3\",\"docs_utilities_use-locale.md\":\"XMhnCA47\",\"docs_utilities_visually-hidden.md\":\"BErjRumc\",\"examples.md\":\"C0CPyQPX\",\"examples_checkbox-group.md\":\"BK4cOtFR\",\"examples_combobox-tags-input.md\":\"CnGYA03h\",\"examples_combobox-textarea.md\":\"DlvmwmJN\",\"examples_date-picker-selection.md\":\"EbUJaOE6\",\"examples_date-picker-view-switching.md\":\"C8zA2aj8\",\"examples_dialog-command-menu.md\":\"J6BLSFfr\",\"examples_dialog-gesture-driven.md\":\"3-AGfNIC\",\"examples_listbox-transfer.md\":\"D7GNHZOe\",\"examples_progress-circular.md\":\"BGNpIvke\",\"examples_slider-number-field.md\":\"DZxINuzz\",\"examples_slider-tooltip.md\":\"Dy_dh3c-\",\"examples_tooltip-cursor.md\":\"DDY2vqmk\",\"index.md\":\"DO6daXaL\",\"meta_accordioncontent.md\":\"Dmr4v6ec\",\"meta_accordionheader.md\":\"UP1pU_Qc\",\"meta_accordionitem.md\":\"DX6gnYmC\",\"meta_accordionroot.md\":\"BfKB-JVC\",\"meta_accordiontrigger.md\":\"Dv5xubE_\",\"meta_alertdialogaction.md\":\"rLc3x65U\",\"meta_alertdialogcancel.md\":\"CRp5cNK3\",\"meta_alertdialogcontent.md\":\"D-1gFOHg\",\"meta_alertdialogdescription.md\":\"g_9_i3ak\",\"meta_alertdialogoverlay.md\":\"B3jXjgLine truncated
|
||||
|
||||
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v67327c56f0bb4ef8b305cae61679db8f1769101564043" integrity="sha512-rdcWY47ByXd76cbCFzznIcEaCN71jqkWBBqlwhF1SY7KubdLKZiEGeP7AyieKZlGP9hbY/MhGrwXzJC/HulNyg==" data-cf-beacon='{"version":"2024.11.0","token":"b7985468abd34854910b51518a3b2943","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,528 +0,0 @@
|
||||
import{c6 as qi,ac as Hi,ad as zi,ae as Xi,af as Yi,ai as Zi,I as Ji,ag as Qi,ah as _i,ab as tr}from"./chunks/theme.dny5emIm.js";import{i as er,p as nr,w as oo,H as We,a as ie,d as qe,L as re,Q as io,o as He,R as F,r as sr,O as ro,a4 as or,aD as ir,aE as rr,q as ao,aA as ar,B as lr,aC as ur,x as pr,aF as cr,I as dr,h as lo,N as fr,P as hr,y as mr,z as Se,e as b,u as j,a5 as f,U as yr,b as o,aa as et,c as gr,ai as vr}from"./chunks/framework.CmFBNk3_.js";const uo=e=>n=>typeof n=="string"&&n.startsWith(e),ze=uo("--"),Er=uo("var(--"),Xe=e=>Er(e)?br.test(e.split("/*")[0].trim()):!1,br=/var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu,Rt={};function po(e){for(const n in e)Rt[n]=e[n],ze(n)&&(Rt[n].isCSSVariable=!0)}function jt(e,n){const t=typeof e=="string"&&!n?`${e}Context`:n,s=Symbol(t);return[r=>{const l=er(s,r);if(l===void 0)throw new Error(`Injection \`${s.toString()}\` not found. Component must be used within ${Array.isArray(e)?`one of the following components: ${e.join(", ")}`:`\`${e}\``}`);return l},r=>(nr(s,r),r)]}const[xr,Tr]=jt("Motion"),[wr]=jt("LayoutGroup");function Sn(e){return e!==null&&typeof e=="object"&&typeof e.start=="function"}class _{constructor(n){this.state=n}beforeMount(){}mount(){}unmount(){}update(){}beforeUpdate(){}beforeUnmount(){}}function St(e,n,t){if(Array.isArray(e))return e.reduce((s,i)=>{const a=St(i,n,t);return a?{...s,...a}:s},{});if(typeof e=="object")return e;if(e&&n){const s=n[e];return typeof s=="function"?s(t):s}}function Fr(e,n){return typeof e!=typeof n?!0:Array.isArray(e)&&Array.isArray(n)?!Cr(e,n):e!==n}function Cr(e,n){const t=n.length;if(t!==e.length)return!1;for(let s=0;s<t;s++)if(n[s]!==e[s])return!1;return!0}function An(e){return e==null?void 0:e.startsWith("--")}const Sr=e=>e;function Ar(e){return typeof e=="number"}const Dr=["animate","circle","defs","desc","ellipse","g","image","line","filter","marker","mask","metadata","path","pattern","polygon","polyline","rect","stop","svg","switch","symbol","text","tspan","use","view","clipPath","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","foreignObject","linearGradient","radialGradient","textPath"],Pr=new Set(Dr);function co(e){return Pr.has(e)}class Vr{constructor(n){this.features=[];const{features:t=[],lazyMotionContext:s}=n.options,i=t.concat(s.features.value);this.features=i.map(r=>new r(n));const a=this.features;oo(s.features,r=>{r.forEach(l=>{if(!i.includes(l)){i.push(l);const u=new l(n);a.push(u),n.isMounted()&&(u.beforeMount(),u.mount())}})},{flush:"pre"})}mount(){this.features.forEach(n=>n.mount())}beforeMount(){this.features.forEach(n=>{var t;return(t=n.beforeMount)==null?void 0:t.call(n)})}unmount(){this.features.forEach(n=>n.unmount())}update(){this.features.forEach(n=>{var t;return(t=n.update)==null?void 0:t.call(n)})}beforeUpdate(){this.features.forEach(n=>n.beforeUpdate())}beforeUnmount(){this.features.forEach(n=>n.beforeUnmount())}}const mt=new WeakMap;function ue(e){const n=mt.get(e);n&&e.removeEventListener("motioncomplete",n),mt.delete(e)}const[Br,Mr]=jt("AnimatePresenceContext");function Rr(e){const n={initial:e.initial,custom:e.custom};oo(()=>e.custom,t=>{n.custom=t},{flush:"pre"}),Mr(n),We(()=>{n.initial=void 0})}function kr(e){return typeof e=="string"||e===!1||Array.isArray(e)}const $=e=>e,Wt=["setup","read","resolveKeyframes","preUpdate","update","preRender","render","postRender"];function Lr(e,n){let t=new Set,s=new Set,i=!1,a=!1;const r=new WeakSet;let l={delta:0,timestamp:0,isProcessing:!1};function u(p){r.has(p)&&(c.schedule(p),e()),p(l)}const c={schedule:(p,d=!1,m=!1)=>{const y=m&&i?t:s;return d&&r.add(p),y.has(p)||y.add(p),p},cancel:p=>{s.delete(p),r.delete(p)},process:p=>{if(l=p,i){a=!0;return}i=!0,[t,s]=[s,t],t.forEach(u),t.clear(),i=!1,a&&(a=!1,c.process(p))}};return c}const J={},Or=40;function fo(e,n){let t=!1,s=!0;const i={delta:0,timestamp:0,isProcessing:!1},a=()=>t=!0,r=Wt.reduce((x,A)=>(x[A]=Lr(a),x),{}),{setup:l,read:u,resolveKeyframes:c,preUpdate:p,update:d,preRender:m,render:h,postRender:y}=r,g=()=>{const x=J.useManualTiming?i.timestamp:performance.now();t=!1,J.useManualTiming||(i.delta=s?1e3/60:Math.max(Math.min(x-i.timestamp,Or),1)),i.timestamp=x,i.isProcessing=!0,l.process(i),u.process(i),c.process(i),p.process(i),d.process(i),m.process(i),h.process(i),y.process(i),i.isProcessing=!1,t&&n&&(s=!1,e(g))},v=()=>{t=!0,s=!0,i.isProcessing||e(g)};return{schedule:Wt.reduce((x,A)=>{const T=r[A];return x[A]=(D,M=!1,S=!1)=>(t||v(),T.schedule(D,M,S)),x},{}),cancel:x=>{for(let A=0;A<Wt.length;A++)r[Wt[A]].cancel(x)},state:i,steps:r}}const{schedule:V,cancel:Y,state:I,steps:pe}=fo(typeof requestAnimationFrame<"u"?requestAnimationFrame:$,!0),At=new WeaLine truncated
|
||||
[data-motion-pop-id="${a.id}"] {
|
||||
position: absolute !important;
|
||||
width: ${u.width}px !important;
|
||||
height: ${u.height}px !important;
|
||||
top: ${u.top}px !important;
|
||||
${c}px !important;
|
||||
}
|
||||
`)}function i(a){const r=n.get(a);r&&(n.delete(a),V.render(()=>{document.head.removeChild(r)}))}return{addPopStyle:s,removePopStyle:i,styles:n}}function Qs(e){return Promise.resolve().then(()=>{e()})}const Fc=qe({name:"AnimatePresence",inheritAttrs:!0,__name:"AnimatePresence",props:{mode:{default:"sync"},initial:{type:Boolean,default:!0},as:{},custom:{},onExitComplete:{},anchorX:{default:"left"}},setup(e){const n=e;Rr(n);const{addPopStyle:t,removePopStyle:s,styles:i}=wc(n);function a(p){let d=p;for(;d;){if(At.get(d))return d;d=d.firstElementChild}return null}function r(p){const d=At.get(p);d&&(s(d),d.isVShow=!0,ue(p),Qs(()=>{d.setActive("exit",!1)}))}const l=new Map;re(()=>{l.clear()});function u(p,d){var m;const h=a(p),y=At.get(h);if(!h||!y){d(),l.size===0&&((m=n.onExitComplete)==null||m.call(n));return}l.set(h,!0),ue(h),t(y);function g(v){var E,C;if((E=v==null?void 0:v.detail)!=null&&E.isExit){const x=y.visualElement.projection;if((x==null?void 0:x.animationProgress)>0&&!y.isSafeToRemove&&!y.isVShow)return;ue(h),l.delete(h),l.size===0&&((C=n.onExitComplete)==null||C.call(n)),i.has(y)?s(y):y.willUpdate("done"),d(),h.isConnected||y.unmount(!0)}}Qs(()=>{y.setActive("exit",!0),mt.set(h,g),h.addEventListener("motioncomplete",g)})}const c=ie(()=>n.mode!=="wait"?{tag:n.as}:{mode:n.mode==="wait"?"out-in":void 0});return(p,d)=>(He(),io(or(p.mode==="wait"?ir:rr),ro({css:!1},c.value,{appear:"",onEnter:r,onLeave:u}),{default:F(()=>[sr(p.$slots,"default")]),_:3},16))}});function _s(...e){const n=!Array.isArray(e[0]),t=n?0:-1,s=e[0+t],i=e[1+t],a=e[2+t],r=e[3+t],l=_o(i,a,r);return n?l(s):l}function oe(e){return(e==null?void 0:e.nodeType)===3||(e==null?void 0:e.nodeType)===8?oe(e.nextSibling):e}const[Cc]=jt("LazyMotionContext");function Sc(e){const n=xr(null),t=wr({}),s=Ki(),i=Br({}),a=Cc({features:ao([]),strict:!1}),r=ar();function l(){return t.id&&e.layoutId?`${t.id}-${e.layoutId}`:e.layoutId||void 0}function u(){return{...e,lazyMotionContext:a,layoutId:l(),transition:e.transition??s.value.transition,layoutGroup:t,motionConfig:s.value,inViewOptions:e.inViewOptions??s.value.inViewOptions,animatePresenceContext:i,initial:i.initial===!1?i.initial:e.initial===!0?void 0:e.initial}}function c(){return{...r,...u()}}const p=new Ir(c(),n);Tr(p);function d(){var h;const y=p.type==="svg",g={...r};Object.keys(r).forEach(C=>{O(r[C])&&(g[C]=r[C].get())});let v={...e.style,...y?{}:((h=p.visualElement)==null?void 0:h.latestValues)||p.baseTarget};if(y){const{attrs:C,style:x}=ta({...p.isMounted()?p.target:p.baseTarget,...v});(x.transform||C.transformOrigin)&&(x.transformOrigin=C.transformOrigin??"50% 50%",delete C.transformOrigin),x.transform&&(x.transformBox=x.transformBox??"fill-box",delete C.transformBox),Object.assign(g,C),v=x}e.drag&&e.dragListener!==!1&&Object.assign(v,{userSelect:"none",WebkitUserSelect:"none",WebkitTouchCallout:"none",touchAction:e.drag===!0?"none":`pan-${e.drag==="x"?"y":"x"}`});const E=Zr(v);return E&&(g.style=E),g}const m=lr().proxy;return ur(()=>{p.beforeMount()}),We(()=>{p.mount(oe(m.$el),c(),Dc(m))}),pr(()=>p.beforeUnmount()),re(()=>{const h=oe(m.$el);h!=null&&h.isConnected||p.unmount()}),cr(()=>{p.beforeUpdate()}),dr(()=>{p.update(c())}),{getProps:u,getAttrs:d,layoutGroup:t,state:p}}const Ac={ignoreStrict:{type:Boolean},forwardMotionProps:{type:Boolean,default:!1},asChild:{type:Boolean,default:!1},hover:{type:[String,Array,Object]},press:{type:[String,Array,Object]},inView:{type:[String,Array,Object]},focus:{type:[String,Array,Object]},whileDrag:{type:[String,Array,Object]},whileHover:{type:[String,Array,Object],default:({hover:e})=>e},whilePress:{type:[String,Array,Object],default:({press:e})=>e},whileInView:{type:[String,Array,Object],default:({inView:e})=>e},whileFocus:{type:[String,Array,Object],default:({focus:e})=>e},custom:{type:[String,Number,Object,Array]},initial:{type:[String,Array,Object,Boolean],default:void 0},animate:{type:[String,Array,Object],default:void 0},exit:{type:[String,Array,Object]},variants:{type:Object},inherit:{type:Boolean},style:{type:Object},transformTemplate:{type:Function},transition:{type:Object},layoutGroup:{type:Object},motionConfig:{type:Object},onAnimationComplete:{type:Function},onUpdate:{type:Function},layout:{type:[Boolean,String],default:!1},layoutId:{type:String,default:void 0},layoutScroll:{type:Boolean,default:!1},layoutRoot:{type:Boolean,default:!1},"data-framer-portal-id":{type:String},crossfade:{type:Boolean,default:!0},layoutDependency:{type:[String,Number,Object,Array]},onBeforeLayoutMeasure:{type:Function},onLayoutMeasure:{type:Function},onLayoutAnimationStart:{type:Function},onLayoutAnimationComplete:{type:Function},globalPressTarget:{type:Boolean},onPressStart:{type:Function},onPress:{type:Function},onPressCancel:{type:Function},onHoverStart:{type:Function},onHoverEnd:{type:Function},inViewOptions:{type:Object},onViewportEnter:{type:Function},onViewportLeave:{type:Function},drag:{type:[Boolean,String]},dragSnapToOrigin:{type:Boolean},dragDirecti
Line truncated
|
||||
`)),t[72]||(t[72]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"import"),o("span",{style:{color:"#E1E4E8"}}," { Icon } "),o("span",{style:{color:"#F97583"}},"from"),o("span",{style:{color:"#9ECBFF"}}," '@iconify/vue'")],-1)),t[73]||(t[73]=f(`
|
||||
`)),t[74]||(t[74]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"import"),o("span",{style:{color:"#E1E4E8"}}," { useWindowSize } "),o("span",{style:{color:"#F97583"}},"from"),o("span",{style:{color:"#9ECBFF"}}," '@vueuse/core'")],-1)),t[75]||(t[75]=f(`
|
||||
`)),t[76]||(t[76]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"import"),o("span",{style:{color:"#E1E4E8"}}," { animate, AnimatePresence, Motion, useMotionValue, useMotionValueEvent, useTransform } "),o("span",{style:{color:"#F97583"}},"from"),o("span",{style:{color:"#9ECBFF"}}," 'motion-v'")],-1)),t[77]||(t[77]=f(`
|
||||
`)),t[78]||(t[78]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"import"),o("span",{style:{color:"#E1E4E8"}}," { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger } "),o("span",{style:{color:"#F97583"}},"from"),o("span",{style:{color:"#9ECBFF"}}," 'reka-ui'")],-1)),t[79]||(t[79]=f(`
|
||||
`)),t[80]||(t[80]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"import"),o("span",{style:{color:"#E1E4E8"}}," { computed, onMounted, ref } "),o("span",{style:{color:"#F97583"}},"from"),o("span",{style:{color:"#9ECBFF"}}," 'vue'")],-1)),t[81]||(t[81]=f(`
|
||||
`)),t[82]||(t[82]=o("span",{class:"line"},null,-1)),t[83]||(t[83]=f(`
|
||||
`)),t[84]||(t[84]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"const"),o("span",{style:{color:"#79B8FF"}}," inertiaTransition"),o("span",{style:{color:"#F97583"}}," ="),o("span",{style:{color:"#E1E4E8"}}," {")],-1)),t[85]||(t[85]=f(`
|
||||
`)),t[86]||(t[86]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," type: "),o("span",{style:{color:"#9ECBFF"}},"'inertia'"),o("span",{style:{color:"#F97583"}}," as"),o("span",{style:{color:"#F97583"}}," const"),o("span",{style:{color:"#E1E4E8"}},",")],-1)),t[87]||(t[87]=f(`
|
||||
`)),t[88]||(t[88]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," bounceStiffness: "),o("span",{style:{color:"#79B8FF"}},"300"),o("span",{style:{color:"#E1E4E8"}},",")],-1)),t[89]||(t[89]=f(`
|
||||
`)),t[90]||(t[90]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," bounceDamping: "),o("span",{style:{color:"#79B8FF"}},"40"),o("span",{style:{color:"#E1E4E8"}},",")],-1)),t[91]||(t[91]=f(`
|
||||
`)),t[92]||(t[92]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," timeConstant: "),o("span",{style:{color:"#79B8FF"}},"300"),o("span",{style:{color:"#E1E4E8"}},",")],-1)),t[93]||(t[93]=f(`
|
||||
`)),t[94]||(t[94]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}},"}")],-1)),t[95]||(t[95]=f(`
|
||||
`)),t[96]||(t[96]=o("span",{class:"line"},null,-1)),t[97]||(t[97]=f(`
|
||||
`)),t[98]||(t[98]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"const"),o("span",{style:{color:"#79B8FF"}}," staticTransition"),o("span",{style:{color:"#F97583"}}," ="),o("span",{style:{color:"#E1E4E8"}}," {")],-1)),t[99]||(t[99]=f(`
|
||||
`)),t[100]||(t[100]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," duration: "),o("span",{style:{color:"#79B8FF"}},"0.5"),o("span",{style:{color:"#E1E4E8"}},",")],-1)),t[101]||(t[101]=f(`
|
||||
`)),t[102]||(t[102]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," ease: ["),o("span",{style:{color:"#79B8FF"}},"0.32"),o("span",{style:{color:"#E1E4E8"}},", "),o("span",{style:{color:"#79B8FF"}},"0.72"),o("span",{style:{color:"#E1E4E8"}},", "),o("span",{style:{color:"#79B8FF"}},"0"),o("span",{style:{color:"#E1E4E8"}},", "),o("span",{style:{color:"#79B8FF"}},"1"),o("span",{style:{color:"#E1E4E8"}},"],")],-1)),t[103]||(t[103]=f(`
|
||||
`)),t[104]||(t[104]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}},"}")],-1)),t[105]||(t[105]=f(`
|
||||
`)),t[106]||(t[106]=o("span",{class:"line"},null,-1)),t[107]||(t[107]=f(`
|
||||
`)),t[108]||(t[108]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"const"),o("span",{style:{color:"#79B8FF"}}," SHEET_MARGIN"),o("span",{style:{color:"#F97583"}}," ="),o("span",{style:{color:"#79B8FF"}}," 34")],-1)),t[109]||(t[109]=f(`
|
||||
`)),t[110]||(t[110]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"const"),o("span",{style:{color:"#79B8FF"}}," SHEET_RADIUS"),o("span",{style:{color:"#F97583"}}," ="),o("span",{style:{color:"#79B8FF"}}," 12")],-1)),t[111]||(t[111]=f(`
|
||||
`)),t[112]||(t[112]=o("span",{class:"line"},null,-1)),t[113]||(t[113]=f(`
|
||||
`)),t[114]||(t[114]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"let"),o("span",{style:{color:"#E1E4E8"}}," root"),o("span",{style:{color:"#F97583"}},":"),o("span",{style:{color:"#B392F0"}}," HTMLElement")],-1)),t[115]||(t[115]=f(`
|
||||
`)),t[116]||(t[116]=o("span",{class:"line"},null,-1)),t[117]||(t[117]=f(`
|
||||
`)),t[118]||(t[118]=o("span",{class:"line"},[o("span",{style:{color:"#B392F0"}},"onMounted"),o("span",{style:{color:"#E1E4E8"}},"(() "),o("span",{style:{color:"#F97583"}},"=>"),o("span",{style:{color:"#E1E4E8"}}," {")],-1)),t[119]||(t[119]=f(`
|
||||
`)),t[120]||(t[120]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," root "),o("span",{style:{color:"#F97583"}},"="),o("span",{style:{color:"#E1E4E8"}}," document.body.firstElementChild "),o("span",{style:{color:"#F97583"}},"as"),o("span",{style:{color:"#B392F0"}}," HTMLElement")],-1)),t[121]||(t[121]=f(`
|
||||
`)),t[122]||(t[122]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}},"})")],-1)),t[123]||(t[123]=f(`
|
||||
`)),t[124]||(t[124]=o("span",{class:"line"},null,-1)),t[125]||(t[125]=f(`
|
||||
`)),t[126]||(t[126]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"const"),o("span",{style:{color:"#E1E4E8"}}," { "),o("span",{style:{color:"#79B8FF"}},"height"),o("span",{style:{color:"#E1E4E8"}},", "),o("span",{style:{color:"#79B8FF"}},"width"),o("span",{style:{color:"#E1E4E8"}}," } "),o("span",{style:{color:"#F97583"}},"="),o("span",{style:{color:"#B392F0"}}," useWindowSize"),o("span",{style:{color:"#E1E4E8"}},"()")],-1)),t[127]||(t[127]=f(`
|
||||
`)),t[128]||(t[128]=o("span",{class:"line"},null,-1)),t[129]||(t[129]=f(`
|
||||
`)),t[130]||(t[130]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"const"),o("span",{style:{color:"#79B8FF"}}," open"),o("span",{style:{color:"#F97583"}}," ="),o("span",{style:{color:"#B392F0"}}," ref"),o("span",{style:{color:"#E1E4E8"}},"("),o("span",{style:{color:"#79B8FF"}},"false"),o("span",{style:{color:"#E1E4E8"}},")")],-1)),t[131]||(t[131]=f(`
|
||||
`)),t[132]||(t[132]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"const"),o("span",{style:{color:"#79B8FF"}}," h"),o("span",{style:{color:"#F97583"}}," ="),o("span",{style:{color:"#B392F0"}}," computed"),o("span",{style:{color:"#E1E4E8"}},"(() "),o("span",{style:{color:"#F97583"}},"=>"),o("span",{style:{color:"#E1E4E8"}}," height.value "),o("span",{style:{color:"#F97583"}},"-"),o("span",{style:{color:"#79B8FF"}}," SHEET_MARGIN"),o("span",{style:{color:"#E1E4E8"}},")")],-1)),t[133]||(t[133]=f(`
|
||||
`)),t[134]||(t[134]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"const"),o("span",{style:{color:"#79B8FF"}}," y"),o("span",{style:{color:"#F97583"}}," ="),o("span",{style:{color:"#B392F0"}}," useMotionValue"),o("span",{style:{color:"#E1E4E8"}},"(h.value)")],-1)),t[135]||(t[135]=f(`
|
||||
`)),t[136]||(t[136]=o("span",{class:"line"},null,-1)),t[137]||(t[137]=f(`
|
||||
`)),t[138]||(t[138]=o("span",{class:"line"},[o("span",{style:{color:"#6A737D"}},"// Scale the body down and adjust the border radius when the sheet is open.")],-1)),t[139]||(t[139]=f(`
|
||||
`)),t[140]||(t[140]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"const"),o("span",{style:{color:"#79B8FF"}}," bodyScale"),o("span",{style:{color:"#F97583"}}," ="),o("span",{style:{color:"#B392F0"}}," useTransform"),o("span",{style:{color:"#E1E4E8"}},"(")],-1)),t[141]||(t[141]=f(`
|
||||
`)),t[142]||(t[142]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," y,")],-1)),t[143]||(t[143]=f(`
|
||||
`)),t[144]||(t[144]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," ["),o("span",{style:{color:"#79B8FF"}},"0"),o("span",{style:{color:"#E1E4E8"}},", h.value],")],-1)),t[145]||(t[145]=f(`
|
||||
`)),t[146]||(t[146]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," [(width.value "),o("span",{style:{color:"#F97583"}},"-"),o("span",{style:{color:"#79B8FF"}}," SHEET_MARGIN"),o("span",{style:{color:"#E1E4E8"}},") "),o("span",{style:{color:"#F97583"}},"/"),o("span",{style:{color:"#E1E4E8"}}," width.value, "),o("span",{style:{color:"#79B8FF"}},"1"),o("span",{style:{color:"#E1E4E8"}},"],")],-1)),t[147]||(t[147]=f(`
|
||||
`)),t[148]||(t[148]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}},")")],-1)),t[149]||(t[149]=f(`
|
||||
`)),t[150]||(t[150]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"const"),o("span",{style:{color:"#79B8FF"}}," bodyTranslate"),o("span",{style:{color:"#F97583"}}," ="),o("span",{style:{color:"#B392F0"}}," useTransform"),o("span",{style:{color:"#E1E4E8"}},"(y, ["),o("span",{style:{color:"#79B8FF"}},"0"),o("span",{style:{color:"#E1E4E8"}},", h.value], ["),o("span",{style:{color:"#79B8FF"}},"SHEET_MARGIN"),o("span",{style:{color:"#F97583"}}," -"),o("span",{style:{color:"#79B8FF"}}," SHEET_RADIUS"),o("span",{style:{color:"#E1E4E8"}},", "),o("span",{style:{color:"#79B8FF"}},"0"),o("span",{style:{color:"#E1E4E8"}},"])")],-1)),t[151]||(t[151]=f(`
|
||||
`)),t[152]||(t[152]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}},"const"),o("span",{style:{color:"#79B8FF"}}," bodyBorderRadius"),o("span",{style:{color:"#F97583"}}," ="),o("span",{style:{color:"#B392F0"}}," useTransform"),o("span",{style:{color:"#E1E4E8"}},"(y, ["),o("span",{style:{color:"#79B8FF"}},"0"),o("span",{style:{color:"#E1E4E8"}},", h.value], ["),o("span",{style:{color:"#79B8FF"}},"SHEET_RADIUS"),o("span",{style:{color:"#E1E4E8"}},", "),o("span",{style:{color:"#79B8FF"}},"0"),o("span",{style:{color:"#E1E4E8"}},"])")],-1)),t[153]||(t[153]=f(`
|
||||
`)),t[154]||(t[154]=o("span",{class:"line"},null,-1)),t[155]||(t[155]=f(`
|
||||
`)),t[156]||(t[156]=o("span",{class:"line"},[o("span",{style:{color:"#B392F0"}},"useMotionValueEvent"),o("span",{style:{color:"#E1E4E8"}},"(bodyScale, "),o("span",{style:{color:"#9ECBFF"}},"'change'"),o("span",{style:{color:"#E1E4E8"}},", "),o("span",{style:{color:"#FFAB70"}},"v"),o("span",{style:{color:"#F97583"}}," =>"),o("span",{style:{color:"#E1E4E8"}}," root.style.scale "),o("span",{style:{color:"#F97583"}},"="),o("span",{style:{color:"#9ECBFF"}}," `${"),o("span",{style:{color:"#E1E4E8"}},"v"),o("span",{style:{color:"#9ECBFF"}},"}`"),o("span",{style:{color:"#E1E4E8"}},")")],-1)),t[157]||(t[157]=f(`
|
||||
`)),t[158]||(t[158]=o("span",{class:"line"},[o("span",{style:{color:"#B392F0"}},"useMotionValueEvent"),o("span",{style:{color:"#E1E4E8"}},"(")],-1)),t[159]||(t[159]=f(`
|
||||
`)),t[160]||(t[160]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," bodyTranslate,")],-1)),t[161]||(t[161]=f(`
|
||||
`)),t[162]||(t[162]=o("span",{class:"line"},[o("span",{style:{color:"#9ECBFF"}}," 'change'"),o("span",{style:{color:"#E1E4E8"}},",")],-1)),t[163]||(t[163]=f(`
|
||||
`)),t[164]||(t[164]=o("span",{class:"line"},[o("span",{style:{color:"#FFAB70"}}," v"),o("span",{style:{color:"#F97583"}}," =>"),o("span",{style:{color:"#E1E4E8"}}," root.style.translate "),o("span",{style:{color:"#F97583"}},"="),o("span",{style:{color:"#9ECBFF"}}," `0 ${"),o("span",{style:{color:"#E1E4E8"}},"v"),o("span",{style:{color:"#9ECBFF"}},"}px`"),o("span",{style:{color:"#E1E4E8"}},",")],-1)),t[165]||(t[165]=f(`
|
||||
`)),t[166]||(t[166]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}},")")],-1)),t[167]||(t[167]=f(`
|
||||
`)),t[168]||(t[168]=o("span",{class:"line"},[o("span",{style:{color:"#B392F0"}},"useMotionValueEvent"),o("span",{style:{color:"#E1E4E8"}},"(")],-1)),t[169]||(t[169]=f(`
|
||||
`)),t[170]||(t[170]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," bodyBorderRadius,")],-1)),t[171]||(t[171]=f(`
|
||||
`)),t[172]||(t[172]=o("span",{class:"line"},[o("span",{style:{color:"#9ECBFF"}}," 'change'"),o("span",{style:{color:"#E1E4E8"}},",")],-1)),t[173]||(t[173]=f(`
|
||||
`)),t[174]||(t[174]=o("span",{class:"line"},[o("span",{style:{color:"#FFAB70"}}," v"),o("span",{style:{color:"#F97583"}}," =>"),o("span",{style:{color:"#E1E4E8"}}," root.style.borderRadius "),o("span",{style:{color:"#F97583"}},"="),o("span",{style:{color:"#9ECBFF"}}," `${"),o("span",{style:{color:"#E1E4E8"}},"v"),o("span",{style:{color:"#9ECBFF"}},"}px`"),o("span",{style:{color:"#E1E4E8"}},",")],-1)),t[175]||(t[175]=f(`
|
||||
`)),t[176]||(t[176]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}},")")],-1)),t[177]||(t[177]=f(`
|
||||
`)),t[178]||(t[178]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}},"</"),o("span",{style:{color:"#85E89D"}},"script"),o("span",{style:{color:"#E1E4E8"}},">")],-1)),t[179]||(t[179]=f(`
|
||||
`)),t[180]||(t[180]=o("span",{class:"line"},null,-1)),t[181]||(t[181]=f(`
|
||||
`)),t[182]||(t[182]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}},"<"),o("span",{style:{color:"#85E89D"}},"template"),o("span",{style:{color:"#E1E4E8"}},">")],-1)),t[183]||(t[183]=f(`
|
||||
`)),o("span",Kc,[t[2]||(t[2]=o("span",{style:{color:"#E1E4E8"}}," <",-1)),o("span",Gc,[b(l,{name:"DialogRoot"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "defaultOpen",
|
||||
"description": "<p>The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "false"
|
||||
},
|
||||
{
|
||||
"name": "modal",
|
||||
"description": "<p>The modality of the dialog When set to <code>true</code>, <br>\\ninteraction with outside elements will be disabled and only dialog content will be visible to screen readers.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "true"
|
||||
},
|
||||
{
|
||||
"name": "open",
|
||||
"description": "<p>The controlled open state of the dialog. Can be binded as <code>v-model:open</code>.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
}
|
||||
]`}),b(r,{title:"emits",data:`[
|
||||
{
|
||||
"name": "update:open",
|
||||
"description": "<p>Event handler called when the open state of the dialog changes.</p>\\n",
|
||||
"type": "[value: boolean]"
|
||||
}
|
||||
]`}),b(r,{title:"slots",data:`[
|
||||
{
|
||||
"name": "open",
|
||||
"description": "<p>Current open state</p>\\n",
|
||||
"type": "boolean"
|
||||
},
|
||||
{
|
||||
"name": "close",
|
||||
"description": "<p>Close the dialog</p>\\n",
|
||||
"type": "(): void"
|
||||
}
|
||||
]`})]),default:F(()=>[t[1]||(t[1]=f("DialogRoot"))]),_:1,__:[1]})]),t[3]||(t[3]=o("span",{style:{color:"#B392F0"}}," v-model",-1)),t[4]||(t[4]=o("span",{style:{color:"#E1E4E8"}},":",-1)),t[5]||(t[5]=o("span",{style:{color:"#B392F0"}},"open",-1)),t[6]||(t[6]=o("span",{style:{color:"#E1E4E8"}},"=",-1)),t[7]||(t[7]=o("span",{style:{color:"#9ECBFF"}},'"',-1)),t[8]||(t[8]=o("span",{style:{color:"#E1E4E8"}},"open",-1)),t[9]||(t[9]=o("span",{style:{color:"#9ECBFF"}},'"',-1)),t[10]||(t[10]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[184]||(t[184]=f(`
|
||||
`)),o("span",Wc,[t[12]||(t[12]=o("span",{style:{color:"#E1E4E8"}}," <",-1)),o("span",qc,[b(l,{name:"DialogTrigger"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "as",
|
||||
"description": "<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>\\n",
|
||||
"type": "AsTag | Component",
|
||||
"required": false,
|
||||
"default": "\\"button\\""
|
||||
},
|
||||
{
|
||||
"name": "asChild",
|
||||
"description": "<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\\n<p>Read our <a href=\\"https://www.reka-ui.com/docs/guides/composition\\">Composition</a> guide for more details.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
}
|
||||
]`})]),default:F(()=>[t[11]||(t[11]=f("DialogTrigger"))]),_:1,__:[11]})]),t[13]||(t[13]=o("span",{style:{color:"#B392F0"}}," class",-1)),t[14]||(t[14]=o("span",{style:{color:"#E1E4E8"}},"=",-1)),t[15]||(t[15]=o("span",{style:{color:"#9ECBFF"}},'"dark:text-white inline-flex items-center bg-background dark:bg-muted px-3 py-2 rounded-lg text-sm border border-muted-foreground/30"',-1)),t[16]||(t[16]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[185]||(t[185]=f(`
|
||||
`)),t[186]||(t[186]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," Open sheet")],-1)),t[187]||(t[187]=f(`
|
||||
`)),o("span",Hc,[t[18]||(t[18]=o("span",{style:{color:"#E1E4E8"}}," </",-1)),o("span",zc,[b(l,{name:"DialogTrigger"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "as",
|
||||
"description": "<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>\\n",
|
||||
"type": "AsTag | Component",
|
||||
"required": false,
|
||||
"default": "\\"button\\""
|
||||
},
|
||||
{
|
||||
"name": "asChild",
|
||||
"description": "<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\\n<p>Read our <a href=\\"https://www.reka-ui.com/docs/guides/composition\\">Composition</a> guide for more details.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
}
|
||||
]`})]),default:F(()=>[t[17]||(t[17]=f("DialogTrigger"))]),_:1,__:[17]})]),t[19]||(t[19]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[188]||(t[188]=f(`
|
||||
`)),t[189]||(t[189]=o("span",{class:"line"},null,-1)),t[190]||(t[190]=f(`
|
||||
`)),o("span",Xc,[t[21]||(t[21]=o("span",{style:{color:"#E1E4E8"}}," <",-1)),o("span",Yc,[b(l,{name:"DialogPortal"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "defer",
|
||||
"description": "<p>Defer the resolving of a Teleport target until other parts of the\\napplication have mounted (requires Vue 3.5.0+)</p>\\n<p><a href=\\"https://vuejs.org/guide/built-ins/teleport.html#deferred-teleport\\" target=\\"_blank\\">reference</a></p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"description": "<p>Disable teleport and render the component inline</p>\\n<p><a href=\\"https://vuejs.org/guide/built-ins/teleport.html#disabling-teleport\\" target=\\"_blank\\">reference</a></p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
},
|
||||
{
|
||||
"name": "forceMount",
|
||||
"description": "<p>Used to force mounting when more control is needed. Useful when\\ncontrolling animation with Vue animation libraries.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
},
|
||||
{
|
||||
"name": "to",
|
||||
"description": "<p>Vue native teleport component prop <code>:to</code></p>\\n<p><a href=\\"https://vuejs.org/guide/built-ins/teleport.html#basic-usage\\" target=\\"_blank\\">reference</a></p>\\n",
|
||||
"type": "string | HTMLElement",
|
||||
"required": false
|
||||
}
|
||||
]`})]),default:F(()=>[t[20]||(t[20]=f("DialogPortal"))]),_:1,__:[20]})]),t[22]||(t[22]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[191]||(t[191]=f(`
|
||||
`)),t[192]||(t[192]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," <"),o("span",{style:{color:"#85E89D"}},"AnimatePresence")],-1)),t[193]||(t[193]=f(`
|
||||
`)),t[194]||(t[194]=o("span",{class:"line"},[o("span",{style:{color:"#B392F0"}}," multiple")],-1)),t[195]||(t[195]=f(`
|
||||
`)),t[196]||(t[196]=o("span",{class:"line"},[o("span",{style:{color:"#B392F0"}}," as"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"div"')],-1)),t[197]||(t[197]=f(`
|
||||
`)),t[198]||(t[198]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," >")],-1)),t[199]||(t[199]=f(`
|
||||
`)),o("span",Zc,[t[24]||(t[24]=o("span",{style:{color:"#E1E4E8"}}," <",-1)),o("span",Jc,[b(l,{name:"DialogOverlay"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "as",
|
||||
"description": "<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>\\n",
|
||||
"type": "AsTag | Component",
|
||||
"required": false,
|
||||
"default": "\\"div\\""
|
||||
},
|
||||
{
|
||||
"name": "asChild",
|
||||
"description": "<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\\n<p>Read our <a href=\\"https://www.reka-ui.com/docs/guides/composition\\">Composition</a> guide for more details.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
},
|
||||
{
|
||||
"name": "forceMount",
|
||||
"description": "<p>Used to force mounting when more control is needed. Useful when\\ncontrolling animation with Vue animation libraries.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
}
|
||||
]`})]),default:F(()=>[t[23]||(t[23]=f("DialogOverlay"))]),_:1,__:[23]})]),t[25]||(t[25]=o("span",{style:{color:"#B392F0"}}," as-child",-1)),t[26]||(t[26]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[200]||(t[200]=f(`
|
||||
`)),t[201]||(t[201]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," <"),o("span",{style:{color:"#85E89D"}},"Motion")],-1)),t[202]||(t[202]=f(`
|
||||
`)),t[203]||(t[203]=o("span",{class:"line"},[o("span",{style:{color:"#B392F0"}}," class"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"fixed inset-0 z-10 bg-background/60"')],-1)),t[204]||(t[204]=f(`
|
||||
`)),t[205]||(t[205]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," :"),o("span",{style:{color:"#B392F0"}},"initial"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"'),o("span",{style:{color:"#E1E4E8"}},"{ opacity: "),o("span",{style:{color:"#79B8FF"}},"0"),o("span",{style:{color:"#E1E4E8"}}," }"),o("span",{style:{color:"#9ECBFF"}},'"')],-1)),t[206]||(t[206]=f(`
|
||||
`)),t[207]||(t[207]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," :"),o("span",{style:{color:"#B392F0"}},"animate"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"'),o("span",{style:{color:"#E1E4E8"}},"{ opacity: "),o("span",{style:{color:"#79B8FF"}},"1"),o("span",{style:{color:"#E1E4E8"}}," }"),o("span",{style:{color:"#9ECBFF"}},'"')],-1)),t[208]||(t[208]=f(`
|
||||
`)),t[209]||(t[209]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," :"),o("span",{style:{color:"#B392F0"}},"exit"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"'),o("span",{style:{color:"#E1E4E8"}},"{ opacity: "),o("span",{style:{color:"#79B8FF"}},"0"),o("span",{style:{color:"#E1E4E8"}}," }"),o("span",{style:{color:"#9ECBFF"}},'"')],-1)),t[210]||(t[210]=f(`
|
||||
`)),t[211]||(t[211]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," :"),o("span",{style:{color:"#B392F0"}},"transition"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"'),o("span",{style:{color:"#E1E4E8"}},"staticTransition"),o("span",{style:{color:"#9ECBFF"}},'"')],-1)),t[212]||(t[212]=f(`
|
||||
`)),t[213]||(t[213]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," />")],-1)),t[214]||(t[214]=f(`
|
||||
`)),o("span",Qc,[t[28]||(t[28]=o("span",{style:{color:"#E1E4E8"}}," </",-1)),o("span",_c,[b(l,{name:"DialogOverlay"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "as",
|
||||
"description": "<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>\\n",
|
||||
"type": "AsTag | Component",
|
||||
"required": false,
|
||||
"default": "\\"div\\""
|
||||
},
|
||||
{
|
||||
"name": "asChild",
|
||||
"description": "<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\\n<p>Read our <a href=\\"https://www.reka-ui.com/docs/guides/composition\\">Composition</a> guide for more details.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
},
|
||||
{
|
||||
"name": "forceMount",
|
||||
"description": "<p>Used to force mounting when more control is needed. Useful when\\ncontrolling animation with Vue animation libraries.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
}
|
||||
]`})]),default:F(()=>[t[27]||(t[27]=f("DialogOverlay"))]),_:1,__:[27]})]),t[29]||(t[29]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[215]||(t[215]=f(`
|
||||
`)),t[216]||(t[216]=o("span",{class:"line"},null,-1)),t[217]||(t[217]=f(`
|
||||
`)),o("span",td,[t[31]||(t[31]=o("span",{style:{color:"#E1E4E8"}}," <",-1)),o("span",ed,[b(l,{name:"DialogContent"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "as",
|
||||
"description": "<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>\\n",
|
||||
"type": "AsTag | Component",
|
||||
"required": false,
|
||||
"default": "\\"div\\""
|
||||
},
|
||||
{
|
||||
"name": "asChild",
|
||||
"description": "<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\\n<p>Read our <a href=\\"https://www.reka-ui.com/docs/guides/composition\\">Composition</a> guide for more details.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
},
|
||||
{
|
||||
"name": "disableOutsidePointerEvents",
|
||||
"description": "<p>When <code>true</code>, hover/focus/click interactions will be disabled on elements outside\\nthe <code>DismissableLayer</code>. Users will need to click twice on outside elements to\\ninteract with them: once to close the <code>DismissableLayer</code>, and again to trigger the element.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
},
|
||||
{
|
||||
"name": "forceMount",
|
||||
"description": "<p>Used to force mounting when more control is needed. Useful when\\ncontrolling animation with Vue animation libraries.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
}
|
||||
]`}),b(r,{title:"emits",data:`[
|
||||
{
|
||||
"name": "closeAutoFocus",
|
||||
"description": "<p>Event handler called when auto-focusing on close.\\nCan be prevented.</p>\\n",
|
||||
"type": "[event: Event]"
|
||||
},
|
||||
{
|
||||
"name": "escapeKeyDown",
|
||||
"description": "<p>Event handler called when the escape key is down.\\nCan be prevented.</p>\\n",
|
||||
"type": "[event: KeyboardEvent]"
|
||||
},
|
||||
{
|
||||
"name": "focusOutside",
|
||||
"description": "<p>Event handler called when the focus moves outside of the <code>DismissableLayer</code>.\\nCan be prevented.</p>\\n",
|
||||
"type": "[event: FocusOutsideEvent]"
|
||||
},
|
||||
{
|
||||
"name": "interactOutside",
|
||||
"description": "<p>Event handler called when an interaction happens outside the <code>DismissableLayer</code>.\\nSpecifically, when a <code>pointerdown</code> event happens outside or focus moves outside of it.\\nCan be prevented.</p>\\n",
|
||||
"type": "[event: PointerDownOutsideEvent | FocusOutsideEvent]"
|
||||
},
|
||||
{
|
||||
"name": "openAutoFocus",
|
||||
"description": "<p>Event handler called when auto-focusing on open.\\nCan be prevented.</p>\\n",
|
||||
"type": "[event: Event]"
|
||||
},
|
||||
{
|
||||
"name": "pointerDownOutside",
|
||||
"description": "<p>Event handler called when a <code>pointerdown</code> event happens outside of the <code>DismissableLayer</code>.\\nCan be prevented.</p>\\n",
|
||||
"type": "[event: PointerDownOutsideEvent]"
|
||||
}
|
||||
]`})]),default:F(()=>[t[30]||(t[30]=f("DialogContent"))]),_:1,__:[30]})]),t[32]||(t[32]=o("span",{style:{color:"#B392F0"}}," as-child",-1)),t[33]||(t[33]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[218]||(t[218]=f(`
|
||||
`)),t[219]||(t[219]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," <"),o("span",{style:{color:"#85E89D"}},"Motion")],-1)),t[220]||(t[220]=f(`
|
||||
`)),t[221]||(t[221]=o("span",{class:"line"},[o("span",{style:{color:"#B392F0"}}," class"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"bg-card dark:bg-stone-900 fixed inset-0 z-20 bottom-0 w-full rounded-t-xl shadow-lg will-change-transform"')],-1)),t[222]||(t[222]=f(`
|
||||
`)),t[223]||(t[223]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," :"),o("span",{style:{color:"#B392F0"}},"initial"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"'),o("span",{style:{color:"#E1E4E8"}},"{ y: h }"),o("span",{style:{color:"#9ECBFF"}},'"')],-1)),t[224]||(t[224]=f(`
|
||||
`)),t[225]||(t[225]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," :"),o("span",{style:{color:"#B392F0"}},"animate"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"'),o("span",{style:{color:"#E1E4E8"}},"{ y: "),o("span",{style:{color:"#79B8FF"}},"0"),o("span",{style:{color:"#E1E4E8"}}," }"),o("span",{style:{color:"#9ECBFF"}},'"')],-1)),t[226]||(t[226]=f(`
|
||||
`)),t[227]||(t[227]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," :"),o("span",{style:{color:"#B392F0"}},"exit"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"'),o("span",{style:{color:"#E1E4E8"}},"{ y: h }"),o("span",{style:{color:"#9ECBFF"}},'"')],-1)),t[228]||(t[228]=f(`
|
||||
`)),t[229]||(t[229]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," :"),o("span",{style:{color:"#B392F0"}},"transition"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"'),o("span",{style:{color:"#E1E4E8"}},"staticTransition"),o("span",{style:{color:"#9ECBFF"}},'"')],-1)),t[230]||(t[230]=f(`
|
||||
`)),t[231]||(t[231]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," :"),o("span",{style:{color:"#B392F0"}},"style"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"'),o("span",{style:{color:"#E1E4E8"}},"{")],-1)),t[232]||(t[232]=f(`
|
||||
`)),t[233]||(t[233]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," y,")],-1)),t[234]||(t[234]=f(`
|
||||
`)),t[235]||(t[235]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," top: "),o("span",{style:{color:"#9ECBFF"}},"`${"),o("span",{style:{color:"#79B8FF"}},"SHEET_MARGIN"),o("span",{style:{color:"#9ECBFF"}},"}px`"),o("span",{style:{color:"#E1E4E8"}},",")],-1)),t[236]||(t[236]=f(`
|
||||
`)),t[237]||(t[237]=o("span",{class:"line"},[o("span",{style:{color:"#6A737D"}}," // Extra padding at the bottom to account for rubber band scrolling.")],-1)),t[238]||(t[238]=f(`
|
||||
`)),t[239]||(t[239]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," paddingBottom: "),o("span",{style:{color:"#9ECBFF"}},"`${"),o("span",{style:{color:"#E1E4E8"}},"height"),o("span",{style:{color:"#9ECBFF"}},"}px`"),o("span",{style:{color:"#E1E4E8"}},",")],-1)),t[240]||(t[240]=f(`
|
||||
`)),t[241]||(t[241]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," }"),o("span",{style:{color:"#9ECBFF"}},'"')],-1)),t[242]||(t[242]=f(`
|
||||
`)),t[243]||(t[243]=o("span",{class:"line"},[o("span",{style:{color:"#B392F0"}}," drag"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"y"')],-1)),t[244]||(t[244]=f(`
|
||||
`)),t[245]||(t[245]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," :"),o("span",{style:{color:"#B392F0"}},"drag-constraints"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"'),o("span",{style:{color:"#E1E4E8"}},"{ top: "),o("span",{style:{color:"#79B8FF"}},"0"),o("span",{style:{color:"#E1E4E8"}}," }"),o("span",{style:{color:"#9ECBFF"}},'"')],-1)),t[246]||(t[246]=f(`
|
||||
`)),t[247]||(t[247]=o("span",{class:"line"},null,-1)),t[248]||(t[248]=f(`
|
||||
`)),t[249]||(t[249]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," @"),o("span",{style:{color:"#B392F0"}},"drag-end"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"'),o("span",{style:{color:"#E1E4E8"}},"("),o("span",{style:{color:"#FFAB70"}},"e"),o("span",{style:{color:"#E1E4E8"}},", { "),o("span",{style:{color:"#FFAB70"}},"offset"),o("span",{style:{color:"#E1E4E8"}},", "),o("span",{style:{color:"#FFAB70"}},"velocity"),o("span",{style:{color:"#E1E4E8"}}," }) "),o("span",{style:{color:"#F97583"}},"=>"),o("span",{style:{color:"#E1E4E8"}}," {")],-1)),t[250]||(t[250]=f(`
|
||||
`)),t[251]||(t[251]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}}," if"),o("span",{style:{color:"#E1E4E8"}}," (offset.y "),o("span",{style:{color:"#F97583"}},">"),o("span",{style:{color:"#E1E4E8"}}," height "),o("span",{style:{color:"#F97583"}},"*"),o("span",{style:{color:"#79B8FF"}}," 0.75"),o("span",{style:{color:"#F97583"}}," ||"),o("span",{style:{color:"#E1E4E8"}}," velocity.y "),o("span",{style:{color:"#F97583"}},">"),o("span",{style:{color:"#79B8FF"}}," 10"),o("span",{style:{color:"#E1E4E8"}},") {")],-1)),t[252]||(t[252]=f(`
|
||||
`)),t[253]||(t[253]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," open "),o("span",{style:{color:"#F97583"}},"="),o("span",{style:{color:"#79B8FF"}}," false"),o("span",{style:{color:"#E1E4E8"}},";")],-1)),t[254]||(t[254]=f(`
|
||||
`)),t[255]||(t[255]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," }")],-1)),t[256]||(t[256]=f(`
|
||||
`)),t[257]||(t[257]=o("span",{class:"line"},[o("span",{style:{color:"#F97583"}}," else"),o("span",{style:{color:"#E1E4E8"}}," {")],-1)),t[258]||(t[258]=f(`
|
||||
`)),t[259]||(t[259]=o("span",{class:"line"},[o("span",{style:{color:"#B392F0"}}," animate"),o("span",{style:{color:"#E1E4E8"}},"(y, "),o("span",{style:{color:"#79B8FF"}},"0"),o("span",{style:{color:"#E1E4E8"}},", { "),o("span",{style:{color:"#F97583"}},"..."),o("span",{style:{color:"#E1E4E8"}},"inertiaTransition, min: "),o("span",{style:{color:"#79B8FF"}},"0"),o("span",{style:{color:"#E1E4E8"}},", max: "),o("span",{style:{color:"#79B8FF"}},"0"),o("span",{style:{color:"#E1E4E8"}}," });")],-1)),t[260]||(t[260]=f(`
|
||||
`)),t[261]||(t[261]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," }")],-1)),t[262]||(t[262]=f(`
|
||||
`)),t[263]||(t[263]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," }"),o("span",{style:{color:"#9ECBFF"}},'"')],-1)),t[264]||(t[264]=f(`
|
||||
`)),t[265]||(t[265]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," >")],-1)),t[266]||(t[266]=f(`
|
||||
`)),t[267]||(t[267]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," <"),o("span",{style:{color:"#85E89D"}},"div"),o("span",{style:{color:"#B392F0"}}," class"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"mx-auto w-12 mt-2 h-1.5 rounded-full bg-gray-300 dark:bg-gray-400"'),o("span",{style:{color:"#FDAEB7","font-style":"italic"}}," /"),o("span",{style:{color:"#E1E4E8"}},">")],-1)),t[268]||(t[268]=f(`
|
||||
`)),t[269]||(t[269]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," <"),o("span",{style:{color:"#85E89D"}},"div"),o("span",{style:{color:"#B392F0"}}," class"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"px-4 pb-4 outline-hidden max-w-xl mx-auto"'),o("span",{style:{color:"#E1E4E8"}},">")],-1)),t[270]||(t[270]=f(`
|
||||
`)),t[271]||(t[271]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," <"),o("span",{style:{color:"#85E89D"}},"div"),o("span",{style:{color:"#B392F0"}}," class"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"flex justify-end"'),o("span",{style:{color:"#E1E4E8"}},">")],-1)),t[272]||(t[272]=f(`
|
||||
`)),o("span",nd,[t[35]||(t[35]=o("span",{style:{color:"#E1E4E8"}}," <",-1)),o("span",sd,[b(l,{name:"DialogClose"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "as",
|
||||
"description": "<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>\\n",
|
||||
"type": "AsTag | Component",
|
||||
"required": false,
|
||||
"default": "\\"button\\""
|
||||
},
|
||||
{
|
||||
"name": "asChild",
|
||||
"description": "<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\\n<p>Read our <a href=\\"https://www.reka-ui.com/docs/guides/composition\\">Composition</a> guide for more details.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
}
|
||||
]`})]),default:F(()=>[t[34]||(t[34]=f("DialogClose"))]),_:1,__:[34]})]),t[36]||(t[36]=o("span",{style:{color:"#B392F0"}}," class",-1)),t[37]||(t[37]=o("span",{style:{color:"#E1E4E8"}},"=",-1)),t[38]||(t[38]=o("span",{style:{color:"#9ECBFF"}},'"dark:text-white inline-flex items-center bg-background dark: p-2 rounded-full text-sm border border-muted-foreground/30"',-1)),t[39]||(t[39]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[273]||(t[273]=f(`
|
||||
`)),t[274]||(t[274]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," <"),o("span",{style:{color:"#85E89D"}},"Icon"),o("span",{style:{color:"#B392F0"}}," icon"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"lucide:x"'),o("span",{style:{color:"#E1E4E8"}}," />")],-1)),t[275]||(t[275]=f(`
|
||||
`)),o("span",od,[t[41]||(t[41]=o("span",{style:{color:"#E1E4E8"}}," </",-1)),o("span",id,[b(l,{name:"DialogClose"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "as",
|
||||
"description": "<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>\\n",
|
||||
"type": "AsTag | Component",
|
||||
"required": false,
|
||||
"default": "\\"button\\""
|
||||
},
|
||||
{
|
||||
"name": "asChild",
|
||||
"description": "<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\\n<p>Read our <a href=\\"https://www.reka-ui.com/docs/guides/composition\\">Composition</a> guide for more details.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
}
|
||||
]`})]),default:F(()=>[t[40]||(t[40]=f("DialogClose"))]),_:1,__:[40]})]),t[42]||(t[42]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[276]||(t[276]=f(`
|
||||
`)),t[277]||(t[277]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," </"),o("span",{style:{color:"#85E89D"}},"div"),o("span",{style:{color:"#E1E4E8"}},">")],-1)),t[278]||(t[278]=f(`
|
||||
`)),o("span",rd,[t[44]||(t[44]=o("span",{style:{color:"#E1E4E8"}}," <",-1)),o("span",ad,[b(l,{name:"DialogTitle"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "as",
|
||||
"description": "<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>\\n",
|
||||
"type": "AsTag | Component",
|
||||
"required": false,
|
||||
"default": "\\"h2\\""
|
||||
},
|
||||
{
|
||||
"name": "asChild",
|
||||
"description": "<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\\n<p>Read our <a href=\\"https://www.reka-ui.com/docs/guides/composition\\">Composition</a> guide for more details.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
}
|
||||
]`})]),default:F(()=>[t[43]||(t[43]=f("DialogTitle"))]),_:1,__:[43]})]),t[45]||(t[45]=o("span",{style:{color:"#B392F0"}}," class",-1)),t[46]||(t[46]=o("span",{style:{color:"#E1E4E8"}},"=",-1)),t[47]||(t[47]=o("span",{style:{color:"#9ECBFF"}},'"text-3xl font-semibold mb-4"',-1)),t[48]||(t[48]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[279]||(t[279]=f(`
|
||||
`)),t[280]||(t[280]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," Modal sheet")],-1)),t[281]||(t[281]=f(`
|
||||
`)),o("span",ld,[t[50]||(t[50]=o("span",{style:{color:"#E1E4E8"}}," </",-1)),o("span",ud,[b(l,{name:"DialogTitle"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "as",
|
||||
"description": "<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>\\n",
|
||||
"type": "AsTag | Component",
|
||||
"required": false,
|
||||
"default": "\\"h2\\""
|
||||
},
|
||||
{
|
||||
"name": "asChild",
|
||||
"description": "<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\\n<p>Read our <a href=\\"https://www.reka-ui.com/docs/guides/composition\\">Composition</a> guide for more details.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
}
|
||||
]`})]),default:F(()=>[t[49]||(t[49]=f("DialogTitle"))]),_:1,__:[49]})]),t[51]||(t[51]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[282]||(t[282]=f(`
|
||||
`)),o("span",pd,[t[53]||(t[53]=o("span",{style:{color:"#E1E4E8"}}," <",-1)),o("span",cd,[b(l,{name:"DialogDescription"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "as",
|
||||
"description": "<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>\\n",
|
||||
"type": "AsTag | Component",
|
||||
"required": false,
|
||||
"default": "\\"p\\""
|
||||
},
|
||||
{
|
||||
"name": "asChild",
|
||||
"description": "<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\\n<p>Read our <a href=\\"https://www.reka-ui.com/docs/guides/composition\\">Composition</a> guide for more details.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
}
|
||||
]`})]),default:F(()=>[t[52]||(t[52]=f("DialogDescription"))]),_:1,__:[52]})]),t[54]||(t[54]=o("span",{style:{color:"#B392F0"}}," class",-1)),t[55]||(t[55]=o("span",{style:{color:"#E1E4E8"}},"=",-1)),t[56]||(t[56]=o("span",{style:{color:"#9ECBFF"}},'"text-lg mb-4"',-1)),t[57]||(t[57]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[283]||(t[283]=f(`
|
||||
`)),t[284]||(t[284]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," This is a dialog with a custom modal overlay built with Reka UI and Motion-v.")],-1)),t[285]||(t[285]=f(`
|
||||
`)),o("span",dd,[t[59]||(t[59]=o("span",{style:{color:"#E1E4E8"}}," </",-1)),o("span",fd,[b(l,{name:"DialogDescription"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "as",
|
||||
"description": "<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>\\n",
|
||||
"type": "AsTag | Component",
|
||||
"required": false,
|
||||
"default": "\\"p\\""
|
||||
},
|
||||
{
|
||||
"name": "asChild",
|
||||
"description": "<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\\n<p>Read our <a href=\\"https://www.reka-ui.com/docs/guides/composition\\">Composition</a> guide for more details.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
}
|
||||
]`})]),default:F(()=>[t[58]||(t[58]=f("DialogDescription"))]),_:1,__:[58]})]),t[60]||(t[60]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[286]||(t[286]=f(`
|
||||
`)),t[287]||(t[287]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," <"),o("span",{style:{color:"#85E89D"}},"p"),o("span",{style:{color:"#B392F0"}}," class"),o("span",{style:{color:"#E1E4E8"}},"="),o("span",{style:{color:"#9ECBFF"}},'"text-lg"'),o("span",{style:{color:"#E1E4E8"}},">")],-1)),t[288]||(t[288]=f(`
|
||||
`)),t[289]||(t[289]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," Lorem ipsum dolor sit amet, consectetur adipiscing elit.")],-1)),t[290]||(t[290]=f(`
|
||||
`)),t[291]||(t[291]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," Aenean sit amet nisl blandit, pellentesque eros eu,")],-1)),t[292]||(t[292]=f(`
|
||||
`)),t[293]||(t[293]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," scelerisque eros. Sed cursus urna at nunc lacinia dapibus.")],-1)),t[294]||(t[294]=f(`
|
||||
`)),t[295]||(t[295]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," </"),o("span",{style:{color:"#85E89D"}},"p"),o("span",{style:{color:"#E1E4E8"}},">")],-1)),t[296]||(t[296]=f(`
|
||||
`)),t[297]||(t[297]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," </"),o("span",{style:{color:"#85E89D"}},"div"),o("span",{style:{color:"#E1E4E8"}},">")],-1)),t[298]||(t[298]=f(`
|
||||
`)),t[299]||(t[299]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," </"),o("span",{style:{color:"#85E89D"}},"Motion"),o("span",{style:{color:"#E1E4E8"}},">")],-1)),t[300]||(t[300]=f(`
|
||||
`)),o("span",hd,[t[62]||(t[62]=o("span",{style:{color:"#E1E4E8"}}," </",-1)),o("span",md,[b(l,{name:"DialogContent"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "as",
|
||||
"description": "<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>\\n",
|
||||
"type": "AsTag | Component",
|
||||
"required": false,
|
||||
"default": "\\"div\\""
|
||||
},
|
||||
{
|
||||
"name": "asChild",
|
||||
"description": "<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\\n<p>Read our <a href=\\"https://www.reka-ui.com/docs/guides/composition\\">Composition</a> guide for more details.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
},
|
||||
{
|
||||
"name": "disableOutsidePointerEvents",
|
||||
"description": "<p>When <code>true</code>, hover/focus/click interactions will be disabled on elements outside\\nthe <code>DismissableLayer</code>. Users will need to click twice on outside elements to\\ninteract with them: once to close the <code>DismissableLayer</code>, and again to trigger the element.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
},
|
||||
{
|
||||
"name": "forceMount",
|
||||
"description": "<p>Used to force mounting when more control is needed. Useful when\\ncontrolling animation with Vue animation libraries.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
}
|
||||
]`}),b(r,{title:"emits",data:`[
|
||||
{
|
||||
"name": "closeAutoFocus",
|
||||
"description": "<p>Event handler called when auto-focusing on close.\\nCan be prevented.</p>\\n",
|
||||
"type": "[event: Event]"
|
||||
},
|
||||
{
|
||||
"name": "escapeKeyDown",
|
||||
"description": "<p>Event handler called when the escape key is down.\\nCan be prevented.</p>\\n",
|
||||
"type": "[event: KeyboardEvent]"
|
||||
},
|
||||
{
|
||||
"name": "focusOutside",
|
||||
"description": "<p>Event handler called when the focus moves outside of the <code>DismissableLayer</code>.\\nCan be prevented.</p>\\n",
|
||||
"type": "[event: FocusOutsideEvent]"
|
||||
},
|
||||
{
|
||||
"name": "interactOutside",
|
||||
"description": "<p>Event handler called when an interaction happens outside the <code>DismissableLayer</code>.\\nSpecifically, when a <code>pointerdown</code> event happens outside or focus moves outside of it.\\nCan be prevented.</p>\\n",
|
||||
"type": "[event: PointerDownOutsideEvent | FocusOutsideEvent]"
|
||||
},
|
||||
{
|
||||
"name": "openAutoFocus",
|
||||
"description": "<p>Event handler called when auto-focusing on open.\\nCan be prevented.</p>\\n",
|
||||
"type": "[event: Event]"
|
||||
},
|
||||
{
|
||||
"name": "pointerDownOutside",
|
||||
"description": "<p>Event handler called when a <code>pointerdown</code> event happens outside of the <code>DismissableLayer</code>.\\nCan be prevented.</p>\\n",
|
||||
"type": "[event: PointerDownOutsideEvent]"
|
||||
}
|
||||
]`})]),default:F(()=>[t[61]||(t[61]=f("DialogContent"))]),_:1,__:[61]})]),t[63]||(t[63]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[301]||(t[301]=f(`
|
||||
`)),t[302]||(t[302]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}}," </"),o("span",{style:{color:"#85E89D"}},"AnimatePresence"),o("span",{style:{color:"#E1E4E8"}},">")],-1)),t[303]||(t[303]=f(`
|
||||
`)),o("span",yd,[t[65]||(t[65]=o("span",{style:{color:"#E1E4E8"}}," </",-1)),o("span",gd,[b(l,{name:"DialogPortal"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "defer",
|
||||
"description": "<p>Defer the resolving of a Teleport target until other parts of the\\napplication have mounted (requires Vue 3.5.0+)</p>\\n<p><a href=\\"https://vuejs.org/guide/built-ins/teleport.html#deferred-teleport\\" target=\\"_blank\\">reference</a></p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"description": "<p>Disable teleport and render the component inline</p>\\n<p><a href=\\"https://vuejs.org/guide/built-ins/teleport.html#disabling-teleport\\" target=\\"_blank\\">reference</a></p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
},
|
||||
{
|
||||
"name": "forceMount",
|
||||
"description": "<p>Used to force mounting when more control is needed. Useful when\\ncontrolling animation with Vue animation libraries.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
},
|
||||
{
|
||||
"name": "to",
|
||||
"description": "<p>Vue native teleport component prop <code>:to</code></p>\\n<p><a href=\\"https://vuejs.org/guide/built-ins/teleport.html#basic-usage\\" target=\\"_blank\\">reference</a></p>\\n",
|
||||
"type": "string | HTMLElement",
|
||||
"required": false
|
||||
}
|
||||
]`})]),default:F(()=>[t[64]||(t[64]=f("DialogPortal"))]),_:1,__:[64]})]),t[66]||(t[66]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[304]||(t[304]=f(`
|
||||
`)),o("span",vd,[t[68]||(t[68]=o("span",{style:{color:"#E1E4E8"}}," </",-1)),o("span",Ed,[b(l,{name:"DialogRoot"},{content:F(({})=>[b(r,{title:"props",data:`[
|
||||
{
|
||||
"name": "defaultOpen",
|
||||
"description": "<p>The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "false"
|
||||
},
|
||||
{
|
||||
"name": "modal",
|
||||
"description": "<p>The modality of the dialog When set to <code>true</code>, <br>\\ninteraction with outside elements will be disabled and only dialog content will be visible to screen readers.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "true"
|
||||
},
|
||||
{
|
||||
"name": "open",
|
||||
"description": "<p>The controlled open state of the dialog. Can be binded as <code>v-model:open</code>.</p>\\n",
|
||||
"type": "boolean",
|
||||
"required": false
|
||||
}
|
||||
]`}),b(r,{title:"emits",data:`[
|
||||
{
|
||||
"name": "update:open",
|
||||
"description": "<p>Event handler called when the open state of the dialog changes.</p>\\n",
|
||||
"type": "[value: boolean]"
|
||||
}
|
||||
]`}),b(r,{title:"slots",data:`[
|
||||
{
|
||||
"name": "open",
|
||||
"description": "<p>Current open state</p>\\n",
|
||||
"type": "boolean"
|
||||
},
|
||||
{
|
||||
"name": "close",
|
||||
"description": "<p>Close the dialog</p>\\n",
|
||||
"type": "(): void"
|
||||
}
|
||||
]`})]),default:F(()=>[t[67]||(t[67]=f("DialogRoot"))]),_:1,__:[67]})]),t[69]||(t[69]=o("span",{style:{color:"#E1E4E8"}},">",-1))]),t[305]||(t[305]=f(`
|
||||
`)),t[306]||(t[306]=o("span",{class:"line"},[o("span",{style:{color:"#E1E4E8"}},"</"),o("span",{style:{color:"#85E89D"}},"template"),o("span",{style:{color:"#E1E4E8"}},">")],-1))])])])]),default:F(()=>[b(Uc)]),_:1}),b(p,null,{default:F(()=>[t[310]||(t[310]=o("h3",{id:"dialog",tabindex:"-1",class:"group relative border-none mb-4 lg:-ml-2 lg:pl-2 lg:pr-2 w-max"},[f("Dialog "),o("a",{class:"header-anchor [&_span]:focus:opacity-100 [&_span_>_span]:focus:outline",href:"#dialog","aria-label":'Permalink to "Dialog"'},[o("span",{class:"absolute top-0 -ml-8 hidden items-center border-0 opacity-0 group-hover:opacity-100 focus:opacity-100 lg:flex"},[f(""),o("span",{class:"flex h-6 w-6 items-center justify-center rounded-md outline-2 outline-primary text-green-400 shadow-sm hover:text-green-700 hover:shadow dark:bg-primary/20 dark:text-primary/80 dark:shadow-none dark:hover:bg-primary/40 dark:hover:text-primary"},[o("svg",{width:"12",height:"12",fill:"none","aria-hidden":"true"},[o("path",{d:"M3.75 1v10M8.25 1v10M1 3.75h10M1 8.25h10",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"})])])])])],-1)),b(c,{type:"info",title:"Credit"},{default:F(()=>t[309]||(t[309]=[o("p",null,[f("Inspired by "),o("a",{href:"https://react-spectrum.adobe.com/react-aria/examples/framer-modal-sheet.html",target:"_blank",rel:"noreferrer"},"React Aria")],-1)])),_:1,__:[309]})]),_:1,__:[310]})])}}});export{Sd as __pageData,Ad as default};
|
||||
|
||||
@@ -1,351 +0,0 @@
|
||||
1 <script setup lang="ts">
|
||||
2 import { computed, onBeforeUnmount, ref, watch, type Component ,onMounted} from 'vue'
|
||||
3 import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
4 import { Button } from '@/components/ui/button'
|
||||
5 import {
|
||||
6 DialogClose,
|
||||
7 DialogContent,
|
||||
8 DialogOverlay,
|
||||
9 DialogPortal,
|
||||
10 DialogRoot,
|
||||
11 DialogTitle,
|
||||
12 DialogTrigger,DialogDescription
|
||||
13 } from 'reka-ui'
|
||||
14 import { Icon } from '@iconify/vue'
|
||||
15 import { useWindowSize } from '@vueuse/core'
|
||||
16 import { animate, AnimatePresence, Motion, useMotionValue, useMotionValueEvent, useTransform } from 'motion-v'
|
||||
17 interface TypeLineCategory {
|
||||
18 key: string
|
||||
19 label: string
|
||||
20 component: Component
|
||||
21 }
|
||||
22
|
||||
23 const props = withDefaults(
|
||||
24 defineProps<{
|
||||
25 scene?: string
|
||||
26 title?: string
|
||||
27 subtitle?: string
|
||||
28 copyText?: string
|
||||
29 categories: TypeLineCategory[]
|
||||
30 storageKey?: string
|
||||
31 defaultCategory?: string
|
||||
32 }>(),
|
||||
33 {
|
||||
34 scene: 'default',
|
||||
35 title: '配置',
|
||||
36 subtitle: '',
|
||||
37 copyText: '',
|
||||
38 storageKey: '',
|
||||
39 defaultCategory: ''
|
||||
40 }
|
||||
41 )
|
||||
42
|
||||
43 const cacheKey = computed(() => props.storageKey || `type-line-active-cat-${props.scene}`)
|
||||
44
|
||||
45 const resolveInitialCategory = () => {
|
||||
46 const defaultKey = props.defaultCategory || props.categories[0]?.key || ''
|
||||
47 const savedKey = sessionStorage.getItem(cacheKey.value)
|
||||
48 const validSavedKey = props.categories.some(item => item.key === savedKey)
|
||||
49 return validSavedKey ? (savedKey as string) : defaultKey
|
||||
50 }
|
||||
51
|
||||
52 const activeCategory = ref(resolveInitialCategory())
|
||||
53
|
||||
54 watch(
|
||||
55 () => [props.categories, props.defaultCategory, cacheKey.value],
|
||||
56 () => {
|
||||
57 activeCategory.value = resolveInitialCategory()
|
||||
58 },
|
||||
59 { deep: true }
|
||||
60 )
|
||||
61
|
||||
62 const switchCategory = (cat: string) => {
|
||||
63 activeCategory.value = cat
|
||||
64 sessionStorage.setItem(cacheKey.value, cat)
|
||||
65 }
|
||||
66
|
||||
67 const activeComponent = computed(() => {
|
||||
68 const selected = props.categories.find(item => item.key === activeCategory.value)
|
||||
69 return selected?.component || props.categories[0]?.component || null
|
||||
70 })
|
||||
71
|
||||
72 const copyBtnText = ref('复制')
|
||||
73 const sheetOpen = ref(false)
|
||||
74 let copyBtnTimer: ReturnType<typeof setTimeout> | null = null
|
||||
75
|
||||
76 const handleCopySubtitle = async () => {
|
||||
77 const text = (props.copyText || '').trim()
|
||||
78 if (!text) return
|
||||
79
|
||||
80 try {
|
||||
81 await navigator.clipboard.writeText(text)
|
||||
82 copyBtnText.value = '已复制'
|
||||
83 } catch (error) {
|
||||
84 console.error('copy failed:', error)
|
||||
85 copyBtnText.value = '复制失败'
|
||||
86 }
|
||||
87
|
||||
88 if (copyBtnTimer) clearTimeout(copyBtnTimer)
|
||||
89 copyBtnTimer = setTimeout(() => {
|
||||
90 copyBtnText.value = '复制'
|
||||
91 }, 1200)
|
||||
92 }
|
||||
93
|
||||
94 onBeforeUnmount(() => {
|
||||
95 if (copyBtnTimer) clearTimeout(copyBtnTimer)
|
||||
96 if (!root) return
|
||||
97 root.style.scale = ''
|
||||
98 root.style.translate = ''
|
||||
99 root.style.borderRadius = ''
|
||||
100 })
|
||||
101
|
||||
102 //
|
||||
103
|
||||
104
|
||||
105 const inertiaTransition = {
|
||||
106 type: 'inertia' as const,
|
||||
107 bounceStiffness: 300,
|
||||
108 bounceDamping: 40,
|
||||
109 timeConstant: 300,
|
||||
110 }
|
||||
111
|
||||
112 const staticTransition = {
|
||||
113 duration: 0.5,
|
||||
114 ease: [0.32, 0.72, 0, 1] as const,
|
||||
115 }
|
||||
116
|
||||
117 const SHEET_TOP_RATIO = 0.1
|
||||
118 const SHEET_RADIUS = 12
|
||||
119 const OFFICIAL_SITE_URL = '/'
|
||||
120
|
||||
121 let root: HTMLElement | null = null
|
||||
122
|
||||
123 onMounted(() => {
|
||||
124 root = document.body.firstElementChild as HTMLElement | null
|
||||
125 })
|
||||
126
|
||||
127 const { height, width } = useWindowSize()
|
||||
128
|
||||
129 const sheetTop = computed(() => Math.round(height.value * SHEET_TOP_RATIO))
|
||||
130 const h = computed(() => Math.max(0, height.value - sheetTop.value))
|
||||
131 const y = useMotionValue(h.value)
|
||||
132
|
||||
133 watch(
|
||||
134 () => h.value,
|
||||
135 (nextHeight) => {
|
||||
136 if (!sheetOpen.value) y.jump(nextHeight)
|
||||
137 }
|
||||
138 )
|
||||
139
|
||||
140 watch(
|
||||
141 () => sheetOpen.value,
|
||||
142 (isOpen) => {
|
||||
143 if (!isOpen) {
|
||||
144 y.jump(h.value)
|
||||
145 return
|
||||
146 }
|
||||
147 y.jump(h.value)
|
||||
148 animate(y, 0, staticTransition)
|
||||
149 }
|
||||
150 )
|
||||
151
|
||||
152 // Scale the body down and adjust the border radius when the sheet is open.
|
||||
153 const bodyScale = useTransform(
|
||||
154 y,
|
||||
155 [0, h.value],
|
||||
156 [(width.value - sheetTop.value) / width.value, 1],
|
||||
157 )
|
||||
158 const bodyTranslate = useTransform(y, [0, h.value], [sheetTop.value - SHEET_RADIUS, 0])
|
||||
159 const bodyBorderRadius = useTransform(y, [0, h.value], [SHEET_RADIUS, 0])
|
||||
160
|
||||
161 useMotionValueEvent(bodyScale, 'change', (v) => {
|
||||
162 if (!root) return
|
||||
163 root.style.scale = `${v}`
|
||||
164 })
|
||||
165 useMotionValueEvent(
|
||||
166 bodyTranslate,
|
||||
167 'change',
|
||||
168 (v) => {
|
||||
169 if (!root) return
|
||||
170 root.style.translate = `0 ${v}px`
|
||||
171 },
|
||||
172 )
|
||||
173 useMotionValueEvent(
|
||||
174 bodyBorderRadius,
|
||||
175 'change',
|
||||
176 (v) => {
|
||||
177 if (!root) return
|
||||
178 root.style.borderRadius = `${v}px`
|
||||
179 },
|
||||
180 )
|
||||
181 </script>
|
||||
182
|
||||
183 <template>
|
||||
184 <div class="flex h-full w-full bg-background">
|
||||
185 <div class="w-12/100 border-r p-6 flex flex-col gap-8 relative">
|
||||
186 <div v-if="props.title || props.subtitle" class="space-y-1">
|
||||
187 <div v-if="props.title" class="font-bold text-base leading-6 text-primary break-words">
|
||||
188 {{ props.title }}
|
||||
189 </div>
|
||||
190 <div
|
||||
191 v-if="props.subtitle"
|
||||
192 class="flex flex-wrap items-center gap-2 text-xs leading-5 text-muted-foreground"
|
||||
193 >
|
||||
194 <span class="break-all">{{ props.subtitle }}</span>
|
||||
195 <Button
|
||||
196 v-if="props.copyText"
|
||||
197 type="button"
|
||||
198 variant="outline"
|
||||
199 size="sm"
|
||||
200 class="h-6 rounded-md px-2 text-[11px]"
|
||||
201 @click.stop="handleCopySubtitle"
|
||||
202 >
|
||||
203 {{ copyBtnText }}
|
||||
204 </Button>
|
||||
205 </div>
|
||||
206 </div>
|
||||
207
|
||||
208 <div class="flex flex-col gap-10 relative">
|
||||
209 <div class="absolute left-[11px] top-2 bottom-2 w-[2px] bg-muted"></div>
|
||||
210
|
||||
211 <div
|
||||
212 v-for="item in props.categories"
|
||||
213 :key="item.key"
|
||||
214 class="relative flex items-center gap-4 cursor-pointer group"
|
||||
215 @click="switchCategory(item.key)"
|
||||
216 >
|
||||
217 <div
|
||||
218 :class="[
|
||||
219 'z-10 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all',
|
||||
220 activeCategory === item.key
|
||||
221 ? 'bg-primary border-primary scale-110'
|
||||
222 : 'bg-background border-muted-foreground'
|
||||
223 ]"
|
||||
224 >
|
||||
225 <div v-if="activeCategory === item.key" class="w-2 h-2 bg-background rounded-full"></div>
|
||||
226 </div>
|
||||
227 <span
|
||||
228 :class="[
|
||||
229 'text-sm transition-colors',
|
||||
230 activeCategory === item.key
|
||||
231 ? 'font-bold text-primary'
|
||||
232 : 'text-muted-foreground group-hover:text-foreground'
|
||||
233 ]"
|
||||
234 >
|
||||
235 {{ item.label }}
|
||||
236 </span>
|
||||
237 </div>
|
||||
238 </div>
|
||||
239
|
||||
240 <DialogRoot v-model:open="sheetOpen">
|
||||
241 <DialogTrigger as-child>
|
||||
242 <button
|
||||
243 type="button"
|
||||
244 class="absolute left-4 right-4 bottom-4 flex flex-col items-center gap-1.5 rounded-lg border bg-muted/35 px-3 py-2 text-center text-[12px] leading-5 text-foreground/85 shadow-sm hover:bg-muted/55 hover:text-foreground transition-colors"
|
||||
245 >
|
||||
246 <img src="/favicon.ico" alt="众为咨询" class="h-5 w-5 shrink-0 rounded-sm" />
|
||||
247 <span>本网站由众为工程咨询有限公司提供免费技术支持</span>
|
||||
248 </button>
|
||||
249 </DialogTrigger>
|
||||
250 <DialogPortal>
|
||||
251 <AnimatePresence
|
||||
252 multiple
|
||||
253 as="div"
|
||||
254 >
|
||||
255 <DialogOverlay as-child>
|
||||
256 <Motion
|
||||
257 class="fixed inset-0 z-10 bg-black/45 backdrop-blur-[2px]"
|
||||
258 :initial="{ opacity: 0 }"
|
||||
259 :animate="{ opacity: 1 }"
|
||||
260 :exit="{ opacity: 0 }"
|
||||
261 :transition="staticTransition"
|
||||
262 />
|
||||
263 </DialogOverlay>
|
||||
264
|
||||
265 <DialogContent as-child>
|
||||
266 <Motion
|
||||
267 class="fixed inset-x-0 bottom-0 z-20 overflow-hidden rounded-t-2xl border border-border/60 bg-card/95 shadow-2xl backdrop-blur-xl will-change-transform"
|
||||
268 :style="{
|
||||
269 y,
|
||||
270 top: `${sheetTop}px`,
|
||||
271 }"
|
||||
272 drag="y"
|
||||
273 :drag-constraints="{ top: 0 }"
|
||||
274 @drag-end="(e, { offset, velocity }) => {
|
||||
275 if (offset.y > h * 0.35 || velocity.y > 10) {
|
||||
276 sheetOpen = false;
|
||||
277 }
|
||||
278 else {
|
||||
279 animate(y, 0, { ...inertiaTransition, min: 0, max: 0 });
|
||||
280 }
|
||||
281 }"
|
||||
282 >
|
||||
283 <div class="mx-auto mt-2 h-1.5 w-12 rounded-full bg-muted-foreground/35" />
|
||||
284 <div class="mx-auto flex h-full w-full max-w-2xl flex-col px-4 pb-5 pt-3">
|
||||
285 <div class="mb-3 flex items-center justify-between gap-3">
|
||||
286 <DialogTitle class="m-0">
|
||||
287 <div class="flex items-center gap-3">
|
||||
288 <img src="/favicon.ico" alt="众为咨询" class="h-7 w-7 shrink-0 rounded-sm" />
|
||||
289 <span class="text-2xl font-semibold leading-none">关于我们</span>
|
||||
290 </div>
|
||||
291 </DialogTitle>
|
||||
292 <div class="flex items-center gap-2">
|
||||
293 <a
|
||||
294 :href="OFFICIAL_SITE_URL"
|
||||
295 target="_blank"
|
||||
296 rel="noopener noreferrer"
|
||||
297 class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-muted-foreground/30 text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground"
|
||||
298 aria-label="跳转到官网首页"
|
||||
299 title="官网首页"
|
||||
300 >
|
||||
301 <Icon icon="lucide:arrow-up-right" class="h-4 w-4" />
|
||||
302 </a>
|
||||
303 <DialogClose class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-muted-foreground/30 text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground">
|
||||
304 <Icon icon="lucide:x" class="h-4 w-4" />
|
||||
305 </DialogClose>
|
||||
306 </div>
|
||||
307 </div>
|
||||
308
|
||||
309 <DialogDescription class="mb-4 text-base text-muted-foreground">
|
||||
310 <p class="font-medium text-foreground">众为工程咨询有限公司</p>
|
||||
311 </DialogDescription>
|
||||
312
|
||||
313 <div class="space-y-4 overflow-y-auto pr-1 text-[15px] leading-7">
|
||||
314 <p>
|
||||
315 众为工程咨询有限公司长期专注于工程咨询与数字化服务，致力于为客户提供高效、可靠、可持续的解决方案。
|
||||
316 </p>
|
||||
317 <p>
|
||||
318 我们围绕咨询管理、数据治理、系统建设与运维支持，持续提升项目交付质量，帮助客户降低沟通成本、提升协同效率。
|
||||
319 </p>
|
||||
320 <p>
|
||||
321 本网站由众为工程咨询有限公司提供免费技术支持，如需商务合作或技术咨询，请与我们联系。
|
||||
322 </p>
|
||||
323 </div>
|
||||
324 </div>
|
||||
325 </Motion>
|
||||
326 </DialogContent>
|
||||
327 </AnimatePresence>
|
||||
328 </DialogPortal>
|
||||
329 </DialogRoot>
|
||||
330
|
||||
331 </div>
|
||||
332
|
||||
333 <div class="w-88/100 min-h-0 h-full flex flex-col">
|
||||
334 <ScrollArea class="h-full w-full min-h-0 rightMain">
|
||||
335 <div class="p-3 h-full min-h-0 flex flex-col">
|
||||
336 <keep-alive>
|
||||
337 <component :is="activeComponent" />
|
||||
338 </keep-alive>
|
||||
339 </div>
|
||||
340 </ScrollArea>
|
||||
341 </div>
|
||||
342 </div>
|
||||
343 </template>
|
||||
344 <style scoped>
|
||||
345 /* 核心修改：添加 :deep() 穿透 scoped 作用域 */
|
||||
346 :deep(.rightMain > div > div) {
|
||||
347 height: 100%;
|
||||
348 min-height: 0;
|
||||
349 box-sizing: border-box;
|
||||
350 }
|
||||
351 </style>
|
||||
Reference in new issue
Block a user