origam 2.15.0 → 2.17.0

package/dist/src/components/Calendar/OrigamCalendar.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    :id="id"
     class="origam-calendar"
     :class="rootClasses"
     :style="rootStyles"
@@ -34,7 +35,7 @@
             :aria-label="ariaPrevLabel"
             :disabled="!canPrev"
             data-cy="origam-calendar-prev"
-            @click="onNavigate('prev')"
+            @click="onNavigate(CALENDAR_NAVIGATE.PREV)"
           />
           <origam-btn
             variant="text"
@@ -42,7 +43,7 @@
             :text="todayLabel"
             :aria-label="ariaTodayLabel"
             data-cy="origam-calendar-today"
-            @click="onNavigate('today')"
+            @click="onNavigate(CALENDAR_NAVIGATE.TODAY)"
           />
           <origam-btn
             variant="text"
@@ -51,7 +52,7 @@
             :aria-label="ariaNextLabel"
             :disabled="!canNext"
             data-cy="origam-calendar-next"
-            @click="onNavigate('next')"
+            @click="onNavigate(CALENDAR_NAVIGATE.NEXT)"
           />
         </origam-btn-group>
 
@@ -85,7 +86,7 @@
     </slot>
 
     <div
-      v-if="resolvedView === VIEW.MONTH"
+      v-if="resolvedView === CALENDAR_VIEW.MONTH"
       class="origam-calendar__body origam-calendar__body--month"
       data-cy="origam-calendar-body-month"
     >
@@ -129,10 +130,11 @@
           <div
             v-for="dayCell in weekRow"
             :key="dayCell.toISOString()"
+            :ref="(el) => setDayCellRef(dayCell, el)"
             class="origam-calendar__day-cell"
             :class="dayCellClasses(dayCell)"
             role="gridcell"
-            tabindex="0"
+            :tabindex="isRovingTabStop(dayCell) ? 0 : -1"
             :aria-label="ariaDayLabel(dayCell)"
             :aria-selected="isInDragSelection(dayCell)"
             :aria-disabled="isDayDisabled(dayCell)"
@@ -188,11 +190,11 @@
     </div>
 
     <div
-      v-else-if="resolvedView === VIEW.WEEK || resolvedView === VIEW.DAY"
+      v-else-if="resolvedView === CALENDAR_VIEW.WEEK || resolvedView === CALENDAR_VIEW.DAY"
       class="origam-calendar__body"
       :class="{
-					'origam-calendar__body--week': resolvedView === VIEW.WEEK,
-					'origam-calendar__body--day': resolvedView === VIEW.DAY
+					'origam-calendar__body--week': resolvedView === CALENDAR_VIEW.WEEK,
+					'origam-calendar__body--day': resolvedView === CALENDAR_VIEW.DAY
 				}"
       :data-cy="`origam-calendar-body-${resolvedView}`"
     >
@@ -221,7 +223,7 @@
             :data-cy="`origam-calendar-timeline-day-${dayCellKey(day)}`"
           >
             <div
-              v-if="resolvedView === VIEW.WEEK"
+              v-if="resolvedView === CALENDAR_VIEW.WEEK"
               class="origam-calendar__day-header"
             >
               <slot
@@ -341,17 +343,22 @@
 <script lang="ts" setup>
 import {
   computed,
+  nextTick,
   ref,
   watch
 } from "vue";
