@brumaombra/ui-vintage 0.7.7 → 0.7.9

package/src/components/ui/command/CommandShortcut.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <span data-slot="command-shortcut" :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)">
-    <slot />
-  </span>
-</template>
+    <span data-slot="command-shortcut" :class="cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        props.class,
+    )
+        ">
+        <slot />
+    </span>
+</template>

package/src/components/ui/command/index.ts

@@ -1,25 +1,29 @@
-import type { Ref } from "vue"
-import { createContext } from "reka-ui"
+import type { Ref } from 'vue';
+import { createContext } from 'reka-ui';
 
-export { default as Command } from "./Command.vue"
-export { default as CommandDialog } from "./CommandDialog.vue"
-export { default as CommandEmpty } from "./CommandEmpty.vue"
-export { default as CommandGroup } from "./CommandGroup.vue"
-export { default as CommandInput } from "./CommandInput.vue"
-export { default as CommandItem } from "./CommandItem.vue"
-export { default as CommandList } from "./CommandList.vue"
-export { default as CommandSeparator } from "./CommandSeparator.vue"
-export { default as CommandShortcut } from "./CommandShortcut.vue"
+export { default as Command } from './Command.vue';
+export { default as CommandDialog } from './CommandDialog.vue';
+export { default as CommandEmpty } from './CommandEmpty.vue';
+export { default as CommandGroup } from './CommandGroup.vue';
+export { default as CommandInput } from './CommandInput.vue';
+export { default as CommandItem } from './CommandItem.vue';
+export { default as CommandList } from './CommandList.vue';
+export { default as CommandSeparator } from './CommandSeparator.vue';
+export { default as CommandShortcut } from './CommandShortcut.vue';
 
 export const [useCommand, provideCommandContext] = createContext<{
-  allItems: Ref<Map<string, string>>
-  allGroups: Ref<Map<string, Set<string>>>
-  filterState: {
-    search: string
-    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
-  }
-}>("Command")
+    allItems: Ref<Map<string, string>>;
+    allGroups: Ref<Map<string, Set<string>>>;
+    filterState: {
+        search: string;
+        filtered: {
+            count: number;
+            items: Map<string, number>;
+            groups: Set<string>;
+        };
+    };
+}>('Command');
 
 export const [useCommandGroup, provideCommandGroupContext] = createContext<{
-  id?: string
-}>("CommandGroup")
+    id?: string;
+}>('CommandGroup');

package/src/components/ui/date-picker/DatePicker.vue

@@ -1,63 +1,72 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { DateFormatter, getLocalTimeZone, today } from '@internationalized/date'
-import { Calendar03Icon } from '@hugeicons/core-free-icons'
-import { HugeiconsIcon } from '@hugeicons/vue'
-import type { DateValue } from 'reka-ui'
-import { computed, ref } from 'vue'
-import { cn } from '../../../lib/utils'
-import { Button } from '../button'
-import { Calendar } from '../calendar'
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from '../popover'
+import type { HTMLAttributes } from 'vue';
+import { DateFormatter, getLocalTimeZone, today, } from '@internationalized/date';
+import { Calendar03Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import type { DateValue } from 'reka-ui';
+import { computed, ref } from 'vue';
+import { cn } from '../../../lib/utils';
+import { Button } from '../button';
+import { Calendar } from '../calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 
+// Props
 const props = withDefaults(defineProps<{
-    defaultValue?: DateValue
-    modelValue?: DateValue
-    minValue?: DateValue
-    maxValue?: DateValue
-    placeholder?: string
-    disabled?: boolean
-    class?: HTMLAttributes['class']
-    contentClass?: HTMLAttributes['class']
+    defaultValue?: DateValue;
+    modelValue?: DateValue;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    placeholder?: string;
+    disabled?: boolean;
+    class?: HTMLAttributes['class'];
+    contentClass?: HTMLAttributes['class'];
 }>(), {
     placeholder: 'Pick a date',
-    disabled: false,
-})
+    disabled: false
+});
 
