@soft-stech/bootsman-ui-shadcn 2.0.7 → 2.0.11

package/src/components/calendar/BuiCalendar.vue

@@ -1,324 +0,0 @@
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-import { DatePicker, type Calendar } from 'v-calendar'
-import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
-import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
-import { isVCalendarSlot } from './index'
-import { buttonVariants } from '@/components/button'
-import { cn } from '@/lib/utils'
-
-/* Extracted from v-calendar */
-type DatePickerModel = DatePickerDate | DatePickerRangeObject
-type DateSource = Date | string | number
-type DatePickerDate = DateSource | Partial<SimpleDateParts> | null
-interface DatePickerRangeObject {
-  start: Exclude<DatePickerDate, null>
-  end: Exclude<DatePickerDate, null>
-}
-interface SimpleDateParts {
-  year: number
-  month: number
-  day: number
-  hours: number
-  minutes: number
-  seconds: number
-  milliseconds: number
-}
-
-defineOptions({
-  inheritAttrs: false
-})
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | number | Date | DatePickerModel
-    modelModifiers?: object
-    columns?: number
-    type?: 'single' | 'range'
-  }>(),
-  {
-    type: 'single',
-    columns: 1
-  }
-)
-const emits = defineEmits<{
-  (e: 'update:modelValue', payload: typeof props.modelValue): void
-}>()
-
-const modelValue = useVModel(props, 'modelValue', emits, {
-  passive: true
-})
-
-const datePicker = ref<InstanceType<typeof DatePicker>>()
-// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.
-const calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)
-
-function handleNav(direction: 'prev' | 'next') {
-  if (!calendarRef.value) return
-
-  if (direction === 'prev') calendarRef.value.movePrev()
-  else calendarRef.value.moveNext()
-}
-
-onMounted(async () => {
-  await nextTick()
-  if (modelValue.value instanceof Date && calendarRef.value)
-    calendarRef.value.focusDate(modelValue.value)
-})
-
-const $slots = useSlots()
-const vCalendarSlots = computed(() => {
-  return Object.keys($slots)
-    .filter((name) => isVCalendarSlot(name))
-    .reduce((obj: Record<string, unknown>, key: string) => {
-      obj[key] = $slots[key]
-      return obj
-    }, {})
-})
-</script>
-
-<template>
-  <div class="relative">
-    <div class="absolute top-3 z-1 flex w-full justify-between px-4">
-      <button
-        :class="
-          cn(
-            buttonVariants({ variant: 'outline' }),
-            'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
-          )
-        "
-        @click="handleNav('prev')"
-      >
-        <ChevronLeft class="h-4 w-4" />
-      </button>
-      <button
-        :class="
-          cn(
-            buttonVariants({ variant: 'outline' }),
-            'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
-          )
-        "
-        @click="handleNav('next')"
-      >
-        <ChevronRight class="h-4 w-4" />
-      </button>
-    </div>
-
-    <DatePicker
-      ref="datePicker"
-      v-model="modelValue"
-      v-bind="$attrs"
-      :model-modifiers="modelModifiers"
-      class="calendar"
-      trim-weeks
-      :transition="'none'"
-      :columns="columns"
-    >
-      <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
-        <slot :name="slot" v-bind="scope" />
-      </template>
-    </DatePicker>
-  </div>
-</template>
-
-<style>
-@reference "../../style.css";
-
-.calendar {
-  @apply p-3 text-center;
-}
-.calendar .vc-pane-layout {
-  @apply grid gap-4;
-}
-.calendar .vc-title {
-  @apply pointer-events-none text-sm font-medium;
-}
-.calendar .vc-pane-header-wrapper {
-  @apply hidden;
-}
-.calendar .vc-weeks {
-  @apply mt-4;
-}
-.calendar .vc-weekdays {
-  @apply flex;
-}
-.calendar .vc-weekday {
-  @apply text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal;
-}
-.calendar .vc-weeks {
-  @apply flex w-full flex-col space-y-2 [&>_div]:grid [&>_div]:grid-cols-7;
-}
-.calendar .vc-day:has(.vc-highlights) {
-  @apply bg-accent overflow-hidden first:rounded-l-md last:rounded-r-md;
-}
-.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {
-  @apply bg-secondary rounded-md;
-}
-.calendar .vc-day:has(.vc-highlight-base-start) {
-  @apply rounded-l-md;
-}
-.calendar .vc-day:has(.vc-highlight-base-end) {
-  @apply rounded-r-md;
-}
-.calendar
-  .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(
-    :has(.vc-highlight-base-end)
-  ) {
-  @apply rounded-md;
-}
-.calendar .vc-day-content {
-  @apply ring-offset-background hover:bg-accent/8 hover:text-accent-foreground focus-visible:ring-ring relative inline-flex h-9 w-9 items-center justify-center p-0 text-center text-sm font-normal select-none focus-within:relative focus-within:z-20 hover:transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden aria-selected:opacity-100;
-}
-.calendar .vc-day-content:not(.vc-highlight-content-light) {
-  @apply rounded-md;
-}
-.calendar
-  .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(
-    :has(.vc-highlight-content-light)
-  ):not(:has(.vc-highlight-content-outline)),
-.calendar .vc-disabled {
-  @apply text-muted-foreground opacity-50;
-}
-.calendar .vc-highlight-content-solid,
-.calendar .vc-highlight-content-outline {
-  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
-}
-.calendar .vc-highlight-content-light {
-  @apply bg-accent/8 text-accent-foreground;
-}
-.calendar .vc-pane-container.in-transition {
-  @apply overflow-hidden;
-}
-.calendar .vc-pane-container {
-  @apply relative w-full;
-}
-:root {
-  --vc-slide-translate: 22px;
-  --vc-slide-duration: 0.15s;
-  --vc-slide-timing: ease;
-}
-.calendar .vc-fade-enter-active,
-.calendar .vc-fade-leave-active,
-.calendar .vc-slide-left-enter-active,
-.calendar .vc-slide-left-leave-active,
-.calendar .vc-slide-right-enter-active,
-.calendar .vc-slide-right-leave-active,
-.calendar .vc-slide-up-enter-active,
-.calendar .vc-slide-up-leave-active,
-.calendar .vc-slide-down-enter-active,
-.calendar .vc-slide-down-leave-active,
-.calendar .vc-slide-fade-enter-active,
-.calendar .vc-slide-fade-leave-active {
-  transition:
-    opacity var(--vc-slide-duration) var(--vc-slide-timing),
-    -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-  transition:
-    transform var(--vc-slide-duration) var(--vc-slide-timing),
-    opacity var(--vc-slide-duration) var(--vc-slide-timing);
-  transition:
-    transform var(--vc-slide-duration) var(--vc-slide-timing),
-    opacity var(--vc-slide-duration) var(--vc-slide-timing),
-    -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  pointer-events: none;
-}
-.calendar .vc-none-leave-active,
-.calendar .vc-fade-leave-active,
-.calendar .vc-slide-left-leave-active,
-.calendar .vc-slide-right-leave-active,
-.calendar .vc-slide-up-leave-active,
-.calendar .vc-slide-down-leave-active {
-  position: absolute !important;
-  width: 100%;
-}
-.calendar .vc-none-enter-from,
-.calendar .vc-none-leave-to,
-.calendar .vc-fade-enter-from,
-.calendar .vc-fade-leave-to,
-.calendar .vc-slide-left-enter-from,
-.calendar .vc-slide-left-leave-to,
-.calendar .vc-slide-right-enter-from,
-.calendar .vc-slide-right-leave-to,
-.calendar .vc-slide-up-enter-from,
-.calendar .vc-slide-up-leave-to,
-.calendar .vc-slide-down-enter-from,
-.calendar .vc-slide-down-leave-to,
-.calendar .vc-slide-fade-enter-from,
-.calendar .vc-slide-fade-leave-to {
-  opacity: 0;
-}
-.calendar .vc-slide-left-enter-from,
-.calendar .vc-slide-right-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-left,
-.calendar .vc-slide-fade-leave-to.direction-left {
-  -webkit-transform: translateX(var(--vc-slide-translate));
-  transform: translateX(var(--vc-slide-translate));
-}
-.calendar .vc-slide-right-enter-from,
-.calendar .vc-slide-left-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-right,
-.calendar .vc-slide-fade-leave-to.direction-right {
-  -webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
-  transform: translateX(calc(-1 * var(--vc-slide-translate)));
-}
-.calendar .vc-slide-up-enter-from,
-.calendar .vc-slide-down-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-top,
-.calendar .vc-slide-fade-leave-to.direction-top {
-  -webkit-transform: translateY(var(--vc-slide-translate));
-  transform: translateY(var(--vc-slide-translate));
-}
-.calendar .vc-slide-down-enter-from,
-.calendar .vc-slide-up-leave-to,
-.calendar .vc-slide-fade-enter-from.direction-bottom,
-.calendar .vc-slide-fade-leave-to.direction-bottom {
-  -webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
-  transform: translateY(calc(-1 * var(--vc-slide-translate)));
-}
-/**
- * Timepicker styles
- */
-.vc-time-picker {
-  @apply flex flex-col items-center p-2;
-}
-.vc-time-picker.vc-invalid {
-  @apply pointer-events-none opacity-50;
-}
-.vc-time-picker.vc-attached {
-  @apply border-secondary mt-2 border-t border-solid;
-}
-.vc-time-picker > * + * {
-  @apply mt-1;
-}
-.vc-time-header {
-  @apply mt-1 flex items-center px-1 text-sm leading-6 font-semibold uppercase;
-}
-.vc-time-select-group {
-  @apply border-secondary bg-background text-foreground inline-flex items-center rounded-md border border-solid px-1;
-}
-.vc-time-select-group .vc-base-icon {
-  @apply stroke-primary text-primary mr-1;
-}
-.vc-time-select-group select {
-  @apply bg-background text-foreground appearance-none p-1 text-center outline-none;
-}
-.vc-time-weekday {
-  @apply text-muted-foreground tracking-wide;
-}
-.vc-time-month {
-  @apply text-primary ml-2;
-}
-.vc-time-day {
-  @apply text-primary ml-1;
-}
-.vc-time-year {
-  @apply text-muted-foreground ml-2;
-}
-.vc-time-colon {
-  @apply mb-0.5;
-}
-.vc-time-decimal {
-  @apply ml-0.5;
-}
-</style>

