Changed quote styles
This commit is contained in:
18
app.vue
18
app.vue
@@ -1,12 +1,12 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ConfigProvider } from 'radix-vue'
|
import { ConfigProvider } from "radix-vue"
|
||||||
|
|
||||||
useHead({
|
useHead({
|
||||||
titleTemplate: (titleChunk) => {
|
titleTemplate: (titleChunk) => {
|
||||||
return titleChunk ? `${titleChunk} — TTTools` : 'TTTools';
|
return titleChunk ? `${titleChunk} — TTTools` : "TTTools";
|
||||||
},
|
},
|
||||||
htmlAttrs: {
|
htmlAttrs: {
|
||||||
lang: 'fr'
|
lang: "fr"
|
||||||
},
|
},
|
||||||
meta: [
|
meta: [
|
||||||
{ name: "charset", content: "UTF-8" },
|
{ name: "charset", content: "UTF-8" },
|
||||||
@@ -18,14 +18,14 @@ useHead({
|
|||||||
{ name: "theme-color", content: "00aba9" },
|
{ name: "theme-color", content: "00aba9" },
|
||||||
{ name: "og:type", content: "tabletop-tools" },
|
{ name: "og:type", content: "tabletop-tools" },
|
||||||
{ name: "og:url", content: "ttt.alexcreates.fr" },
|
{ name: "og:url", content: "ttt.alexcreates.fr" },
|
||||||
{ name: 'robots', content: 'noindex, nofollow'}
|
{ name: "robots", content: "noindex, nofollow"}
|
||||||
],
|
],
|
||||||
link: [
|
link: [
|
||||||
{ rel: 'apple-touch-icon', sizes: "76x76", href: '/apple-touch-icon.png' },
|
{ rel: "apple-touch-icon", sizes: "76x76", href: "/apple-touch-icon.png" },
|
||||||
{ rel: 'icon', sizes: "32x32", type: 'image/png', href: '/favicon-32x32.png' },
|
{ rel: "icon", sizes: "32x32", type: "image/png", href: "/favicon-32x32.png" },
|
||||||
{ rel: 'icon', sizes: "16x16", type: 'image/png', href: '/favicon-16x16.png' },
|
{ rel: "icon", sizes: "16x16", type: "image/png", href: "/favicon-16x16.png" },
|
||||||
{ rel: 'manifest', href: '/site.webmanifest' },
|
{ rel: "manifest", href: "/site.webmanifest" },
|
||||||
{ rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#6595b4' },
|
{ rel: "mask-icon", href: "/safari-pinned-tab.svg", color: "#6595b4" },
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -1,15 +1,15 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useCalendar } from '@/stores/CalendarStore'
|
import { useCalendar } from "@/stores/CalendarStore"
|
||||||
import { computed, type Component, type ComputedRef } from 'vue'
|
import { computed, type Component, type ComputedRef } from "vue"
|
||||||
|
|
||||||
// import { PhMagnifyingGlass } from '@phosphor-icons/vue'
|
// import { PhMagnifyingGlass } from '@phosphor-icons/vue'
|
||||||
import MonthlyLayout from './state/monthly/Layout.vue'
|
import MonthlyLayout from "./state/monthly/Layout.vue"
|
||||||
import CenturyLayout from './state/centennially/Layout.vue'
|
import CenturyLayout from "./state/centennially/Layout.vue"
|
||||||
import DecadeLayout from './state/decennially/Layout.vue'
|
import DecadeLayout from "./state/decennially/Layout.vue"
|
||||||
import YearLayout from './state/yearly/Layout.vue'
|
import YearLayout from "./state/yearly/Layout.vue"
|
||||||
|
|
||||||
import type { Calendar } from '~/models/CalendarConfig'
|
import type { Calendar } from "~/models/CalendarConfig"
|
||||||
import type { Category } from '~/models/Category'
|
import type { Category } from "~/models/Category"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
calendarData: Calendar,
|
calendarData: Calendar,
|
||||||
@@ -25,16 +25,16 @@ const { currentConfig, jumpToDate, selectedDate } = useCalendar()
|
|||||||
|
|
||||||
const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
|
const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
|
||||||
switch (currentConfig.viewType) {
|
switch (currentConfig.viewType) {
|
||||||
case 'month':
|
case "month":
|
||||||
return MonthlyLayout
|
return MonthlyLayout
|
||||||
|
|
||||||
case 'year':
|
case "year":
|
||||||
return YearLayout
|
return YearLayout
|
||||||
|
|
||||||
case 'decade':
|
case "decade":
|
||||||
return DecadeLayout
|
return DecadeLayout
|
||||||
|
|
||||||
case 'century':
|
case "century":
|
||||||
default:
|
default:
|
||||||
return CenturyLayout
|
return CenturyLayout
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from "pinia"
|
||||||
import { computed } from 'vue'
|
import { computed } from "vue"
|
||||||
|
|
||||||
import { PhMapPin } from '@phosphor-icons/vue'
|
import { PhMapPin } from "@phosphor-icons/vue"
|
||||||
|
|
||||||
const { defaultDate, getFormattedDateTitle, getRelativeString } = useCalendar()
|
const { defaultDate, getFormattedDateTitle, getRelativeString } = useCalendar()
|
||||||
const { selectedDate } = storeToRefs(useCalendar())
|
const { selectedDate } = storeToRefs(useCalendar())
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
import type { RPGDate } from '@/models/Date'
|
import type { RPGDate } from "@/models/Date"
|
||||||
import type { CalendarEvent } from '~/models/CalendarEvent'
|
import type { CalendarEvent } from "~/models/CalendarEvent"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
event: CalendarEvent
|
event: CalendarEvent
|
||||||
@@ -39,12 +39,12 @@ function handleClosePopover() {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// Listen for keydown events
|
// Listen for keydown events
|
||||||
window.addEventListener('keydown', (e: KeyboardEvent) => {
|
window.addEventListener("keydown", (e: KeyboardEvent) => {
|
||||||
// If the popover isn't opened, this is not the event we're trying to delete, so return
|
// If the popover isn't opened, this is not the event we're trying to delete, so return
|
||||||
if (!isPopoverDetailsOpen.value) return
|
if (!isPopoverDetailsOpen.value) return
|
||||||
|
|
||||||
// If the key isn't the delete one, return
|
// If the key isn't the delete one, return
|
||||||
if (e.key !== 'Delete') return
|
if (e.key !== "Delete") return
|
||||||
|
|
||||||
handleDelete()
|
handleDelete()
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
import type { RPGDate } from '@/models/Date'
|
import type { RPGDate } from "@/models/Date"
|
||||||
import type { CalendarEvent } from '@/models/CalendarEvent'
|
import type { CalendarEvent } from "@/models/CalendarEvent"
|
||||||
import { useCalendar } from '@/stores/CalendarStore'
|
import { useCalendar } from "@/stores/CalendarStore"
|
||||||
|
|
||||||
import {
|
import {
|
||||||
PhHourglassMedium,
|
PhHourglassMedium,
|
||||||
@@ -12,7 +12,7 @@ import {
|
|||||||
PhMapPinArea,
|
PhMapPinArea,
|
||||||
PhDotsThreeOutlineVertical,
|
PhDotsThreeOutlineVertical,
|
||||||
PhEye
|
PhEye
|
||||||
} from '@phosphor-icons/vue'
|
} from "@phosphor-icons/vue"
|
||||||
|
|
||||||
const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString, revealEditEventModal, revealDeleteEventModal } = useCalendar()
|
const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString, revealEditEventModal, revealDeleteEventModal } = useCalendar()
|
||||||
const { lastActiveEvent } = storeToRefs(useCalendar())
|
const { lastActiveEvent } = storeToRefs(useCalendar())
|
||||||
@@ -27,16 +27,16 @@ const props = defineProps<{
|
|||||||
// Ref for the popover
|
// Ref for the popover
|
||||||
const eventDetails = ref<HTMLElement>()
|
const eventDetails = ref<HTMLElement>()
|
||||||
|
|
||||||
const emit = defineEmits(['query:close-popover'])
|
const emit = defineEmits(["query:close-popover"])
|
||||||
|
|
||||||
const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
|
const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
|
||||||
const dateDuration: string | null = props.event.endDate
|
const dateDuration: string | null = props.event.endDate
|
||||||
? getRelativeString(props.event.startDate, props.event.endDate, 'compact')
|
? getRelativeString(props.event.startDate, props.event.endDate, "compact")
|
||||||
: null
|
: null
|
||||||
|
|
||||||
function handleJumpToDate(date: RPGDate) {
|
function handleJumpToDate(date: RPGDate) {
|
||||||
jumpToDate(date)
|
jumpToDate(date)
|
||||||
emit('query:close-popover')
|
emit("query:close-popover")
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useCalendar } from '@/stores/CalendarStore'
|
import { useCalendar } from "@/stores/CalendarStore"
|
||||||
|
|
||||||
import { PhMagnifyingGlass } from '@phosphor-icons/vue'
|
import { PhMagnifyingGlass } from "@phosphor-icons/vue"
|
||||||
|
|
||||||
const { revealAdvancedSearch } = useCalendar()
|
const { revealAdvancedSearch } = useCalendar()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, type ComputedRef } from 'vue'
|
import { computed, type ComputedRef } from "vue"
|
||||||
import { useCalendar } from '@/stores/CalendarStore'
|
import { useCalendar } from "@/stores/CalendarStore"
|
||||||
|
|
||||||
import {
|
import {
|
||||||
PhCaretDoubleLeft,
|
PhCaretDoubleLeft,
|
||||||
PhCaretDoubleRight,
|
PhCaretDoubleRight,
|
||||||
PhCaretLeft,
|
PhCaretLeft,
|
||||||
PhCaretRight
|
PhCaretRight
|
||||||
} from '@phosphor-icons/vue'
|
} from "@phosphor-icons/vue"
|
||||||
|
|
||||||
interface DirectionLabels {
|
interface DirectionLabels {
|
||||||
pastFar: string
|
pastFar: string
|
||||||
@@ -21,56 +21,56 @@ const { currentConfig, decrementViewMonth, incrementViewMonth, decrementViewYear
|
|||||||
|
|
||||||
const activeDirectionLabels: ComputedRef<DirectionLabels> = computed(() => {
|
const activeDirectionLabels: ComputedRef<DirectionLabels> = computed(() => {
|
||||||
switch (currentConfig.viewType) {
|
switch (currentConfig.viewType) {
|
||||||
case 'month':
|
case "month":
|
||||||
return {
|
return {
|
||||||
pastFar: 'Année précédente',
|
pastFar: "Année précédente",
|
||||||
pastNear: 'Mois précédent',
|
pastNear: "Mois précédent",
|
||||||
futureNear: 'Mois suivant',
|
futureNear: "Mois suivant",
|
||||||
futureFar: 'Année suivante'
|
futureFar: "Année suivante"
|
||||||
}
|
}
|
||||||
|
|
||||||
case 'year':
|
case "year":
|
||||||
return {
|
return {
|
||||||
pastFar: 'Décennie précédente',
|
pastFar: "Décennie précédente",
|
||||||
pastNear: 'Année précédente',
|
pastNear: "Année précédente",
|
||||||
futureNear: 'Année suivante',
|
futureNear: "Année suivante",
|
||||||
futureFar: 'Décennie suivante'
|
futureFar: "Décennie suivante"
|
||||||
}
|
}
|
||||||
|
|
||||||
case 'decade':
|
case "decade":
|
||||||
return {
|
return {
|
||||||
pastFar: 'Siècle précédent',
|
pastFar: "Siècle précédent",
|
||||||
pastNear: 'Décennie précédente',
|
pastNear: "Décennie précédente",
|
||||||
futureNear: 'Décennie suivante',
|
futureNear: "Décennie suivante",
|
||||||
futureFar: 'Siècle suivant'
|
futureFar: "Siècle suivant"
|
||||||
}
|
}
|
||||||
|
|
||||||
case 'century':
|
case "century":
|
||||||
default:
|
default:
|
||||||
return {
|
return {
|
||||||
pastFar: 'Millénaire précédent',
|
pastFar: "Millénaire précédent",
|
||||||
pastNear: 'Siècle précédent',
|
pastNear: "Siècle précédent",
|
||||||
futureNear: 'Siècle suivant',
|
futureNear: "Siècle suivant",
|
||||||
futureFar: 'Millénaire suivant'
|
futureFar: "Millénaire suivant"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
function toPastFar(): void {
|
function toPastFar(): void {
|
||||||
switch (currentConfig.viewType) {
|
switch (currentConfig.viewType) {
|
||||||
case 'month':
|
case "month":
|
||||||
decrementViewYear()
|
decrementViewYear()
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'year':
|
case "year":
|
||||||
decrementViewYear(10)
|
decrementViewYear(10)
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'decade':
|
case "decade":
|
||||||
decrementViewYear(100)
|
decrementViewYear(100)
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'century':
|
case "century":
|
||||||
default:
|
default:
|
||||||
decrementViewYear(1000)
|
decrementViewYear(1000)
|
||||||
break
|
break
|
||||||
@@ -79,19 +79,19 @@ function toPastFar(): void {
|
|||||||
|
|
||||||
function toPastNear(): void {
|
function toPastNear(): void {
|
||||||
switch (currentConfig.viewType) {
|
switch (currentConfig.viewType) {
|
||||||
case 'month':
|
case "month":
|
||||||
decrementViewMonth()
|
decrementViewMonth()
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'year':
|
case "year":
|
||||||
decrementViewYear()
|
decrementViewYear()
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'decade':
|
case "decade":
|
||||||
decrementViewYear(10)
|
decrementViewYear(10)
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'century':
|
case "century":
|
||||||
default:
|
default:
|
||||||
decrementViewYear(100)
|
decrementViewYear(100)
|
||||||
break
|
break
|
||||||
@@ -100,19 +100,19 @@ function toPastNear(): void {
|
|||||||
|
|
||||||
function toFutureNear(): void {
|
function toFutureNear(): void {
|
||||||
switch (currentConfig.viewType) {
|
switch (currentConfig.viewType) {
|
||||||
case 'month':
|
case "month":
|
||||||
incrementViewMonth()
|
incrementViewMonth()
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'year':
|
case "year":
|
||||||
incrementViewYear()
|
incrementViewYear()
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'decade':
|
case "decade":
|
||||||
incrementViewYear(10)
|
incrementViewYear(10)
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'century':
|
case "century":
|
||||||
default:
|
default:
|
||||||
incrementViewYear(100)
|
incrementViewYear(100)
|
||||||
break
|
break
|
||||||
@@ -121,19 +121,19 @@ function toFutureNear(): void {
|
|||||||
|
|
||||||
function toFutureFar(): void {
|
function toFutureFar(): void {
|
||||||
switch (currentConfig.viewType) {
|
switch (currentConfig.viewType) {
|
||||||
case 'month':
|
case "month":
|
||||||
incrementViewYear()
|
incrementViewYear()
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'year':
|
case "year":
|
||||||
incrementViewYear(10)
|
incrementViewYear(10)
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'decade':
|
case "decade":
|
||||||
incrementViewYear(100)
|
incrementViewYear(100)
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'century':
|
case "century":
|
||||||
default:
|
default:
|
||||||
incrementViewYear(1000)
|
incrementViewYear(1000)
|
||||||
break
|
break
|
||||||
|
|||||||
@@ -1,22 +1,22 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { type RPGDate } from '@/models/Date'
|
import { type RPGDate } from "@/models/Date"
|
||||||
|
|
||||||
import { PhArrowLineLeft, PhArrowLineRight } from '@phosphor-icons/vue'
|
import { PhArrowLineLeft, PhArrowLineRight } from "@phosphor-icons/vue"
|
||||||
|
|
||||||
const { currentDate, currentConfig, jumpToDate, getRelativeEventFromDate } = useCalendar()
|
const { currentDate, currentConfig, jumpToDate, getRelativeEventFromDate } = useCalendar()
|
||||||
|
|
||||||
function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
|
function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
|
||||||
let fromDate: RPGDate
|
let fromDate: RPGDate
|
||||||
|
|
||||||
// To modify, obviously
|
// To modify, obviously
|
||||||
const daysPerMonth = 32
|
const daysPerMonth = 32
|
||||||
const monthsPerYear = 10
|
const monthsPerYear = 10
|
||||||
|
|
||||||
const toDay = position === 'next' ? daysPerMonth : 1
|
const toDay = position === "next" ? daysPerMonth : 1
|
||||||
const toMonth = position === 'next' ? monthsPerYear : 0
|
const toMonth = position === "next" ? monthsPerYear : 0
|
||||||
|
|
||||||
switch (currentConfig.viewType) {
|
switch (currentConfig.viewType) {
|
||||||
case 'month':
|
case "month":
|
||||||
fromDate = {
|
fromDate = {
|
||||||
day: toDay,
|
day: toDay,
|
||||||
month: currentDate.currentMonth,
|
month: currentDate.currentMonth,
|
||||||
@@ -24,7 +24,7 @@ function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
|
|||||||
}
|
}
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'year':
|
case "year":
|
||||||
fromDate = {
|
fromDate = {
|
||||||
day: toDay,
|
day: toDay,
|
||||||
month: toMonth,
|
month: toMonth,
|
||||||
@@ -32,7 +32,7 @@ function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
|
|||||||
}
|
}
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'decade':
|
case "decade":
|
||||||
fromDate = {
|
fromDate = {
|
||||||
day: toDay,
|
day: toDay,
|
||||||
month: currentDate.currentMonth,
|
month: currentDate.currentMonth,
|
||||||
@@ -40,7 +40,7 @@ function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
|
|||||||
}
|
}
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'century':
|
case "century":
|
||||||
default:
|
default:
|
||||||
fromDate = {
|
fromDate = {
|
||||||
day: toDay,
|
day: toDay,
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from "pinia"
|
||||||
import { computed } from 'vue'
|
import { computed } from "vue"
|
||||||
|
|
||||||
const { defaultDate, areDatesIdentical, jumpToDefaultDate, getFormattedDateTitle } = useCalendar()
|
const { defaultDate, areDatesIdentical, jumpToDefaultDate, getFormattedDateTitle } = useCalendar()
|
||||||
const { selectedDate } = storeToRefs(useCalendar())
|
const { selectedDate } = storeToRefs(useCalendar())
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useCalendar } from '@/stores/CalendarStore'
|
import { useCalendar } from "@/stores/CalendarStore"
|
||||||
import { PhCalendarBlank } from '@phosphor-icons/vue'
|
import { PhCalendarBlank } from "@phosphor-icons/vue"
|
||||||
import { computed } from 'vue'
|
import { computed } from "vue"
|
||||||
|
|
||||||
const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
|
const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
export const searchUnifier = new RegExp(/[^a-zA-Z0-9\-'']/g)
|
export const searchUnifier = new RegExp(/[^a-zA-Z0-9\-'']/g)
|
||||||
|
|
||||||
export type SearchMode = 'characters' | 'events' | undefined
|
export type SearchMode = "characters" | "events" | undefined
|
||||||
|
|||||||
@@ -1,22 +1,22 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { PhX } from '@phosphor-icons/vue';
|
import { PhX } from "@phosphor-icons/vue";
|
||||||
import type { World } from '~/models/World';
|
import type { World } from "~/models/World";
|
||||||
|
|
||||||
defineProps<{
|
defineProps<{
|
||||||
world: World,
|
world: World,
|
||||||
modalState?: boolean
|
modalState?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const calendarSkeletonName = ref<string>('')
|
const calendarSkeletonName = ref<string>("")
|
||||||
|
|
||||||
function onChangedName(newName: string) {
|
function onChangedName(newName: string) {
|
||||||
calendarSkeletonName.value = newName
|
calendarSkeletonName.value = newName
|
||||||
}
|
}
|
||||||
|
|
||||||
const emit = defineEmits(['on-close'])
|
const emit = defineEmits(["on-close"])
|
||||||
|
|
||||||
function handleClose() {
|
function handleClose() {
|
||||||
emit('on-close')
|
emit("on-close")
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { PhCircleNotch } from '@phosphor-icons/vue';
|
import { PhCircleNotch } from "@phosphor-icons/vue";
|
||||||
import type { Calendar } from '~/models/CalendarConfig';
|
import type { Calendar } from "~/models/CalendarConfig";
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
modalState: boolean,
|
modalState: boolean,
|
||||||
@@ -9,7 +9,7 @@ const props = defineProps<{
|
|||||||
|
|
||||||
const isLoading = ref<boolean>(false)
|
const isLoading = ref<boolean>(false)
|
||||||
|
|
||||||
const emit = defineEmits(['on-close'])
|
const emit = defineEmits(["on-close"])
|
||||||
|
|
||||||
async function handleAction(): Promise<void> {
|
async function handleAction(): Promise<void> {
|
||||||
if (isLoading.value) return
|
if (isLoading.value) return
|
||||||
@@ -18,7 +18,7 @@ async function handleAction(): Promise<void> {
|
|||||||
isLoading.value = true
|
isLoading.value = true
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await $fetch(`/api/calendars/${props.calendar.id}`, { method: 'DELETE' })
|
await $fetch(`/api/calendars/${props.calendar.id}`, { method: "DELETE" })
|
||||||
|
|
||||||
// isDeleteEventModalOpen.value = false
|
// isDeleteEventModalOpen.value = false
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -37,7 +37,7 @@ async function handleAction(): Promise<void> {
|
|||||||
*/
|
*/
|
||||||
function handleClosing() {
|
function handleClosing() {
|
||||||
if (!isLoading.value) {
|
if (!isLoading.value) {
|
||||||
emit('on-close')
|
emit("on-close")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,16 +1,16 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { Calendar } from '~/models/CalendarConfig';
|
import type { Calendar } from "~/models/CalendarConfig";
|
||||||
import { PhAlarm, PhCalendarDots, PhCircleNotch, PhWrench } from '@phosphor-icons/vue';
|
import { PhAlarm, PhCalendarDots, PhCircleNotch, PhWrench } from "@phosphor-icons/vue";
|
||||||
|
|
||||||
const defaultSkeleton: Calendar = { name: '', today: { day: 1, month: 0, year: 0 }, months: [], events: []}
|
const defaultSkeleton: Calendar = { name: "", today: { day: 1, month: 0, year: 0 }, months: [], events: []}
|
||||||
const calendarSkeleton = ref<Calendar>({ ...defaultSkeleton })
|
const calendarSkeleton = ref<Calendar>({ ...defaultSkeleton })
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
calendarSkeleton.value = { ...defaultSkeleton }
|
calendarSkeleton.value = { ...defaultSkeleton }
|
||||||
})
|
})
|
||||||
|
|
||||||
type FormTabs = 'global' | 'months' | 'today'
|
type FormTabs = "global" | "months" | "today"
|
||||||
const activeTab = ref<FormTabs>('global')
|
const activeTab = ref<FormTabs>("global")
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* === Current date ===
|
* === Current date ===
|
||||||
@@ -40,9 +40,9 @@ const isCreatingCalendar = ref<boolean>(false)
|
|||||||
async function handleSubmit() {
|
async function handleSubmit() {
|
||||||
try {
|
try {
|
||||||
isCreatingCalendar.value = true
|
isCreatingCalendar.value = true
|
||||||
await $fetch(`/api/calendars/create`, { method: 'POST', body: {...calendarSkeleton.value, worldId: 1 } })
|
await $fetch("/api/calendars/create", { method: "POST", body: {...calendarSkeleton.value, worldId: 1 } })
|
||||||
|
|
||||||
emit('on-close')
|
emit("on-close")
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
} finally {
|
} finally {
|
||||||
@@ -55,18 +55,18 @@ async function handleSubmit() {
|
|||||||
*/
|
*/
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
(e: 'on-changed-name', calendarName: string): void
|
(e: "on-changed-name", calendarName: string): void
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
(e: 'on-close'): void
|
(e: "on-close"): void
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
/** Hook to emit a debounced event for the changed skeleton name */
|
/** Hook to emit a debounced event for the changed skeleton name */
|
||||||
const handleNameChange = useDebounceFn(() => {
|
const handleNameChange = useDebounceFn(() => {
|
||||||
emit('on-changed-name', calendarSkeleton.value.name)
|
emit("on-changed-name", calendarSkeleton.value.name)
|
||||||
}, 400)
|
}, 400)
|
||||||
|
|
||||||
function handleFormCancel() {
|
function handleFormCancel() {
|
||||||
emit('on-close')
|
emit("on-close")
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { RPGDate } from '~/models/Date';
|
import type { RPGDate } from "~/models/Date";
|
||||||
import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from '@phosphor-icons/vue'
|
import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from "@phosphor-icons/vue"
|
||||||
|
|
||||||
const { eventSkeleton, operationInProgress } = storeToRefs(useCalendar())
|
const { eventSkeleton, operationInProgress } = storeToRefs(useCalendar())
|
||||||
const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendar()
|
const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendar()
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { PhCircleNotch } from '@phosphor-icons/vue';
|
import { PhCircleNotch } from "@phosphor-icons/vue";
|
||||||
|
|
||||||
const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendar()
|
const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendar()
|
||||||
const { isDeleteEventModalOpen, eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
|
const { isDeleteEventModalOpen, eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from '@phosphor-icons/vue'
|
import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from "@phosphor-icons/vue"
|
||||||
import { VisuallyHidden } from 'radix-vue'
|
import { VisuallyHidden } from "radix-vue"
|
||||||
|
|
||||||
const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar()
|
const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar()
|
||||||
const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
|
const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { Category } from '~/models/Category';
|
import type { Category } from "~/models/Category";
|
||||||
|
|
||||||
import { PhCaretDown, PhCheck } from '@phosphor-icons/vue';
|
import { PhCaretDown, PhCheck } from "@phosphor-icons/vue";
|
||||||
|
|
||||||
const isPopoverOpen = ref<boolean>(false)
|
const isPopoverOpen = ref<boolean>(false)
|
||||||
|
|
||||||
@@ -18,10 +18,10 @@ watch(modelBuffer.value, () => {
|
|||||||
|
|
||||||
const { categories: availableCategories } = useCalendar()
|
const { categories: availableCategories } = useCalendar()
|
||||||
|
|
||||||
const searchTerm = ref<string>('')
|
const searchTerm = ref<string>("")
|
||||||
|
|
||||||
const filteredCategories = computed(() =>
|
const filteredCategories = computed(() =>
|
||||||
searchTerm.value === ''
|
searchTerm.value === ""
|
||||||
? availableCategories
|
? availableCategories
|
||||||
: availableCategories.filter((category) => {
|
: availableCategories.filter((category) => {
|
||||||
return category.name.toLowerCase().includes(searchTerm.value.toLowerCase())
|
return category.name.toLowerCase().includes(searchTerm.value.toLowerCase())
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { PhCaretDown } from '@phosphor-icons/vue';
|
import { PhCaretDown } from "@phosphor-icons/vue";
|
||||||
import type { Category } from '~/models/Category';
|
import type { Category } from "~/models/Category";
|
||||||
|
|
||||||
const isPopoverOpen = ref<boolean>(false)
|
const isPopoverOpen = ref<boolean>(false)
|
||||||
|
|
||||||
@@ -12,14 +12,14 @@ const model = defineModel<Category>()
|
|||||||
|
|
||||||
const { categories: availableCategories } = useCalendar()
|
const { categories: availableCategories } = useCalendar()
|
||||||
|
|
||||||
const searchTerm = ref<string>('')
|
const searchTerm = ref<string>("")
|
||||||
|
|
||||||
function handleCatSelect() {
|
function handleCatSelect() {
|
||||||
isPopoverOpen.value = false
|
isPopoverOpen.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const filteredCategories = computed(() =>
|
const filteredCategories = computed(() =>
|
||||||
searchTerm.value === ''
|
searchTerm.value === ""
|
||||||
? availableCategories
|
? availableCategories
|
||||||
: availableCategories.filter((category) => {
|
: availableCategories.filter((category) => {
|
||||||
return category.name.toLowerCase().includes(searchTerm.value.toLowerCase())
|
return category.name.toLowerCase().includes(searchTerm.value.toLowerCase())
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { cn } from '~/lib/utils';
|
import { cn } from "~/lib/utils";
|
||||||
|
|
||||||
import { useSortable } from '@vueuse/integrations/useSortable';
|
import { useSortable } from "@vueuse/integrations/useSortable";
|
||||||
import type { CalendarMonth } from '~/models/CalendarMonth';
|
import type { CalendarMonth } from "~/models/CalendarMonth";
|
||||||
|
|
||||||
import { PhList, PhPlus, PhTrash } from '@phosphor-icons/vue';
|
import { PhList, PhPlus, PhTrash } from "@phosphor-icons/vue";
|
||||||
|
|
||||||
const model = defineModel<CalendarMonth[]>({ required: true })
|
const model = defineModel<CalendarMonth[]>({ required: true })
|
||||||
|
|
||||||
@@ -14,7 +14,7 @@ const model = defineModel<CalendarMonth[]>({ required: true })
|
|||||||
const monthName: Ref<string | undefined> = ref<string>()
|
const monthName: Ref<string | undefined> = ref<string>()
|
||||||
const monthNameRef = ref<HTMLInputElement>()
|
const monthNameRef = ref<HTMLInputElement>()
|
||||||
const { focused: monthNameFocused } = useFocus(monthNameRef)
|
const { focused: monthNameFocused } = useFocus(monthNameRef)
|
||||||
const validMonthNameDatatypes = ['string']
|
const validMonthNameDatatypes = ["string"]
|
||||||
const monthNameIsTaken = computed(() => model.value.find(m => m.name === monthName.value))
|
const monthNameIsTaken = computed(() => model.value.find(m => m.name === monthName.value))
|
||||||
const validMonthName = computed(() => validMonthNameDatatypes.includes(typeof monthName.value) && !monthNameIsTaken.value)
|
const validMonthName = computed(() => validMonthNameDatatypes.includes(typeof monthName.value) && !monthNameIsTaken.value)
|
||||||
|
|
||||||
@@ -23,7 +23,7 @@ const validMonthName = computed(() => validMonthNameDatatypes.includes(typeof mo
|
|||||||
*/
|
*/
|
||||||
const monthDays: Ref<number | undefined> = ref<number>()
|
const monthDays: Ref<number | undefined> = ref<number>()
|
||||||
const monthDaysRef = ref<HTMLInputElement>()
|
const monthDaysRef = ref<HTMLInputElement>()
|
||||||
const validMonthDaysDatatypes = ['number']
|
const validMonthDaysDatatypes = ["number"]
|
||||||
const validMonthDays = computed(() => validMonthDaysDatatypes.includes(typeof monthDays.value) && monthDays.value && monthDays.value >= 12)
|
const validMonthDays = computed(() => validMonthDaysDatatypes.includes(typeof monthDays.value) && monthDays.value && monthDays.value >= 12)
|
||||||
|
|
||||||
const validNewMonth = computed(() => validMonthDays.value && validMonthName.value)
|
const validNewMonth = computed(() => validMonthDays.value && validMonthName.value)
|
||||||
@@ -44,7 +44,7 @@ function addMonthToModel(): void {
|
|||||||
model.value.push(monthToInsert)
|
model.value.push(monthToInsert)
|
||||||
|
|
||||||
// Reset form state
|
// Reset form state
|
||||||
monthName.value = ''
|
monthName.value = ""
|
||||||
monthNameFocused.value = true
|
monthNameFocused.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { RPGDate } from '~/models/Date';
|
import type { RPGDate } from "~/models/Date";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
PhXCircle
|
PhXCircle
|
||||||
} from '@phosphor-icons/vue'
|
} from "@phosphor-icons/vue"
|
||||||
|
|
||||||
const model = defineModel<RPGDate | null>()
|
const model = defineModel<RPGDate | null>()
|
||||||
|
|
||||||
@@ -27,7 +27,7 @@ const inputPlaceholder = computed<string>(() => {
|
|||||||
return props.placeholder
|
return props.placeholder
|
||||||
}
|
}
|
||||||
|
|
||||||
return ''
|
return ""
|
||||||
})
|
})
|
||||||
|
|
||||||
const initialDateValue = props.initialDate ? { ...props.initialDate } : null
|
const initialDateValue = props.initialDate ? { ...props.initialDate } : null
|
||||||
@@ -37,7 +37,7 @@ const monthTitle = computed<string>(() => {
|
|||||||
return getMonthName(model.value.month)
|
return getMonthName(model.value.month)
|
||||||
}
|
}
|
||||||
|
|
||||||
return ''
|
return ""
|
||||||
})
|
})
|
||||||
|
|
||||||
const hasValue = computed<boolean>(() => !!model.value)
|
const hasValue = computed<boolean>(() => !!model.value)
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { CalendarMonth } from '~/models/CalendarMonth';
|
import type { CalendarMonth } from "~/models/CalendarMonth";
|
||||||
import type { RPGDate } from '~/models/Date';
|
import type { RPGDate } from "~/models/Date";
|
||||||
|
|
||||||
import { PhCalendarBlank } from '@phosphor-icons/vue';
|
import { PhCalendarBlank } from "@phosphor-icons/vue";
|
||||||
|
|
||||||
const model = defineModel<RPGDate>({ required: true })
|
const model = defineModel<RPGDate>({ required: true })
|
||||||
|
|
||||||
|
|||||||
@@ -2,46 +2,46 @@
|
|||||||
import {
|
import {
|
||||||
isCharacter,
|
isCharacter,
|
||||||
type Character,
|
type Character,
|
||||||
} from '@/models/Characters'
|
} from "@/models/Characters"
|
||||||
import type { RPGDateOrder } from '@/models/Date'
|
import type { RPGDateOrder } from "@/models/Date"
|
||||||
import {
|
import {
|
||||||
isCalendarEvent,
|
isCalendarEvent,
|
||||||
type CalendarEvent,
|
type CalendarEvent,
|
||||||
} from '~/models/CalendarEvent'
|
} from "~/models/CalendarEvent"
|
||||||
import { capitalize } from '@/utils/Strings'
|
import { capitalize } from "@/utils/Strings"
|
||||||
import { useMagicKeys, useScroll, useStorage, whenever } from '@vueuse/core'
|
import { useMagicKeys, useScroll, useStorage, whenever } from "@vueuse/core"
|
||||||
import { computed, ref, watch } from 'vue'
|
import { computed, ref, watch } from "vue"
|
||||||
import { searchUnifier, type SearchMode } from '../SearchMode'
|
import { searchUnifier, type SearchMode } from "../SearchMode"
|
||||||
|
|
||||||
import { PhClockClockwise, PhClockCounterClockwise, PhMagnifyingGlass } from '@phosphor-icons/vue'
|
import { PhClockClockwise, PhClockCounterClockwise, PhMagnifyingGlass } from "@phosphor-icons/vue"
|
||||||
import {
|
import {
|
||||||
ComboboxAnchor,
|
ComboboxAnchor,
|
||||||
ComboboxInput,
|
ComboboxInput,
|
||||||
ComboboxPortal,
|
ComboboxPortal,
|
||||||
ComboboxRoot,
|
ComboboxRoot,
|
||||||
VisuallyHidden
|
VisuallyHidden
|
||||||
} from 'radix-vue'
|
} from "radix-vue"
|
||||||
|
|
||||||
import SearchList from './lists/SearchList.vue'
|
import SearchList from "./lists/SearchList.vue"
|
||||||
import type { Category } from '~/models/Category'
|
import type { Category } from "~/models/Category"
|
||||||
|
|
||||||
const { isAdvancedSearchOpen, allEvents } = storeToRefs(useCalendar())
|
const { isAdvancedSearchOpen, allEvents } = storeToRefs(useCalendar())
|
||||||
const { characters } = storeToRefs(useCharacters())
|
const { characters } = storeToRefs(useCharacters())
|
||||||
|
|
||||||
const searchQuery = ref<string>('')
|
const searchQuery = ref<string>("")
|
||||||
// const searchEnough = computed<boolean>(() => searchQuery.value.length >= 2)
|
// const searchEnough = computed<boolean>(() => searchQuery.value.length >= 2)
|
||||||
|
|
||||||
const selectedEntity = useStorage('se', 'events' as SearchMode)
|
const selectedEntity = useStorage("se", "events" as SearchMode)
|
||||||
|
|
||||||
// Order
|
// Order
|
||||||
const selectedOrder = ref<RPGDateOrder>('asc')
|
const selectedOrder = ref<RPGDateOrder>("asc")
|
||||||
function setOrderAsc() {
|
function setOrderAsc() {
|
||||||
selectedOrder.value = 'asc'
|
selectedOrder.value = "asc"
|
||||||
resetPage()
|
resetPage()
|
||||||
}
|
}
|
||||||
|
|
||||||
function setOrderDesc() {
|
function setOrderDesc() {
|
||||||
selectedOrder.value = 'desc'
|
selectedOrder.value = "desc"
|
||||||
resetPage()
|
resetPage()
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -65,9 +65,9 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
|
|||||||
|
|
||||||
// Assign data to loop over and filter
|
// Assign data to loop over and filter
|
||||||
// They are assigned this way for readability
|
// They are assigned this way for readability
|
||||||
if (selectedEntity.value === 'events') {
|
if (selectedEntity.value === "events") {
|
||||||
dataToFilter = allEvents.value
|
dataToFilter = allEvents.value
|
||||||
} else if (selectedEntity.value === 'characters') {
|
} else if (selectedEntity.value === "characters") {
|
||||||
dataToFilter = characters.value
|
dataToFilter = characters.value
|
||||||
} else {
|
} else {
|
||||||
dataToFilter = [...allEvents.value, ...characters.value]
|
dataToFilter = [...allEvents.value, ...characters.value]
|
||||||
@@ -80,15 +80,15 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
|
|||||||
// Filter calendar events
|
// Filter calendar events
|
||||||
if (isCalendarEvent(item)) {
|
if (isCalendarEvent(item)) {
|
||||||
const queryString = new String(searchQuery.value)
|
const queryString = new String(searchQuery.value)
|
||||||
.replace(searchUnifier, '')
|
.replace(searchUnifier, "")
|
||||||
.toLocaleLowerCase()
|
.toLocaleLowerCase()
|
||||||
|
|
||||||
const hitTitle = item.title
|
const hitTitle = item.title
|
||||||
.replace(searchUnifier, '')
|
.replace(searchUnifier, "")
|
||||||
.toLocaleLowerCase()
|
.toLocaleLowerCase()
|
||||||
.includes(queryString)
|
.includes(queryString)
|
||||||
const hitDesc = item.description
|
const hitDesc = item.description
|
||||||
?.replace(searchUnifier, '')
|
?.replace(searchUnifier, "")
|
||||||
.toLocaleLowerCase()
|
.toLocaleLowerCase()
|
||||||
.includes(queryString)
|
.includes(queryString)
|
||||||
|
|
||||||
@@ -118,11 +118,11 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
|
|||||||
// Filter characters
|
// Filter characters
|
||||||
if (isCharacter(item)) {
|
if (isCharacter(item)) {
|
||||||
const queryString = new String(searchQuery.value)
|
const queryString = new String(searchQuery.value)
|
||||||
.replace(searchUnifier, '')
|
.replace(searchUnifier, "")
|
||||||
.toLocaleLowerCase()
|
.toLocaleLowerCase()
|
||||||
|
|
||||||
const hitTitle = item.name
|
const hitTitle = item.name
|
||||||
.replace(searchUnifier, '')
|
.replace(searchUnifier, "")
|
||||||
.toLocaleLowerCase()
|
.toLocaleLowerCase()
|
||||||
.includes(queryString)
|
.includes(queryString)
|
||||||
|
|
||||||
@@ -157,7 +157,7 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
|
|||||||
* Removes the search query, resets the pagination and removes all selected categories
|
* Removes the search query, resets the pagination and removes all selected categories
|
||||||
*/
|
*/
|
||||||
function resetSearch() {
|
function resetSearch() {
|
||||||
searchQuery.value = ''
|
searchQuery.value = ""
|
||||||
resetPage()
|
resetPage()
|
||||||
selectedCategories.value = []
|
selectedCategories.value = []
|
||||||
}
|
}
|
||||||
@@ -205,7 +205,7 @@ const currentCategories = computed(() => {
|
|||||||
|
|
||||||
const selectedCategories = ref<(Category)[]>([])
|
const selectedCategories = ref<(Category)[]>([])
|
||||||
const categoryFilterOpened = ref<boolean>(false)
|
const categoryFilterOpened = ref<boolean>(false)
|
||||||
const searchCategory = ref<string>('')
|
const searchCategory = ref<string>("")
|
||||||
|
|
||||||
const filteredCategories = computed(() =>
|
const filteredCategories = computed(() =>
|
||||||
currentCategories.value.filter((i) => !selectedCategories.value.includes(i))
|
currentCategories.value.filter((i) => !selectedCategories.value.includes(i))
|
||||||
@@ -217,8 +217,8 @@ const filteredCategories = computed(() =>
|
|||||||
* @param e Radix Change Event
|
* @param e Radix Change Event
|
||||||
*/
|
*/
|
||||||
function handleCategorySelect(e: (Category)) {
|
function handleCategorySelect(e: (Category)) {
|
||||||
if (typeof e === 'string') {
|
if (typeof e === "string") {
|
||||||
searchCategory.value = ''
|
searchCategory.value = ""
|
||||||
selectedCategories.value.push(e)
|
selectedCategories.value.push(e)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,18 +1,18 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { Character } from '@/models/Characters'
|
import type { Character } from "@/models/Characters"
|
||||||
import type { RPGDate } from '@/models/Date'
|
import type { RPGDate } from "@/models/Date"
|
||||||
import { useCalendar } from '@/stores/CalendarStore'
|
import { useCalendar } from "@/stores/CalendarStore"
|
||||||
|
|
||||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from "@/components/ui/button"
|
||||||
import { PhArrowSquareOut, PhPlant, PhSkull } from '@phosphor-icons/vue'
|
import { PhArrowSquareOut, PhPlant, PhSkull } from "@phosphor-icons/vue"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
character: Character
|
character: Character
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
defineEmits<{
|
defineEmits<{
|
||||||
(e: 'query:date-jump', payload: RPGDate): void
|
(e: "query:date-jump", payload: RPGDate): void
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { getFormattedDateTitle } = useCalendar()
|
const { getFormattedDateTitle } = useCalendar()
|
||||||
|
|||||||
@@ -1,23 +1,23 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
import type { RPGDate } from '@/models/Date'
|
import type { RPGDate } from "@/models/Date"
|
||||||
import type { CalendarEvent } from '@/models/CalendarEvent'
|
import type { CalendarEvent } from "@/models/CalendarEvent"
|
||||||
|
|
||||||
import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea, PhEye } from '@phosphor-icons/vue'
|
import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea, PhEye } from "@phosphor-icons/vue"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
event: CalendarEvent
|
event: CalendarEvent
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
defineEmits<{
|
defineEmits<{
|
||||||
(e: 'query:date-jump', payload: RPGDate): void
|
(e: "query:date-jump", payload: RPGDate): void
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { getRelativeString, defaultDate, getFormattedDateTitle } = useCalendar()
|
const { getRelativeString, defaultDate, getFormattedDateTitle } = useCalendar()
|
||||||
|
|
||||||
const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
|
const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
|
||||||
const dateDuration: string | null = props.event.endDate
|
const dateDuration: string | null = props.event.endDate
|
||||||
? getRelativeString(props.event.startDate, props.event.endDate, 'compact')
|
? getRelativeString(props.event.startDate, props.event.endDate, "compact")
|
||||||
: null
|
: null
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { isCharacter, type Character } from '@/models/Characters'
|
import { isCharacter, type Character } from "@/models/Characters"
|
||||||
import type { RPGDate, RPGDateOrder } from '@/models/Date'
|
import type { RPGDate, RPGDateOrder } from "@/models/Date"
|
||||||
import { useCalendar } from '@/stores/CalendarStore'
|
import { useCalendar } from "@/stores/CalendarStore"
|
||||||
import { computed } from 'vue'
|
import { computed } from "vue"
|
||||||
import { isCalendarEvent, type CalendarEvent } from '~/models/CalendarEvent'
|
import { isCalendarEvent, type CalendarEvent } from "~/models/CalendarEvent"
|
||||||
import type { SearchMode } from '../../SearchMode'
|
import type { SearchMode } from "../../SearchMode"
|
||||||
|
|
||||||
import CharacterCallout from './CharacterCallout.vue'
|
import CharacterCallout from "./CharacterCallout.vue"
|
||||||
import EventCallout from './EventCallout.vue'
|
import EventCallout from "./EventCallout.vue"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
results: (Character | CalendarEvent)[]
|
results: (Character | CalendarEvent)[]
|
||||||
@@ -18,7 +18,7 @@ const props = defineProps<{
|
|||||||
limit?: number
|
limit?: number
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emit = defineEmits(['jumpedToDate'])
|
const emit = defineEmits(["jumpedToDate"])
|
||||||
|
|
||||||
const { jumpToDate, compareDates } = useCalendar()
|
const { jumpToDate, compareDates } = useCalendar()
|
||||||
|
|
||||||
@@ -26,7 +26,7 @@ function handleJumpToDate(date?: RPGDate) {
|
|||||||
if (!date) return
|
if (!date) return
|
||||||
|
|
||||||
jumpToDate(date)
|
jumpToDate(date)
|
||||||
emit('jumpedToDate')
|
emit("jumpedToDate")
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initial sorting of the results
|
// Initial sorting of the results
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { RPGDate } from '@/models/Date'
|
import type { RPGDate } from "@/models/Date"
|
||||||
import type { CalendarEvent } from '@/models/CalendarEvent'
|
import type { CalendarEvent } from "@/models/CalendarEvent"
|
||||||
import { useElementBounding } from '@vueuse/core'
|
import { useElementBounding } from "@vueuse/core"
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from "pinia"
|
||||||
import { computed, ref, type ComputedRef } from 'vue'
|
import { computed, ref, type ComputedRef } from "vue"
|
||||||
|
|
||||||
import CalendarEventButton from '../../CalendarEvent.vue'
|
import CalendarEventButton from "../../CalendarEvent.vue"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
date: RPGDate
|
date: RPGDate
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useCalendar } from '@/stores/CalendarStore'
|
import { useCalendar } from "@/stores/CalendarStore"
|
||||||
import { useThrottleFn } from '@vueuse/core'
|
import { useThrottleFn } from "@vueuse/core"
|
||||||
|
|
||||||
const { currentDate, decrementViewMonth, incrementViewMonth } = useCalendar()
|
const { currentDate, decrementViewMonth, incrementViewMonth } = useCalendar()
|
||||||
const { currentMonthData } = storeToRefs(useCalendar())
|
const { currentMonthData } = storeToRefs(useCalendar())
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { RPGDate } from '@/models/Date'
|
import type { RPGDate } from "@/models/Date"
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from "pinia"
|
||||||
import { computed, type ComputedRef } from 'vue'
|
import { computed, type ComputedRef } from "vue"
|
||||||
|
|
||||||
const { currentDate, defaultDate, selectDate, areDatesIdentical } = useCalendar()
|
const { currentDate, defaultDate, selectDate, areDatesIdentical } = useCalendar()
|
||||||
const { selectedDate, currentEvents } = storeToRefs(useCalendar())
|
const { selectedDate, currentEvents } = storeToRefs(useCalendar())
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useCalendar } from '@/stores/CalendarStore'
|
import { useCalendar } from "@/stores/CalendarStore"
|
||||||
import { useThrottleFn } from '@vueuse/core'
|
import { useThrottleFn } from "@vueuse/core"
|
||||||
|
|
||||||
const { decrementViewYear, incrementViewYear } = useCalendar()
|
const { decrementViewYear, incrementViewYear } = useCalendar()
|
||||||
const { sortedMonths: months } = storeToRefs(useCalendar())
|
const { sortedMonths: months } = storeToRefs(useCalendar())
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { CalendarMonth } from '~/models/CalendarMonth';
|
import type { CalendarMonth } from "~/models/CalendarMonth";
|
||||||
|
|
||||||
defineProps<{
|
defineProps<{
|
||||||
month: CalendarMonth
|
month: CalendarMonth
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { cn } from '~/lib/utils';
|
import { cn } from "~/lib/utils";
|
||||||
|
|
||||||
interface SpacingProps {
|
interface SpacingProps {
|
||||||
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xlg' | '2xl' | '3xl'
|
size?: "xs" | "sm" | "md" | "lg" | "xlg" | "2xl" | "3xl"
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = defineProps<SpacingProps>()
|
const props = defineProps<SpacingProps>()
|
||||||
@@ -10,11 +10,11 @@ const props = defineProps<SpacingProps>()
|
|||||||
let spacingClass: string
|
let spacingClass: string
|
||||||
|
|
||||||
switch (props.size) {
|
switch (props.size) {
|
||||||
case 'lg':
|
case "lg":
|
||||||
spacingClass = "space-y-4"
|
spacingClass = "space-y-4"
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'md':
|
case "md":
|
||||||
default:
|
default:
|
||||||
spacingClass = "space-y-2"
|
spacingClass = "space-y-2"
|
||||||
break;
|
break;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { PhHouse, PhList } from '@phosphor-icons/vue'
|
import { PhHouse, PhList } from "@phosphor-icons/vue"
|
||||||
import type { SidebarMenuActionType } from './SidebarProps';
|
import type { SidebarMenuActionType } from "./SidebarProps";
|
||||||
|
|
||||||
const { revealAdvancedSearch } = useCalendar()
|
const { revealAdvancedSearch } = useCalendar()
|
||||||
const { currentMenu } = storeToRefs(useUiStore())
|
const { currentMenu } = storeToRefs(useUiStore())
|
||||||
@@ -8,7 +8,7 @@ const { currentMenu } = storeToRefs(useUiStore())
|
|||||||
const user = useSupabaseUser()
|
const user = useSupabaseUser()
|
||||||
|
|
||||||
function handleMenuItemAction(actionType: SidebarMenuActionType) {
|
function handleMenuItemAction(actionType: SidebarMenuActionType) {
|
||||||
if (actionType === 'event-search') {
|
if (actionType === "event-search") {
|
||||||
revealAdvancedSearch()
|
revealAdvancedSearch()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed } from 'vue'
|
import { computed } from "vue"
|
||||||
|
|
||||||
import { PhUserCircle } from '@phosphor-icons/vue'
|
import { PhUserCircle } from "@phosphor-icons/vue"
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
@@ -19,11 +19,11 @@ watch(user, closeMenu)
|
|||||||
async function handleGoogleLogin() {
|
async function handleGoogleLogin() {
|
||||||
try {
|
try {
|
||||||
auth.signInWithOAuth({
|
auth.signInWithOAuth({
|
||||||
provider: 'google',
|
provider: "google",
|
||||||
options: {
|
options: {
|
||||||
queryParams: {
|
queryParams: {
|
||||||
access_type: 'offline',
|
access_type: "offline",
|
||||||
prompt: 'consent'
|
prompt: "consent"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -43,7 +43,7 @@ async function handleLogout() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function gotoProfilePage() {
|
function gotoProfilePage() {
|
||||||
router.push({ path: '/i' })
|
router.push({ path: "/i" })
|
||||||
|
|
||||||
closeMenu()
|
closeMenu()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
|
import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from "radix-vue"
|
||||||
|
|
||||||
const props = defineProps<AlertDialogProps>()
|
const props = defineProps<AlertDialogProps>()
|
||||||
const emits = defineEmits<AlertDialogEmits>()
|
const emits = defineEmits<AlertDialogEmits>()
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
|
import { AlertDialogAction, type AlertDialogActionProps } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
import { buttonVariants } from '@/components/ui/button/index'
|
import { buttonVariants } from "@/components/ui/button/index"
|
||||||
|
|
||||||
const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
const { class: _, ...delegated } = props
|
const { class: _, ...delegated } = props
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
|
import { AlertDialogCancel, type AlertDialogCancelProps } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
import { buttonVariants } from '@/components/ui/button/index'
|
import { buttonVariants } from "@/components/ui/button/index"
|
||||||
|
|
||||||
const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
const { class: _, ...delegated } = props
|
const { class: _, ...delegated } = props
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import {
|
import {
|
||||||
AlertDialogContent,
|
AlertDialogContent,
|
||||||
type AlertDialogContentEmits,
|
type AlertDialogContentEmits,
|
||||||
@@ -7,10 +7,10 @@ import {
|
|||||||
AlertDialogOverlay,
|
AlertDialogOverlay,
|
||||||
AlertDialogPortal,
|
AlertDialogPortal,
|
||||||
useForwardPropsEmits,
|
useForwardPropsEmits,
|
||||||
} from 'radix-vue'
|
} from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
|
||||||
const emits = defineEmits<AlertDialogContentEmits>()
|
const emits = defineEmits<AlertDialogContentEmits>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import {
|
import {
|
||||||
AlertDialogDescription,
|
AlertDialogDescription,
|
||||||
type AlertDialogDescriptionProps,
|
type AlertDialogDescriptionProps,
|
||||||
} from 'radix-vue'
|
} from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
const { class: _, ...delegated } = props
|
const { class: _, ...delegated } = props
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
|
import { AlertDialogTitle, type AlertDialogTitleProps } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
const { class: _, ...delegated } = props
|
const { class: _, ...delegated } = props
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
|
import { AlertDialogTrigger, type AlertDialogTriggerProps } from "radix-vue"
|
||||||
|
|
||||||
const props = defineProps<AlertDialogTriggerProps>()
|
const props = defineProps<AlertDialogTriggerProps>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
export { default as AlertDialog } from './AlertDialog.vue'
|
export { default as AlertDialog } from "./AlertDialog.vue"
|
||||||
export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
|
export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"
|
||||||
export { default as AlertDialogContent } from './AlertDialogContent.vue'
|
export { default as AlertDialogContent } from "./AlertDialogContent.vue"
|
||||||
export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
|
export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
|
||||||
export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
|
export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
|
||||||
export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
|
export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
|
||||||
export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
|
export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
|
||||||
export { default as AlertDialogAction } from './AlertDialogAction.vue'
|
export { default as AlertDialogAction } from "./AlertDialogAction.vue"
|
||||||
export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
|
export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
|
||||||
|
|||||||
@@ -1,16 +1,16 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { AvatarRoot } from 'radix-vue'
|
import { AvatarRoot } from "radix-vue"
|
||||||
import { type AvatarVariants, avatarVariant } from '.'
|
import { type AvatarVariants, avatarVariant } from "."
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
size?: AvatarVariants['size']
|
size?: AvatarVariants["size"]
|
||||||
shape?: AvatarVariants['shape']
|
shape?: AvatarVariants["shape"]
|
||||||
}>(), {
|
}>(), {
|
||||||
size: 'sm',
|
size: "sm",
|
||||||
shape: 'circle',
|
shape: "circle",
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
|
import { AvatarFallback, type AvatarFallbackProps } from "radix-vue"
|
||||||
|
|
||||||
const props = defineProps<AvatarFallbackProps>()
|
const props = defineProps<AvatarFallbackProps>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { AvatarImage, type AvatarImageProps } from 'radix-vue'
|
import { AvatarImage, type AvatarImageProps } from "radix-vue"
|
||||||
|
|
||||||
const props = defineProps<AvatarImageProps>()
|
const props = defineProps<AvatarImageProps>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,21 +1,21 @@
|
|||||||
import { type VariantProps, cva } from 'class-variance-authority'
|
import { type VariantProps, cva } from "class-variance-authority"
|
||||||
|
|
||||||
export { default as Avatar } from './Avatar.vue'
|
export { default as Avatar } from "./Avatar.vue"
|
||||||
export { default as AvatarImage } from './AvatarImage.vue'
|
export { default as AvatarImage } from "./AvatarImage.vue"
|
||||||
export { default as AvatarFallback } from './AvatarFallback.vue'
|
export { default as AvatarFallback } from "./AvatarFallback.vue"
|
||||||
|
|
||||||
export const avatarVariant = cva(
|
export const avatarVariant = cva(
|
||||||
'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
|
"inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
size: {
|
size: {
|
||||||
sm: 'h-10 w-10 text-xs',
|
sm: "h-10 w-10 text-xs",
|
||||||
base: 'h-16 w-16 text-2xl',
|
base: "h-16 w-16 text-2xl",
|
||||||
lg: 'h-32 w-32 text-5xl',
|
lg: "h-32 w-32 text-5xl",
|
||||||
},
|
},
|
||||||
shape: {
|
shape: {
|
||||||
circle: 'rounded-full',
|
circle: "rounded-full",
|
||||||
square: 'rounded-md',
|
square: "rounded-md",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { type BadgeVariants, badgeVariants } from '.'
|
import { type BadgeVariants, badgeVariants } from "."
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
variant?: BadgeVariants['variant']
|
variant?: BadgeVariants["variant"]
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,23 +1,23 @@
|
|||||||
import { type VariantProps, cva } from 'class-variance-authority'
|
import { type VariantProps, cva } from "class-variance-authority"
|
||||||
|
|
||||||
export { default as Badge } from './Badge.vue'
|
export { default as Badge } from "./Badge.vue"
|
||||||
|
|
||||||
export const badgeVariants = cva(
|
export const badgeVariants = cva(
|
||||||
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default:
|
default:
|
||||||
'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
|
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
||||||
secondary:
|
secondary:
|
||||||
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
destructive:
|
destructive:
|
||||||
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
|
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
||||||
outline: 'text-foreground',
|
outline: "text-foreground",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
variant: 'default',
|
variant: "default",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,18 +1,18 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { Primitive, type PrimitiveProps } from 'radix-vue'
|
import { Primitive, type PrimitiveProps } from "radix-vue"
|
||||||
import { type ButtonVariants, buttonVariants } from '.'
|
import { type ButtonVariants, buttonVariants } from "."
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
interface Props extends PrimitiveProps {
|
interface Props extends PrimitiveProps {
|
||||||
variant?: ButtonVariants['variant']
|
variant?: ButtonVariants["variant"]
|
||||||
size?: ButtonVariants['size']
|
size?: ButtonVariants["size"]
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
searchSlash?: boolean
|
searchSlash?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
as: 'button'
|
as: "button"
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,30 +1,30 @@
|
|||||||
import { type VariantProps, cva } from 'class-variance-authority'
|
import { type VariantProps, cva } from "class-variance-authority"
|
||||||
|
|
||||||
export { default as Button } from './Button.vue'
|
export { default as Button } from "./Button.vue"
|
||||||
|
|
||||||
export const buttonVariants = cva(
|
export const buttonVariants = cva(
|
||||||
'inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
|
"inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||||
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||||
outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
|
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||||
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||||
link: 'text-primary underline-offset-4 hover:underline'
|
link: "text-primary underline-offset-4 hover:underline"
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
default: 'h-10 px-4 py-2',
|
default: "h-10 px-4 py-2",
|
||||||
xs: 'h-7 rounded-sm px-2 text-xs',
|
xs: "h-7 rounded-sm px-2 text-xs",
|
||||||
sm: 'h-9 rounded-md px-3 text-sm',
|
sm: "h-9 rounded-md px-3 text-sm",
|
||||||
lg: 'h-11 rounded-md px-8',
|
lg: "h-11 rounded-md px-8",
|
||||||
icon: 'h-10 w-10'
|
icon: "h-10 w-10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
variant: 'default',
|
variant: "default",
|
||||||
size: 'default'
|
size: "default"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
link?: string
|
link?: string
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
export { default as Card } from './Card.vue'
|
export { default as Card } from "./Card.vue"
|
||||||
export { default as CardHeader } from './CardHeader.vue'
|
export { default as CardHeader } from "./CardHeader.vue"
|
||||||
export { default as CardTitle } from './CardTitle.vue'
|
export { default as CardTitle } from "./CardTitle.vue"
|
||||||
export { default as CardDescription } from './CardDescription.vue'
|
export { default as CardDescription } from "./CardDescription.vue"
|
||||||
export { default as CardContent } from './CardContent.vue'
|
export { default as CardContent } from "./CardContent.vue"
|
||||||
export { default as CardFooter } from './CardFooter.vue'
|
export { default as CardFooter } from "./CardFooter.vue"
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
|
import type { CheckboxRootEmits, CheckboxRootProps } from "radix-vue"
|
||||||
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
|
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "radix-vue"
|
||||||
import { Check } from 'lucide-vue-next'
|
import { Check } from "lucide-vue-next"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
|
||||||
const emits = defineEmits<CheckboxRootEmits>()
|
const emits = defineEmits<CheckboxRootEmits>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
export { default as Checkbox } from './Checkbox.vue'
|
export { default as Checkbox } from "./Checkbox.vue"
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
|
import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue"
|
||||||
import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
|
import { ComboboxRoot, useForwardPropsEmits } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
|
const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes["class"] }>(), {
|
||||||
open: true,
|
open: true,
|
||||||
modelValue: ''
|
modelValue: ""
|
||||||
})
|
})
|
||||||
|
|
||||||
const emits = defineEmits<ComboboxRootEmits>()
|
const emits = defineEmits<ComboboxRootEmits>()
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useForwardPropsEmits } from 'radix-vue'
|
import { useForwardPropsEmits } from "radix-vue"
|
||||||
import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
|
import type { DialogRootEmits, DialogRootProps } from "radix-vue"
|
||||||
import Command from './Command.vue'
|
import Command from "./Command.vue"
|
||||||
import { Dialog, DialogContent } from '@/components/ui/dialog'
|
import { Dialog, DialogContent } from "@/components/ui/dialog"
|
||||||
|
|
||||||
const props = defineProps<DialogRootProps>()
|
const props = defineProps<DialogRootProps>()
|
||||||
const emits = defineEmits<DialogRootEmits>()
|
const emits = defineEmits<DialogRootEmits>()
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import type { ComboboxEmptyProps } from 'radix-vue'
|
import type { ComboboxEmptyProps } from "radix-vue"
|
||||||
import { ComboboxEmpty } from 'radix-vue'
|
import { ComboboxEmpty } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes["class"] }>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
const { class: _, ...delegated } = props
|
const { class: _, ...delegated } = props
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import type { ComboboxGroupProps } from 'radix-vue'
|
import type { ComboboxGroupProps } from "radix-vue"
|
||||||
import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
|
import { ComboboxGroup, ComboboxLabel } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<
|
const props = defineProps<
|
||||||
ComboboxGroupProps & {
|
ComboboxGroupProps & {
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
heading?: string
|
heading?: string
|
||||||
}
|
}
|
||||||
>()
|
>()
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import { Search } from 'lucide-vue-next'
|
import { Search } from "lucide-vue-next"
|
||||||
import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
|
import { ComboboxInput, type ComboboxInputProps, useForwardProps } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
inheritAttrs: false
|
inheritAttrs: false
|
||||||
@@ -10,7 +10,7 @@ defineOptions({
|
|||||||
|
|
||||||
const props = defineProps<
|
const props = defineProps<
|
||||||
ComboboxInputProps & {
|
ComboboxInputProps & {
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
}
|
}
|
||||||
>()
|
>()
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
|
import type { ComboboxItemEmits, ComboboxItemProps } from "radix-vue"
|
||||||
import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
|
import { ComboboxItem, useForwardPropsEmits } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes["class"] }>()
|
||||||
const emits = defineEmits<ComboboxItemEmits>()
|
const emits = defineEmits<ComboboxItemEmits>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
|
import type { ComboboxContentEmits, ComboboxContentProps } from "radix-vue"
|
||||||
import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
|
import { ComboboxContent, useForwardPropsEmits } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(),
|
defineProps<ComboboxContentProps & { class?: HTMLAttributes["class"] }>(),
|
||||||
{
|
{
|
||||||
dismissable: false
|
dismissable: false
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import type { ComboboxSeparatorProps } from 'radix-vue'
|
import type { ComboboxSeparatorProps } from "radix-vue"
|
||||||
import { ComboboxSeparator } from 'radix-vue'
|
import { ComboboxSeparator } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes["class"] }>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
const { class: _, ...delegated } = props
|
const { class: _, ...delegated } = props
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
export { ComboboxPortal } from 'radix-vue'
|
export { ComboboxPortal } from "radix-vue"
|
||||||
|
|
||||||
export { default as Command } from './Command.vue'
|
export { default as Command } from "./Command.vue"
|
||||||
export { default as CommandDialog } from './CommandDialog.vue'
|
export { default as CommandDialog } from "./CommandDialog.vue"
|
||||||
export { default as CommandEmpty } from './CommandEmpty.vue'
|
export { default as CommandEmpty } from "./CommandEmpty.vue"
|
||||||
export { default as CommandGroup } from './CommandGroup.vue'
|
export { default as CommandGroup } from "./CommandGroup.vue"
|
||||||
export { default as CommandInput } from './CommandInput.vue'
|
export { default as CommandInput } from "./CommandInput.vue"
|
||||||
export { default as CommandItem } from './CommandItem.vue'
|
export { default as CommandItem } from "./CommandItem.vue"
|
||||||
export { default as CommandList } from './CommandList.vue'
|
export { default as CommandList } from "./CommandList.vue"
|
||||||
export { default as CommandSeparator } from './CommandSeparator.vue'
|
export { default as CommandSeparator } from "./CommandSeparator.vue"
|
||||||
export { default as CommandShortcut } from './CommandShortcut.vue'
|
export { default as CommandShortcut } from "./CommandShortcut.vue"
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import {
|
|||||||
type DialogRootEmits,
|
type DialogRootEmits,
|
||||||
type DialogRootProps,
|
type DialogRootProps,
|
||||||
useForwardPropsEmits
|
useForwardPropsEmits
|
||||||
} from 'radix-vue'
|
} from "radix-vue"
|
||||||
|
|
||||||
const props = defineProps<DialogRootProps>()
|
const props = defineProps<DialogRootProps>()
|
||||||
const emits = defineEmits<DialogRootEmits>()
|
const emits = defineEmits<DialogRootEmits>()
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { DialogClose, type DialogCloseProps } from 'radix-vue'
|
import { DialogClose, type DialogCloseProps } from "radix-vue"
|
||||||
|
|
||||||
const props = defineProps<DialogCloseProps>()
|
const props = defineProps<DialogCloseProps>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import {
|
import {
|
||||||
DialogClose,
|
DialogClose,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
@@ -8,11 +8,11 @@ import {
|
|||||||
DialogOverlay,
|
DialogOverlay,
|
||||||
DialogPortal,
|
DialogPortal,
|
||||||
useForwardPropsEmits
|
useForwardPropsEmits
|
||||||
} from 'radix-vue'
|
} from "radix-vue"
|
||||||
import { X } from 'lucide-vue-next'
|
import { X } from "lucide-vue-next"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
|
||||||
const emits = defineEmits<DialogContentEmits>()
|
const emits = defineEmits<DialogContentEmits>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
|
import { DialogDescription, type DialogDescriptionProps, useForwardProps } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
const { class: _, ...delegated } = props
|
const { class: _, ...delegated } = props
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<{ class?: HTMLAttributes['class'] }>()
|
const props = defineProps<{ class?: HTMLAttributes["class"] }>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import {
|
import {
|
||||||
DialogClose,
|
DialogClose,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
@@ -8,11 +8,11 @@ import {
|
|||||||
DialogOverlay,
|
DialogOverlay,
|
||||||
DialogPortal,
|
DialogPortal,
|
||||||
useForwardPropsEmits
|
useForwardPropsEmits
|
||||||
} from 'radix-vue'
|
} from "radix-vue"
|
||||||
import { X } from 'lucide-vue-next'
|
import { X } from "lucide-vue-next"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
|
||||||
const emits = defineEmits<DialogContentEmits>()
|
const emits = defineEmits<DialogContentEmits>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
|
import { DialogTitle, type DialogTitleProps, useForwardProps } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
const { class: _, ...delegated } = props
|
const { class: _, ...delegated } = props
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
|
import { DialogTrigger, type DialogTriggerProps } from "radix-vue"
|
||||||
|
|
||||||
const props = defineProps<DialogTriggerProps>()
|
const props = defineProps<DialogTriggerProps>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
export { default as Dialog } from './Dialog.vue'
|
export { default as Dialog } from "./Dialog.vue"
|
||||||
export { default as DialogClose } from './DialogClose.vue'
|
export { default as DialogClose } from "./DialogClose.vue"
|
||||||
export { default as DialogTrigger } from './DialogTrigger.vue'
|
export { default as DialogTrigger } from "./DialogTrigger.vue"
|
||||||
export { default as DialogHeader } from './DialogHeader.vue'
|
export { default as DialogHeader } from "./DialogHeader.vue"
|
||||||
export { default as DialogTitle } from './DialogTitle.vue'
|
export { default as DialogTitle } from "./DialogTitle.vue"
|
||||||
export { default as DialogDescription } from './DialogDescription.vue'
|
export { default as DialogDescription } from "./DialogDescription.vue"
|
||||||
export { default as DialogContent } from './DialogContent.vue'
|
export { default as DialogContent } from "./DialogContent.vue"
|
||||||
export { default as DialogScrollContent } from './DialogScrollContent.vue'
|
export { default as DialogScrollContent } from "./DialogScrollContent.vue"
|
||||||
export { default as DialogFooter } from './DialogFooter.vue'
|
export { default as DialogFooter } from "./DialogFooter.vue"
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import {
|
|||||||
type DropdownMenuRootEmits,
|
type DropdownMenuRootEmits,
|
||||||
type DropdownMenuRootProps,
|
type DropdownMenuRootProps,
|
||||||
useForwardPropsEmits
|
useForwardPropsEmits
|
||||||
} from 'radix-vue'
|
} from "radix-vue"
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuRootProps>()
|
const props = defineProps<DropdownMenuRootProps>()
|
||||||
const emits = defineEmits<DropdownMenuRootEmits>()
|
const emits = defineEmits<DropdownMenuRootEmits>()
|
||||||
|
|||||||
@@ -1,16 +1,16 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import {
|
import {
|
||||||
DropdownMenuCheckboxItem,
|
DropdownMenuCheckboxItem,
|
||||||
type DropdownMenuCheckboxItemEmits,
|
type DropdownMenuCheckboxItemEmits,
|
||||||
type DropdownMenuCheckboxItemProps,
|
type DropdownMenuCheckboxItemProps,
|
||||||
DropdownMenuItemIndicator,
|
DropdownMenuItemIndicator,
|
||||||
useForwardPropsEmits
|
useForwardPropsEmits
|
||||||
} from 'radix-vue'
|
} from "radix-vue"
|
||||||
import { Check } from 'lucide-vue-next'
|
import { Check } from "lucide-vue-next"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
|
||||||
const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
|
const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
|
|||||||
@@ -1,16 +1,16 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import {
|
import {
|
||||||
DropdownMenuContent,
|
DropdownMenuContent,
|
||||||
type DropdownMenuContentEmits,
|
type DropdownMenuContentEmits,
|
||||||
type DropdownMenuContentProps,
|
type DropdownMenuContentProps,
|
||||||
DropdownMenuPortal,
|
DropdownMenuPortal,
|
||||||
useForwardPropsEmits
|
useForwardPropsEmits
|
||||||
} from 'radix-vue'
|
} from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
|
defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
|
||||||
{
|
{
|
||||||
sideOffset: 4
|
sideOffset: 4
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'
|
import { DropdownMenuGroup, type DropdownMenuGroupProps } from "radix-vue"
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuGroupProps>()
|
const props = defineProps<DropdownMenuGroupProps>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
|
import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<
|
const props = defineProps<
|
||||||
DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }
|
DropdownMenuItemProps & { class?: HTMLAttributes["class"]; inset?: boolean }
|
||||||
>()
|
>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
|
import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<
|
const props = defineProps<
|
||||||
DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }
|
DropdownMenuLabelProps & { class?: HTMLAttributes["class"]; inset?: boolean }
|
||||||
>()
|
>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import {
|
|||||||
type DropdownMenuRadioGroupEmits,
|
type DropdownMenuRadioGroupEmits,
|
||||||
type DropdownMenuRadioGroupProps,
|
type DropdownMenuRadioGroupProps,
|
||||||
useForwardPropsEmits
|
useForwardPropsEmits
|
||||||
} from 'radix-vue'
|
} from "radix-vue"
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuRadioGroupProps>()
|
const props = defineProps<DropdownMenuRadioGroupProps>()
|
||||||
const emits = defineEmits<DropdownMenuRadioGroupEmits>()
|
const emits = defineEmits<DropdownMenuRadioGroupEmits>()
|
||||||
|
|||||||
@@ -1,16 +1,16 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import {
|
import {
|
||||||
DropdownMenuItemIndicator,
|
DropdownMenuItemIndicator,
|
||||||
DropdownMenuRadioItem,
|
DropdownMenuRadioItem,
|
||||||
type DropdownMenuRadioItemEmits,
|
type DropdownMenuRadioItemEmits,
|
||||||
type DropdownMenuRadioItemProps,
|
type DropdownMenuRadioItemProps,
|
||||||
useForwardPropsEmits
|
useForwardPropsEmits
|
||||||
} from 'radix-vue'
|
} from "radix-vue"
|
||||||
import { Circle } from 'lucide-vue-next'
|
import { Circle } from "lucide-vue-next"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
|
||||||
|
|
||||||
const emits = defineEmits<DropdownMenuRadioItemEmits>()
|
const emits = defineEmits<DropdownMenuRadioItemEmits>()
|
||||||
|
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from 'radix-vue'
|
import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<
|
const props = defineProps<
|
||||||
DropdownMenuSeparatorProps & {
|
DropdownMenuSeparatorProps & {
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
}
|
}
|
||||||
>()
|
>()
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import {
|
|||||||
type DropdownMenuSubEmits,
|
type DropdownMenuSubEmits,
|
||||||
type DropdownMenuSubProps,
|
type DropdownMenuSubProps,
|
||||||
useForwardPropsEmits
|
useForwardPropsEmits
|
||||||
} from 'radix-vue'
|
} from "radix-vue"
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuSubProps>()
|
const props = defineProps<DropdownMenuSubProps>()
|
||||||
const emits = defineEmits<DropdownMenuSubEmits>()
|
const emits = defineEmits<DropdownMenuSubEmits>()
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import {
|
import {
|
||||||
DropdownMenuSubContent,
|
DropdownMenuSubContent,
|
||||||
type DropdownMenuSubContentEmits,
|
type DropdownMenuSubContentEmits,
|
||||||
type DropdownMenuSubContentProps,
|
type DropdownMenuSubContentProps,
|
||||||
useForwardPropsEmits
|
useForwardPropsEmits
|
||||||
} from 'radix-vue'
|
} from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
|
||||||
const emits = defineEmits<DropdownMenuSubContentEmits>()
|
const emits = defineEmits<DropdownMenuSubContentEmits>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import {
|
import {
|
||||||
DropdownMenuSubTrigger,
|
DropdownMenuSubTrigger,
|
||||||
type DropdownMenuSubTriggerProps,
|
type DropdownMenuSubTriggerProps,
|
||||||
useForwardProps
|
useForwardProps
|
||||||
} from 'radix-vue'
|
} from "radix-vue"
|
||||||
import { ChevronRight } from 'lucide-vue-next'
|
import { ChevronRight } from "lucide-vue-next"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"] }>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
const { class: _, ...delegated } = props
|
const { class: _, ...delegated } = props
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'
|
import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from "radix-vue"
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuTriggerProps>()
|
const props = defineProps<DropdownMenuTriggerProps>()
|
||||||
|
|
||||||
|
|||||||
@@ -1,16 +1,16 @@
|
|||||||
export { DropdownMenuPortal } from 'radix-vue'
|
export { DropdownMenuPortal } from "radix-vue"
|
||||||
|
|
||||||
export { default as DropdownMenu } from './DropdownMenu.vue'
|
export { default as DropdownMenu } from "./DropdownMenu.vue"
|
||||||
export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
|
export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue"
|
||||||
export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
|
export { default as DropdownMenuContent } from "./DropdownMenuContent.vue"
|
||||||
export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
|
export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue"
|
||||||
export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
|
export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue"
|
||||||
export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
|
export { default as DropdownMenuItem } from "./DropdownMenuItem.vue"
|
||||||
export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
|
export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue"
|
||||||
export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
|
export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue"
|
||||||
export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
|
export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue"
|
||||||
export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
|
export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue"
|
||||||
export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
|
export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue"
|
||||||
export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
|
export { default as DropdownMenuSub } from "./DropdownMenuSub.vue"
|
||||||
export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
|
export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue"
|
||||||
export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
|
export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue"
|
||||||
|
|||||||
@@ -1,19 +1,19 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { HTMLAttributes } from 'vue'
|
import type { HTMLAttributes } from "vue"
|
||||||
import { useVModel } from '@vueuse/core'
|
import { useVModel } from "@vueuse/core"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
defaultValue?: string | number
|
defaultValue?: string | number
|
||||||
modelValue?: string | number
|
modelValue?: string | number
|
||||||
class?: HTMLAttributes['class']
|
class?: HTMLAttributes["class"]
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emits = defineEmits<{
|
const emits = defineEmits<{
|
||||||
(e: 'update:modelValue', payload: string | number): void
|
(e: "update:modelValue", payload: string | number): void
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const modelValue = useVModel(props, 'modelValue', emits, {
|
const modelValue = useVModel(props, "modelValue", emits, {
|
||||||
passive: true,
|
passive: true,
|
||||||
defaultValue: props.defaultValue
|
defaultValue: props.defaultValue
|
||||||
})
|
})
|
||||||
@@ -28,5 +28,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
|
|||||||
props.class
|
props.class
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
/>
|
>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
export { default as Input } from './Input.vue'
|
export { default as Input } from "./Input.vue"
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { type HTMLAttributes, computed } from 'vue'
|
import { type HTMLAttributes, computed } from "vue"
|
||||||
import { Label, type LabelProps } from 'radix-vue'
|
import { Label, type LabelProps } from "radix-vue"
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
|
const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
|
||||||
|
|
||||||
const delegatedProps = computed(() => {
|
const delegatedProps = computed(() => {
|
||||||
const { class: _, ...delegated } = props
|
const { class: _, ...delegated } = props
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
export { default as Label } from './Label.vue'
|
export { default as Label } from "./Label.vue"
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user