+// Emits
 const emits = defineEmits<{
-    (e: 'update:modelValue', payload: DateValue | undefined): void
-}>()
+    (e: 'update:modelValue', payload: DateValue | undefined): void;
+}>();
 
-const internalDate = ref<DateValue | undefined>(props.defaultValue)
-const isControlled = computed(() => props.modelValue !== undefined)
+const internalDate = ref<DateValue | undefined>(props.defaultValue);
+const isControlled = computed(() => props.modelValue !== undefined);
 
 const date = computed({
-    get: () => (isControlled.value ? props.modelValue : internalDate.value) as any,
+    get: () =>
+        (isControlled.value ? props.modelValue : internalDate.value) as any,
     set: (value: DateValue | undefined) => {
-        if (!isControlled.value)
-            internalDate.value = value
+        if (!isControlled.value) internalDate.value = value;
 
-        emits('update:modelValue', value)
+        emits('update:modelValue', value);
     },
-})
+});
 
-const defaultPlaceholder = computed(() => (date.value ?? today(getLocalTimeZone())) as any)
+const defaultPlaceholder = computed(
+    () => (date.value ?? today(getLocalTimeZone())) as any,
+);
 
 const formatter = new DateFormatter('en-US', {
     dateStyle: 'long',
-})
+});
 </script>
 
 <template>
     <Popover v-slot="{ close }">
         <PopoverTrigger as-child>
-            <Button variant="secondary" :disabled="disabled" :class="cn('h-[52px] w-[240px] justify-start text-left font-normal enabled:active:scale-100', !date && 'text-muted-foreground', props.class)">
+            <Button variant="secondary" :disabled="disabled" :class="cn(
+                'h-13 w-60 justify-start text-left font-normal enabled:active:scale-100',
+                !date && 'text-muted-foreground',
+                props.class,
+            )
+                ">
                 <HugeiconsIcon :icon="Calendar03Icon" class="size-4" />
-                {{ date ? formatter.format(date.toDate(getLocalTimeZone())) : placeholder }}
+                {{
+                    date
+                        ? formatter.format(date.toDate(getLocalTimeZone()))
+                        : placeholder
+                }}
             </Button>
         </PopoverTrigger>
         <PopoverContent :class="cn('w-auto p-0', props.contentClass)" align="start">

package/src/components/ui/date-picker/index.ts

@@ -1,2 +1,2 @@
-export { default as DatePicker } from './DatePicker.vue'
-export { default } from './DatePicker.vue'
+export { default as DatePicker } from './DatePicker.vue';
+export { default } from './DatePicker.vue';

package/src/components/ui/date-time-picker/DateTimePicker.vue

@@ -1,72 +1,74 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { fromDate, getLocalTimeZone, toCalendarDate } from '@internationalized/date'
-import type { DateValue } from 'reka-ui'
-import { computed, ref } from 'vue'
-import { cn } from '../../../lib/utils'
-import { DatePicker } from '../date-picker'
-import { TimePicker } from '../time-picker'
-
+import type { HTMLAttributes } from 'vue';
+import { fromDate, getLocalTimeZone, toCalendarDate, } from '@internationalized/date';
+import type { DateValue } from 'reka-ui';
+import { computed, ref } from 'vue';
+import { cn } from '../../../lib/utils';
+import { DatePicker } from '../date-picker';
+import { TimePicker } from '../time-picker';
+
+// Props
 const props = withDefaults(defineProps<{
-    defaultValue?: Date | null
-    modelValue?: Date | null
-    minDate?: Date | null
-    maxDate?: Date | null
-    step?: string | number
-    disabled?: boolean
-    datePlaceholder?: string
-    class?: HTMLAttributes['class']
-    datePickerClass?: HTMLAttributes['class']
-    timePickerClass?: HTMLAttributes['class']
-    datePickerContentClass?: HTMLAttributes['class']
+    defaultValue?: Date | null;
+    modelValue?: Date | null;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    step?: string | number;
+    disabled?: boolean;
+    datePlaceholder?: string;
+    class?: HTMLAttributes['class'];
+    datePickerClass?: HTMLAttributes['class'];
+    timePickerClass?: HTMLAttributes['class'];
+    datePickerContentClass?: HTMLAttributes['class'];
 }>(), {
     defaultValue: null,
     minDate: null,
     maxDate: null,
     step: 60,
     disabled: false,
-    datePlaceholder: 'Pick a date',
-})
+    datePlaceholder: 'Pick a date'
+});
 