package/src/components/calendar/index.ts

@@ -1,22 +0,0 @@
-export { default as BuiCalendar } from './BuiCalendar.vue'
-import type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'
-
-export function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {
-  const validSlots: CalendarSlotName[] = [
-    'day-content',
-    'day-popover',
-    'dp-footer',
-    'footer',
-    'header-title-wrapper',
-    'header-title',
-    'header-prev-button',
-    'header-next-button',
-    'nav',
-    'nav-prev-button',
-    'nav-next-button',
-    'page',
-    'time-header'
-  ]
-
-  return validSlots.includes(slotName as CalendarSlotName)
-}

package/src/stories/BuiCalendar.stories.ts

@@ -1,63 +0,0 @@
-import { BuiCalendar } from '@/components/calendar'
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
-
-const meta = {
-  component: BuiCalendar,
-  tags: ['autodocs'],
-  argTypes: {},
-  args: {}
-} satisfies Meta<typeof BuiCalendar>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-  render: (args) => ({
-    components: { BuiCalendar },
-    setup() {
-      const date = ref(new Date())
-      return { args, date }
-    },
-    template: `
-      <div class="flex min-h-[350px] w-full items-center justify-center p-10">
-        <BuiCalendar v-model="date" mode="dateTime" is24hr />
-      </div>
-    `
-  })
-}
-
-export const Range: Story = {
-  args: {},
-  render: (args) => ({
-    components: { BuiCalendar },
-    setup() {
-      const range = ref({
-        start: new Date(2020, 0, 6),
-        end: new Date(2020, 0, 10)
-      })
-
-      const rules = ref([
-        {
-          hours: 0,
-          minutes: 0,
-          seconds: 0,
-          milliseconds: 0
-        },
-        {
-          hours: 23,
-          minutes: 59,
-          seconds: 59,
-          milliseconds: 999
-        }
-      ])
-      return { args, range, rules }
-    },
-    template: `
-      <div class="flex min-h-[350px] w-full items-center justify-center p-10">
-        <BuiCalendar v-model.range="range" :rules="rules" />
-      </div>
-    `
-  })
-}

