feat: UidCalendar — day, week, year and agenda views

.changeset/calendar-views.md

@@ -0,0 +1,7 @@
+---
+'@dskripchenko/ui': minor
+---
+
+UidCalendar: day, week, year and agenda views besides the month (`v-model:view`, `views` for the switcher, `v-model:anchor` for the shown date), events with a time (`time`, `endTime`) and across days (`endDate`), overlapping events side by side in the time grid, a `range` event with the visible days, and with `editable` drag-to-move, resize and `slot-click` on an empty slot (`event-move`). The month view stays as before when no other view is asked for.
+
+UidBoard: `readonly` — cards open on click and Enter but cannot be dragged or moved with Alt+arrows (for boards shown to people who may not change them).

src/components/Board/UidBoard.css

@@ -135,3 +135,7 @@
   font-size: var(--uid-font-size-xs, 11px);
   color: var(--uid-color-text-tertiary, var(--uid-color-text-secondary));
 }
+
+.uid-board--readonly .uid-board__card {
+  cursor: pointer;
+}

src/components/Board/UidBoard.spec.ts

@@ -97,4 +97,22 @@ describe('UidBoard', () => {
     expect(lanes[0]!.findAll('.uid-board__column')[0]!.findAll('.uid-board__card')).toHaveLength(1)
     expect(lanes[1]!.findAll('.uid-board__header')).toHaveLength(0)
   })
+
+  it('readonly: карточки не перетаскиваются и не двигаются клавишами, но открываются', async () => {
+    const wrapper = mount(UidBoard, {
+      props: {
+        readonly: true,
+        columns: [
+          { key: 'a', title: 'A', cards: [{ key: 1, title: 'One' }] },
+          { key: 'b', title: 'B', cards: [] },
+        ],
+      },
+    })
+    const card = wrapper.find('.uid-board__card')
+    expect(card.attributes('draggable')).toBe('false')
+    await card.trigger('keydown', { key: 'ArrowRight', altKey: true })
+    expect(wrapper.emitted('move')).toBeUndefined()
+    await card.trigger('click')
+    expect(wrapper.emitted('open')).toHaveLength(1)
+  })
 })

src/components/Board/UidBoard.vue

@@ -50,11 +50,13 @@ export interface UidBoardProps {
   lanes?: BoardLane[]
   /** Freeze the board while a move is being saved. */
   busy?: boolean
+  readonly?: boolean
 }
 
 const props = withDefaults(defineProps<UidBoardProps>(), {
   lanes: () => [],
   busy: false,
+  readonly: false,
 })
 
 const emit = defineEmits<{
@@ -92,7 +94,7 @@ function allows(card: BoardCard, column: BoardColumn, from: BoardKey): boolean {
 }
 
 function onDragStart(event: DragEvent, card: BoardCard, column: BoardColumn): void {
-  if (props.busy) {
+  if (props.busy || props.readonly) {
     event.preventDefault()
     return
   }
@@ -154,7 +156,7 @@ function onKeydown(event: KeyboardEvent, card: BoardCard, column: BoardColumn, l
     emit('open', card)
     return
   }
-  if (!event.altKey || (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') || props.busy) return
+  if (!event.altKey || (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') || props.busy || props.readonly) return
   event.preventDefault()
   const step = event.key === 'ArrowRight' ? 1 : -1
   const index = props.columns.findIndex((c) => c.key === column.key)
@@ -181,7 +183,7 @@ function isBlocked(column: BoardColumn): boolean {
 <template>
   <div
     class="uid-board"
-    :class="{ 'uid-board--busy': busy, 'uid-board--dragging': dragging !== null }"
+    :class="{ 'uid-board--busy': busy, 'uid-board--readonly': readonly, 'uid-board--dragging': dragging !== null }"
     role="region"
     :aria-label="locale.board.label"
     :aria-busy="busy"
@@ -240,10 +242,10 @@ function isBlocked(column: BoardColumn): boolean {
                 'uid-board__card--dragging': dragging?.card.key === card.key,
                 'uid-board__card--drop-before': hover?.beforeKey === card.key && hover?.column === column.key,
               }"
-              :draggable="!busy"
+              :draggable="!busy && !readonly"
               tabindex="0"
               role="listitem"
-              :aria-keyshortcuts="'Alt+ArrowLeft Alt+ArrowRight Enter'"
+              :aria-keyshortcuts="readonly ? 'Enter' : 'Alt+ArrowLeft Alt+ArrowRight Enter'"
               @dragstart="onDragStart($event, card, column)"
               @dragend="onDragEnd"
               @dragover.stop="onDragOver($event, column, lane, card.key)"