+// Emits
 const emits = defineEmits<{
-    (e: 'update:modelValue', payload: Date | null): void
-}>()
+    (e: 'update:modelValue', payload: Date | null): void;
+}>();
 
-const localTimeZone = getLocalTimeZone()
-const internalValue = ref<Date | null>(props.defaultValue)
-const isControlled = computed(() => props.modelValue !== undefined)
+const localTimeZone = getLocalTimeZone();
+const internalValue = ref<Date | null>(props.defaultValue);
+const isControlled = computed(() => props.modelValue !== undefined);
 
 const value = computed({
-    get: () => (isControlled.value ? props.modelValue : internalValue.value) ?? null,
+    get: () =>
+        (isControlled.value ? props.modelValue : internalValue.value) ?? null,
     set: (nextValue: Date | null) => {
-        const resolvedValue = clampDate(nextValue)
+        const resolvedValue = clampDate(nextValue);
 
-        if (!isControlled.value)
-            internalValue.value = resolvedValue
+        if (!isControlled.value) internalValue.value = resolvedValue;
 
-        emits('update:modelValue', resolvedValue)
+        emits('update:modelValue', resolvedValue);
     },
-})
+});
 
-const toPickerDateValue = (date: Date | null | undefined): DateValue | undefined => {
+const toPickerDateValue = (
+    date: Date | null | undefined,
+): DateValue | undefined => {
     if (!(date instanceof Date) || Number.isNaN(date.getTime()))
-        return undefined
+        return undefined;
 
-    return toCalendarDate(fromDate(date, localTimeZone))
-}
+    return toCalendarDate(fromDate(date, localTimeZone));
+};
 
 const toTimeString = (date: Date | null | undefined) => {
-    if (!(date instanceof Date) || Number.isNaN(date.getTime()))
-        return ''
+    if (!(date instanceof Date) || Number.isNaN(date.getTime())) return '';
 
-    return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
-}
+    return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+};
 
 const buildDate = (dateValue: DateValue | undefined, timeValue: string) => {
-    if (!dateValue)
-        return null
+    if (!dateValue) return null;
 
-    const [hours = '0', minutes = '0'] = (timeValue || '00:00').split(':')
+    const [hours = '0', minutes = '0'] = (timeValue || '00:00').split(':');
     const nextDate = new Date(
         dateValue.year,
         dateValue.month - 1,
@@ -75,96 +77,98 @@ const buildDate = (dateValue: DateValue | undefined, timeValue: string) => {
         Number(minutes),
         0,
         0,
-    )
+    );
 
-    return Number.isNaN(nextDate.getTime()) ? null : nextDate
-}
+    return Number.isNaN(nextDate.getTime()) ? null : nextDate;
+};
 
-const areSameCalendarDay = (left: DateValue | undefined, right: DateValue | undefined) => {
-    if (!left || !right)
-        return false
+const areSameCalendarDay = (
+    left: DateValue | undefined,
+    right: DateValue | undefined,
+) => {
+    if (!left || !right) return false;
 
-    return left.year === right.year
-        && left.month === right.month
-        && left.day === right.day
-}
+    return (
+        left.year === right.year &&
+        left.month === right.month &&
+        left.day === right.day
+    );
+};
 
 const clampDate = (date: Date | null) => {
-    if (!date)
-        return null
+    if (!date) return null;
 
     if (props.minDate && date.getTime() < props.minDate.getTime())
-        return new Date(props.minDate)
+        return new Date(props.minDate);
 
     if (props.maxDate && date.getTime() > props.maxDate.getTime())
-        return new Date(props.maxDate)
+        return new Date(props.maxDate);
 
-    return date
-}
+    return date;
+};
 