-import { OrigamBtn, OrigamBtnGroup } from "../../components";
-import {
-  useCalendar,
-  useDensity,
-  useDimension,
-  useLocale,
-  useStateEffect
-} from "../../composables";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamBtnGroup from "../Btn/OrigamBtnGroup.vue";
+import { CALENDAR_NAVIGATE, CALENDAR_VIEW } from "../../enums/Calendar/calendar.enum";
+import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
+import { INTENT } from "../../enums/Commons/intent.enum";
+import { VARIANT } from "../../enums/Commons/variant.enum";
+import { UNSEEDED } from "../../consts/Commons/vmodel.const";
+import { useCalendar } from "../../composables/Calendar/calendar.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
 import {
   getForeground,
   isCssColor,
@@ -376,11 +383,11 @@ import {
   toDate
 } from "../../utils/Calendar/date.util";
 const props = defineProps({
-  view: { type: String, required: false, default: "month" },
+  view: { type: null, required: false, default: "month" },
   currentDate: { type: [Date, String], required: false, default: () => /* @__PURE__ */ new Date() },
   events: { type: Array, required: false, default: () => [] },
   firstDayOfWeek: { type: Number, required: false, default: 1 },
-  timeFormat: { type: String, required: false, default: "24h" },
+  timeFormat: { type: null, required: false, default: "24h" },
   locale: { type: String, required: false, default: void 0 },
   selectable: { type: Boolean, required: false, default: true },
   eventColorKey: { type: String, required: false, default: "category" },
@@ -441,42 +448,36 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:view", "update:currentDate", "event-click", "date-click", "range-select", "create-event-request", "view-change", "navigate"]);
 defineSlots();
-const VIEW = {
-  MONTH: "month",
-  WEEK: "week",
-  DAY: "day",
-  AGENDA: "agenda"
-};
-const VIEW_OPTIONS = [VIEW.MONTH, VIEW.WEEK, VIEW.DAY, VIEW.AGENDA];
+const VIEW_OPTIONS = [CALENDAR_VIEW.MONTH, CALENDAR_VIEW.WEEK, CALENDAR_VIEW.DAY, CALENDAR_VIEW.AGENDA];
 const MONTH_EVENT_LIMIT = 3;
 const DEFAULT_SLOT_HEIGHT_PX = 32;
 const { t } = useLocale();
 const VIEW_LABEL_FALLBACK = {
-  month: "Month",
-  week: "Week",
-  day: "Day",
-  agenda: "Agenda"
+  [CALENDAR_VIEW.MONTH]: "Month",
+  [CALENDAR_VIEW.WEEK]: "Week",
+  [CALENDAR_VIEW.DAY]: "Day",
+  [CALENDAR_VIEW.AGENDA]: "Agenda"
 };
 function viewLabel(view) {
   return t(`origam.calendar.view.${view}`, VIEW_LABEL_FALLBACK[view]);
 }
-const ariaLabel = computed(() => t("origam.calendar.aria_label", "Calendar"));
-const ariaToolbarLabel = computed(() => t("origam.calendar.toolbar", "Calendar toolbar"));
-const ariaPrevLabel = computed(() => t("origam.calendar.previous", "Previous"));
-const ariaNextLabel = computed(() => t("origam.calendar.next", "Next"));
-const ariaTodayLabel = computed(() => t("origam.calendar.today", "Today"));
-const ariaViewListLabel = computed(() => t("origam.calendar.view_switcher", "View"));
-const ariaMonthLabel = computed(() => t("origam.calendar.month_grid", "Month grid"));
-const todayLabel = computed(() => t("origam.calendar.today", "Today"));
-const emptyLabel = computed(() => t("origam.calendar.empty", "No events to display"));
+const ariaLabel = computed(() => t("origam.calendar.aria_label"));
+const ariaToolbarLabel = computed(() => t("origam.calendar.toolbar"));
+const ariaPrevLabel = computed(() => t("origam.calendar.previous"));
+const ariaNextLabel = computed(() => t("origam.calendar.next"));
+const ariaTodayLabel = computed(() => t("origam.calendar.today"));
+const ariaViewListLabel = computed(() => t("origam.calendar.view_switcher"));
+const ariaMonthLabel = computed(() => t("origam.calendar.month_grid"));
+const todayLabel = computed(() => t("origam.calendar.today"));
+const emptyLabel = computed(() => t("origam.calendar.empty"));
 const slotPx = DEFAULT_SLOT_HEIGHT_PX;
 const slotDuration = computed(() => props.slotDuration);
 const dayStartHour = computed(() => props.dayStartHour);
 const dayEndHour = computed(() => props.dayEndHour);
 const showWeekNumbers = computed(() => props.showWeekNumbers);
 const weekendHighlight = computed(() => props.weekendHighlight);
-const internalView = ref(props.view ?? "month");
-const internalDate = ref(toDate(props.currentDate) ?? /* @__PURE__ */ new Date());
+const internalView = ref(UNSEEDED);
+const internalDate = ref(UNSEEDED);
 watch(() => props.view, (next) => {
   if (next != null) internalView.value = next;
 });
@@ -484,8 +485,8 @@ watch(() => props.currentDate, (next) => {
   const parsed = toDate(next);
   if (parsed) internalDate.value = parsed;
 });
-const resolvedView = computed(() => internalView.value);
-const resolvedDate = computed(() => internalDate.value);
+const resolvedView = computed(() => internalView.value !== UNSEEDED ? internalView.value : props.view ?? CALENDAR_VIEW.MONTH);
+const resolvedDate = computed(() => internalDate.value !== UNSEEDED ? internalDate.value : toDate(props.currentDate) ?? /* @__PURE__ */ new Date());
 const resolvedLocale = computed(() => {
   if (props.locale) return props.locale;
   if (typeof document !== "undefined" && document.documentElement.lang) {
@@ -534,14 +535,14 @@ function isViewActive(view) {
   return resolvedView.value === view;
 }
 function viewBtnVariant(view) {
-  return isViewActive(view) ? "flat" : "text";
+  return isViewActive(view) ? VARIANT.FLAT : VARIANT.TEXT;
 }
 const toolbarIntent = computed(() => {
   const bg = props.bgColor;
   if (bg && isIntent(bg)) return bg;
   const fg = props.color;
   if (fg && isIntent(fg)) return fg;
-  return "primary";
+  return INTENT.PRIMARY;
 });
 function viewBtnBgColor(view) {
   return isViewActive(view) ? toolbarIntent.value : void 0;
@@ -550,21 +551,21 @@ const headerTitle = computed(() => {
   const date = resolvedDate.value;
   const locale = resolvedLocale.value;
   switch (resolvedView.value) {
-    case "week": {
+    case CALENDAR_VIEW.WEEK: {
       const range = calendar.visibleDateRange.value;
       const startLabel = formatDate(range.start, locale, { month: "short", day: "numeric" });
       const endLabel = formatDate(range.end, locale, { month: "short", day: "numeric", year: "numeric" });
       return `${startLabel} \u2014 ${endLabel}`;
     }
-    case "day":
+    case CALENDAR_VIEW.DAY:
       return formatDate(date, locale, {
         weekday: "long",
         month: "long",
         day: "numeric",
         year: "numeric"
       });
-    case "month":
-    case "agenda":
+    case CALENDAR_VIEW.MONTH:
+    case CALENDAR_VIEW.AGENDA:
     default:
       return formatDate(date, locale, { month: "long", year: "numeric" });
   }
@@ -582,6 +583,18 @@ const weekdayNames = computed(() => getWeekdayNames(resolvedLocale.value, props.
 function dayCellKey(date) {
   return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
 }
+const dayCellRefs = /* @__PURE__ */ new Map();
+function setDayCellRef(date, el) {
+  const key = dayCellKey(date);
+  if (el instanceof HTMLElement) dayCellRefs.set(key, el);
+  else dayCellRefs.delete(key);
+}
+function isRovingTabStop(date) {
+  return isSameDay(date, resolvedDate.value);
+}
+function focusDayCell(date) {
+  dayCellRefs.get(dayCellKey(date))?.focus();
+}
 function isCellToday(date) {
   return isToday(date);
 }
@@ -631,7 +644,7 @@ function ariaDayLabel(date) {
   });
 }
 const timelineDays = computed(() => {
-  if (resolvedView.value === "day") return [startOfDay(resolvedDate.value)];
+  if (resolvedView.value === CALENDAR_VIEW.DAY) return [startOfDay(resolvedDate.value)];
   const range = calendar.visibleDateRange.value;
   const out = [];
   let cursor = startOfDay(range.start);
@@ -685,16 +698,7 @@ function agendaDayHeader(date) {
     day: "numeric"
   });
 }
-const INTENT_NAMES = [
-  "neutral",
-  "primary",
-  "secondary",
-  "ghost",
-  "success",
-  "warning",
-  "danger",
-  "info"
-];
+const INTENT_NAMES = Object.values(INTENT);
 function colorFor(event) {
   if (props.eventColorKey === "color" && event.color) {
     return resolveColor(event.color);
@@ -859,6 +863,12 @@ function onEventClick(event, originalEvent) {
 function onKeydown(event) {
   const target = event.target;
   if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA")) return;
+  if (event.key === KEYBOARD_VALUES.ENTER || event.key === KEYBOARD_VALUES.EMPTY) {
+    if (target?.getAttribute("role") !== "gridcell") return;
+    event.preventDefault();
+    onDayClick(resolvedDate.value, event);
+    return;
+  }
   let next = null;
   const current = resolvedDate.value;
   switch (event.key) {
@@ -885,6 +895,8 @@ function onKeydown(event) {
     event.preventDefault();
     internalDate.value = next;
     emit("update:currentDate", next);
+    const focusTarget = next;
+    void nextTick(() => focusDayCell(focusTarget));
   }
 }
 const {
@@ -974,7 +986,9 @@ defineExpose({
   .origam-calendar {
     display: flex;
     flex-direction: column;
+    gap: var(--origam-calendar---gap, 0);
     width: 100%;
+    padding: var(--origam-calendar---padding, 0);
     background-color: var(--origam-calendar---background-color, #ffffff);
     color: var(--origam-calendar---color, inherit);
     border: var(--origam-calendar---border-width, 1px) solid var(--origam-calendar---border-color, #e5e7eb);
@@ -1083,6 +1097,10 @@ defineExpose({
     user-select: none;
   }
 
+  .origam-calendar__day-cell:hover:not(.origam-calendar__day-cell--disabled) {
+    background-color: var(--origam-calendar__day-cell---bg-color-hover, var(--origam-color__surface---overlay, #f3f4f6));
+  }
+
   .origam-calendar__day-cell:focus-visible {
     outline: 2px solid var(--origam-calendar__range-select---border-color, currentColor);
     outline-offset: -2px;
@@ -1236,6 +1254,7 @@ defineExpose({
   }
 
   .origam-calendar__timeline-slot {
+    height: var(--origam-calendar__timeline---slot-height, 32px);
     border-top: 1px solid var(--origam-calendar__timeline---grid-line-color, #f3f4f6);
     pointer-events: auto;
   }

package/dist/src/components/Card/OrigamCard.vue

@@ -1,15 +1,19 @@
 <template>
 	<component
-			:is="link.tag"
+			:is="link.tag.value"
+			:id="id"
+			ref="root"
 			v-ripple="isClickable && ripple"
 			v-contrast
 			:class="cardClasses"
-			:href="link.href"
+			:href="link.href.value"
+			:role="cardRole"
 			:style="cardStyles"
-			:tabindex="disabled ? -1 : undefined"
+			:tabindex="cardTabindex"
 			@click="handleClick"
-			@mouseenter="onMouseenter"
-			@mouseleave="onMouseleave"
+			@keydown="handleKeydown"
+			@mouseenter="mouseenterHandler"
+			@mouseleave="mouseleaveHandler"
 	>
     <span
 		    v-if="isClickable"
@@ -29,6 +33,7 @@
 								v-if="loaderConfig.kind === 'skeleton'"
 								variant="card"
 								:loading="true"
+								:label="loadingText"
 								v-bind="loaderConfig.overrides"
 						/>
 						<origam-progress
@@ -39,6 +44,7 @@
 								:model-value="loaderConfig.modelValue"
 								:type="loaderConfig.kind === 'circular' ? PROGRESS_TYPE.CIRCULAR : PROGRESS_TYPE.LINEAR"
 								:class="cardProgressClasses"
+								:label="loadingText"
 								thickness="4"
 								v-bind="loaderConfig.overrides"
 						/>
@@ -58,6 +64,7 @@
 								:prepend-icon="prependIcon"
 								:subtitle="subtitle"
 								:title="title"
+								:title-id="titleId"
 								class="origam-card__header"
 								@click:prepend="handleClickPrepend"
 								@click:append="handleClickAppend"
@@ -142,26 +149,30 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamCardHeader, OrigamCardText, OrigamImg, OrigamProgress, OrigamSkeleton } from "../../components";
-import {
-  useActive,
-  useAdjacent,
-  useDefaults,
-  useDensity,
-  useDimension,
-  useHover,
-  useLink,
-  useLoader,
-  useLocation,
-  usePosition,
-  useProps,
-  useStateEffect,
-  useStyle
-} from "../../composables";
-import { vContrast, vRipple } from "../../directives";
-import { DENSITY, PROGRESS_TYPE } from "../../enums";
-import { computed, StyleValue, toRef, useAttrs, useSlots } from "vue";
-const _props = defineProps({
+import OrigamCardHeader from "./OrigamCardHeader.vue";
+import OrigamCardText from "./OrigamCardText.vue";
+import OrigamImg from "../Img/OrigamImg.vue";
+import OrigamProgress from "../Progress/OrigamProgress.vue";
+import OrigamSkeleton from "../Skeleton/OrigamSkeleton.vue";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useLink } from "../../composables/Commons/link.composable";
+import { useLoader } from "../../composables/Commons/loader.composable";
+import { useLocation } from "../../composables/Commons/location.composable";
+import { usePosition } from "../../composables/Commons/position.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import vRipple from "../../directives/Ripple/ripple.directive";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
+import { LOADER_KIND } from "../../enums/Commons/loader.enum";
+import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
+import { computed, ref, StyleValue, toRef, useAttrs, useSlots } from "vue";
+const props = defineProps({
   disabled: { type: Boolean, required: false },
   flat: { type: Boolean, required: false },
   hover: { type: Boolean, required: false },
@@ -171,6 +182,7 @@ const _props = defineProps({
   text: { type: [String, Number], required: false },
   title: { type: [String, Number], required: false },
   type: { type: null, required: false },
+  titleId: { type: String, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -237,14 +249,14 @@ const _props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false }
 });
-const props = useDefaults(_props);
 defineEmits(["click:append", "click:prepend", "update:active", "update:hover"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const attrs = useAttrs();
 const link = useLink(props, attrs);
-const { isHover, hoverState, hoverClasses, onMouseenter, onMouseleave } = useHover(props);
-const { isActive, activeState, activeClasses, onActive } = useActive(props);
+const root = ref();
+const { isOn: isHover, config: hoverState, classes: hoverClasses, set: onMouseenter, unset: onMouseleave } = useStateFlag(props, { state: "hover" });
+const { isOn: isActive, config: activeState, classes: activeClasses, toggle: onActive } = useStateFlag(props, { state: "active" });
 const flatForElevation = computed(() => props.elevation != null ? false : props.flat);
 const {
   colorClasses,
@@ -275,15 +287,34 @@ const {
   hasPrepend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const isClickable = computed(() => {
-  return !props.disabled && props.link && (props.link || link.isClickable.value);
+  return !props.disabled && (props.link || link.isClickable.value);
 });
+const isHoverable = computed(() => {
+  return !props.disabled && !props.flat;
+});
+const mouseenterHandler = computed(() => isHoverable.value ? onMouseenter : void 0);
+const mouseleaveHandler = computed(() => isHoverable.value ? onMouseleave : void 0);
 const handleClick = (event) => {
   onActive();
   if (isClickable.value && link.navigate) {
     link.navigate(event);
   }
 };
-const { loaderClasses, loaderConfig } = useLoader(props, "line");
+const cardRole = computed(() => {
+  return isClickable.value && !link.isLink.value ? "button" : void 0;
+});
+const cardTabindex = computed(() => {
+  if (props.disabled) return -1;
+  return isClickable.value && !link.isLink.value ? 0 : void 0;
+});
+const handleKeydown = (event) => {
+  if (!isClickable.value || link.isLink.value) return;
+  if (event.key === KEYBOARD_VALUES.ENTER || event.key === " ") {
+    event.preventDefault();
+    root.value?.click();
+  }
+};
+const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const slots = useSlots();
 const hasLoading = computed(() => {
   return slots.loader || loaderConfig.value.isActive;
@@ -352,7 +383,7 @@ const cardClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(cardStyles);
+const { id, css, load, isLoaded, unload } = useStyle(cardStyles, () => props.id);
 defineExpose({
   filterProps,
   css,