package/src/stories/DatePicker.stories.ts

@@ -1,22 +0,0 @@
-import { BuiPopover } from '@/components/popover'
-import DatePickerStory from '@/stories/components/DatePickerStory.vue'
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-const meta = {
-  title: 'DatePicker',
-  component: BuiPopover,
-  argTypes: {},
-  args: {}
-} satisfies Meta<typeof BuiPopover>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  name: 'DatePicker',
-  args: {},
-  render: () => ({
-    components: { DatePickerStory },
-    template: `<DatePickerStory />`
-  })
-}

package/src/stories/components/DatePickerStory.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { BuiButton } from '@/components/button'
-import { BuiCalendar } from '@/components/calendar'
-import { BuiPopover, BuiPopoverContent, BuiPopoverTrigger } from '@/components/popover'
-import { cn } from '@/lib/utils'
-import { CalendarIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
-const date = ref<Date>()
-</script>
-
-<template>
-  <BuiPopover>
-    <BuiPopoverTrigger as-child>
-      <BuiButton
-        :variant="'outline'"
-        :class="
-          cn('w-[280px] justify-start text-left font-normal', !date && 'text-muted-foreground')
-        "
-      >
-        <CalendarIcon class="mr-2 h-4 w-4" />
-        <span>{{ date ? date.toLocaleDateString() : 'Pick a date' }}</span>
-      </BuiButton>
-    </BuiPopoverTrigger>
-    <BuiPopoverContent class="w-auto p-0">
-      <BuiCalendar v-model="date" />
-    </BuiPopoverContent>
-  </BuiPopover>
-</template>