-const getFallbackDate = () => value.value ?? props.minDate ?? props.maxDate ?? new Date()
+const getFallbackDate = () =>
+    value.value ?? props.minDate ?? props.maxDate ?? new Date();
 
 const dateValue = computed({
     get: () => toPickerDateValue(value.value),
     set: (nextDateValue: DateValue | undefined) => {
         if (!nextDateValue) {
-            value.value = null
-            return
+            value.value = null;
+            return;
         }
 
-        const fallbackTime = toTimeString(value.value ?? props.minDate ?? props.maxDate)
-        value.value = buildDate(nextDateValue, fallbackTime)
+        const fallbackTime = toTimeString(
+            value.value ?? props.minDate ?? props.maxDate,
+        );
+        value.value = buildDate(nextDateValue, fallbackTime);
     },
-})
+});
 
 const timeValue = computed({
     get: () => toTimeString(value.value),
     set: (nextTimeValue: string) => {
-        value.value = buildDate(toPickerDateValue(getFallbackDate()), nextTimeValue || toTimeString(getFallbackDate()))
+        value.value = buildDate(
+            toPickerDateValue(getFallbackDate()),
+            nextTimeValue || toTimeString(getFallbackDate()),
+        );
     },
-})
+});
 
-const minDateValue = computed(() => toPickerDateValue(props.minDate))
-const maxDateValue = computed(() => toPickerDateValue(props.maxDate))
+const minDateValue = computed(() => toPickerDateValue(props.minDate));
+const maxDateValue = computed(() => toPickerDateValue(props.maxDate));
 
 const minTimeValue = computed(() => {
-    const selectedDate = dateValue.value
-    const minimumDate = minDateValue.value
+    const selectedDate = dateValue.value;
+    const minimumDate = minDateValue.value;
 
-    return areSameCalendarDay(selectedDate, minimumDate) ? toTimeString(props.minDate) : undefined
-})
+    return areSameCalendarDay(selectedDate, minimumDate)
+        ? toTimeString(props.minDate)
+        : undefined;
+});
 
 const maxTimeValue = computed(() => {
-    const selectedDate = dateValue.value
-    const maximumDate = maxDateValue.value
+    const selectedDate = dateValue.value;
+    const maximumDate = maxDateValue.value;
 
-    return areSameCalendarDay(selectedDate, maximumDate) ? toTimeString(props.maxDate) : undefined
-})
+    return areSameCalendarDay(selectedDate, maximumDate)
+        ? toTimeString(props.maxDate)
+        : undefined;
+});
 </script>
 
 <template>
-    <div :class="cn('grid grid-cols-1 gap-3 md:grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)]', props.class)">
+    <div :class="cn(
+        'grid grid-cols-1 gap-3 md:grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)]',
+        props.class,
+    )
+        ">
         <div>
-            <DatePicker
-                v-model="dateValue"
-                :disabled="props.disabled"
-                :placeholder="props.datePlaceholder"
-                :min-value="minDateValue"
-                :max-value="maxDateValue"
-                :class="cn('w-full', props.datePickerClass)"
-                :content-class="props.datePickerContentClass"
-            />
+            <DatePicker v-model="dateValue" :disabled="props.disabled" :placeholder="props.datePlaceholder" :min-value="minDateValue" :max-value="maxDateValue" :class="cn('w-full', props.datePickerClass)" :content-class="props.datePickerContentClass" />
         </div>
 
         <div>
-            <TimePicker
-                v-model="timeValue"
-                :disabled="props.disabled"
-                :step="props.step"
-                :min="minTimeValue"
-                :max="maxTimeValue"
-                :class="cn('w-full', props.timePickerClass)"
-            />
+            <TimePicker v-model="timeValue" :disabled="props.disabled" :step="props.step" :min="minTimeValue" :max="maxTimeValue" :class="cn('w-full', props.timePickerClass)" />
         </div>
     </div>
 </template>

package/src/components/ui/date-time-picker/index.ts

@@ -1,2 +1,2 @@
-export { default as DateTimePicker } from './DateTimePicker.vue'
-export { default } from './DateTimePicker.vue'
+export { default as DateTimePicker } from './DateTimePicker.vue';
+export { default } from './DateTimePicker.vue';

package/src/components/ui/dialog/Dialog.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "reka-ui"
-import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
 
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
+// Props
+const props = defineProps<DialogRootProps>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+// Emits
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DialogRoot v-slot="slotProps" data-slot="dialog" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </DialogRoot>
-</template>
+    <DialogRoot v-slot="slotProps" data-slot="dialog" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </DialogRoot>
+</template>

package/src/components/ui/dialog/DialogClose.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from "reka-ui"
-import { DialogClose } from "reka-ui"
+import type { DialogCloseProps } from 'reka-ui';
+import { DialogClose } from 'reka-ui';
 
-const props = defineProps<DialogCloseProps>()
+// Props
+const props = defineProps<DialogCloseProps>();
 </script>
 
 <template>
-  <DialogClose
-    data-slot="dialog-close"
-    v-bind="props"
-  >
-    <slot />
-  </DialogClose>
-</template>
+    <DialogClose data-slot="dialog-close" v-bind="props">
+        <slot />
+    </DialogClose>
+</template>

package/src/components/ui/dialog/DialogContent.vue

@@ -1,54 +1,48 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DialogClose,
-  DialogContent,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "../../../lib/utils"
-import { Button } from "../button"
-import DialogOverlay from "./DialogOverlay.vue"
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { Button } from '../button';
+import DialogOverlay from './DialogOverlay.vue';
 
 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false
+});
 
+// Props
 const props = withDefaults(defineProps<DialogContentProps & {
-  class?: HTMLAttributes["class"]
-  showCloseButton?: boolean
+    class?: HTMLAttributes['class'];
+    showCloseButton?: boolean;
 }>(), {
-  showCloseButton: false,
-})
-const emits = defineEmits<DialogContentEmits>()
+    showCloseButton: false
+});
 
-const delegatedProps = reactiveOmit(props, "class")
+// Emits
+const emits = defineEmits<DialogContentEmits>();
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogContent
-      data-slot="dialog-content"
-      v-bind="{ ...$attrs, ...forwarded }"
-      :class="
-        cn(
-          'bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border border-border p-6 outline-none duration-200 sm:max-w-[425px]',
-          props.class,
-        )"
-    >
-      <slot />
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogContent data-slot="dialog-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+            'bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border border-border p-6 outline-none duration-200 sm:max-w-106.25',
+            props.class
+        )
+            ">
+            <slot />
 
-      <DialogClose v-if="props.showCloseButton" data-slot="dialog-close" as-child>
-        <Button variant="ghost" size="icon-sm" class="absolute top-4 right-4 p-0.5">
-          <span aria-hidden="true">X</span>
-          <span class="sr-only">Close</span>
-        </Button>
-      </DialogClose>
-    </DialogContent>
-  </DialogPortal>
-</template>
+            <DialogClose v-if="props.showCloseButton" data-slot="dialog-close" as-child>
+                <Button variant="ghost" size="icon-sm" class="absolute top-4 right-4 p-0.5">
+                    <span aria-hidden="true">X</span>
+                    <span class="sr-only">Close</span>
+                </Button>
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
+</template>

package/src/components/ui/dialog/DialogDescription.vue

@@ -1,19 +1,24 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogDescription, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { DialogDescriptionProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogDescription, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DialogDescription data-slot="dialog-description" v-bind="forwardedProps" :class="cn('text-xs sm:text-sm leading-5 text-muted-foreground', props.class)">
-    <slot />
-  </DialogDescription>
+    <DialogDescription data-slot="dialog-description" v-bind="forwardedProps" :class="cn(
+        'text-xs sm:text-sm leading-5 text-muted-foreground',
+        props.class
+    )
+        ">
+        <slot />
+    </DialogDescription>
 </template>