@xleddyl/443-components-vue 0.5.0 → 0.6.2

package/dist/components/data/FilterPills.vue

@@ -1,5 +1,6 @@
 <template>
    <div
+      ref="root"
       class="k-filter-pills"
       :class="`k-filter-pills-${size}`"
       role="group"
@@ -31,8 +32,9 @@
 </template>
 
 <script setup>
-import { computed, h, ref, watch } from "vue";
+import { computed, h, nextTick, ref, useTemplateRef, watch } from "vue";
 import { useLocale } from "../../composables/useLocale";
+import { hasFocusWithin } from "../../internal/core/focus";
 import Button from "../core/Button.vue";
 import DropdownMenu from "../overlays/DropdownMenu.vue";
 import Popover from "../overlays/Popover.vue";
@@ -79,8 +81,22 @@ function toggle(value) {
   if (active && props.required) return;
   setModel(active ? null : value);
 }
-function clear() {
+const root = useTemplateRef("root");
+async function clear() {
+  const group = root.value;
+  const hadFocus = hasFocusWithin(group);
   setModel(props.multiple ? [] : null);
+  if (!hadFocus || !group) return;
+  await nextTick();
+  if (hasFocusWithin(group)) return;
+  const pill = Array.from(group.querySelectorAll("button, [href]")).find(
+    (element) => !element.classList.contains("k-filter-pills-clear") && !element.hasAttribute("disabled") && element.getAttribute("aria-disabled") !== "true"
+  );
+  if (pill) pill.focus({ preventScroll: true });
+  else {
+    group.tabIndex = -1;
+    group.focus({ preventScroll: true });
+  }
 }
 function setPanel(value, open) {
   if (open) openPanel.value = value;

package/dist/components/data/Pagination.vue

@@ -28,15 +28,17 @@
          </span>
       </div>
       <nav class="k-pagination-nav" :aria-label="navLabel">
-         <Button
-            variant="ghost"
-            tone="neutral"
-            :size="buttonSize"
-            icon="chevron-left"
-            :disabled="disabled || page <= 1"
+         <button
+            type="button"
+            class="k-btn k-btn-neutral k-btn-ghost is-icon"
+            :class="`k-btn-${buttonSize}`"
+            :disabled="disabled"
+            :aria-disabled="!disabled && page <= 1 ? 'true' : void 0"
             :aria-label="previousText"
             @click="go(page - 1)"
-         />
+         >
+            <Icon name="chevron-left" />
+         </button>
          <ul v-if="!compact" role="list" class="k-pagination-list">
             <li v-for="item in items" :key="item.key">
                <span
@@ -51,7 +53,7 @@
                   type="button"
                   class="k-pagination-page"
                   :aria-current="item.value === page ? 'page' : void 0"
-                  :aria-label="`${pageText} ${item.value}`"
+                  :aria-label="pageText(item.value)"
                   :disabled="disabled"
                   @click="go(item.value)"
                >
@@ -60,15 +62,17 @@
             </li>
          </ul>
          <span v-else class="k-pagination-compact"> {{ page }} / {{ pageCount }} </span>
-         <Button
-            variant="ghost"
-            tone="neutral"
-            :size="buttonSize"
-            icon="chevron-right"
-            :disabled="disabled || page >= pageCount"
+         <button
+            type="button"
+            class="k-btn k-btn-neutral k-btn-ghost is-icon"
+            :class="`k-btn-${buttonSize}`"
+            :disabled="disabled"
+            :aria-disabled="!disabled && page >= pageCount ? 'true' : void 0"
             :aria-label="nextText"
             @click="go(page + 1)"
-         />
+         >
+            <Icon name="chevron-right" />
+         </button>
       </nav>
    </div>
 </template>
@@ -77,7 +81,7 @@
 import { computed, useId, watch } from "vue";
 import { paginationItems } from "../../internal/data/pagination";
 import { useLocale } from "../../composables/useLocale";
-import Button from "../core/Button.vue";
+import { translateOr } from "../../locale";
 import Icon from "../core/Icon.vue";
 const props = defineProps({
   total: { type: Number, required: true },
@@ -95,9 +99,11 @@ const props = defineProps({
   ofText: { type: String, required: false },
   emptyText: { type: String, required: false }
 });
-const { t } = useLocale();
+const { t, locale } = useLocale();
 const navLabel = computed(() => props.label ?? t("pagination.label"));
-const pageText = computed(() => props.pageLabel ?? t("pagination.page"));
+function pageText(value) {
+  return translateOr(locale.value, props.pageLabel, "pagination.page", { page: value });
+}
 const previousText = computed(() => props.previousLabel ?? t("pagination.previous"));
 const nextText = computed(() => props.nextLabel ?? t("pagination.next"));
 const pageSizeText = computed(() => props.pageSizeLabel ?? t("pagination.pageSize"));

package/dist/components/data/Pagination.vue.d.ts

@@ -29,6 +29,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -184,7 +185,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -241,6 +241,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -396,7 +397,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;

package/dist/components/data/SelectionBar.vue

@@ -3,8 +3,17 @@
       class="k-selection-bar"
       :class="[`k-selection-bar-${placement}`, { 'is-visible': visible }]"
    >
-      <span class="k-visually-hidden" role="status">{{ announcement }}</span>
-      <div v-if="visible" class="k-selection-bar-panel" role="group" :aria-label="labelText">
+      <span ref="status" class="k-visually-hidden" role="status" tabindex="-1">{{
+         announcement
+      }}</span>
+      <div
+         v-if="visible"
+         ref="panel"
+         class="k-selection-bar-panel"
+         role="group"
+         :aria-label="labelText"
+         @focusin="onFocusIn"
+      >
          <span class="k-selection-bar-count">
             <span class="k-selection-bar-dot" aria-hidden="true" />
             <slot name="count" :count="count" :total="total">{{ countText }}</slot>
@@ -37,8 +46,9 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from "vue";
 import { useLocale } from "../../composables/useLocale";
+import { hasFocusWithin } from "../../internal/core/focus";
 import Button from "../core/Button.vue";
 const props = defineProps({
   count: { type: Number, required: true },
@@ -78,4 +88,23 @@ watch(
   }
 );
 onMounted(() => mounted.value = true);
+const panel = useTemplateRef("panel");
+const status = useTemplateRef("status");
+let origin = null;
+function onFocusIn(event) {
+  const from = event.relatedTarget;
+  if (from instanceof HTMLElement && !panel.value?.contains(from)) origin = from;
+}
+watch(
+  visible,
+  async (isVisible) => {
+    if (isVisible) return;
+    if (!hasFocusWithin(panel.value)) return;
+    const target = origin;
+    await nextTick();
+    if (target?.isConnected && !target.closest("[inert]")) target.focus({ preventScroll: true });
+    else status.value?.focus({ preventScroll: true });
+  },
+  { flush: "pre" }
+);
 </script>

package/dist/components/data/Stat.vue

@@ -38,7 +38,8 @@
             >
                <Icon v-if="trend !== 'flat'" name="arrow-right" class="k-stat-delta-icon" />
                <span class="k-visually-hidden">{{ trendText }}</span>
-               {{ deltaText }}
+               {{ deltaText
+               }}<span v-if="favorText" class="k-visually-hidden">, {{ favorText }}</span>
             </span>
             <span v-if="hint" class="k-stat-hint">{{ hint }}</span>
             <slot name="footer" />
@@ -103,6 +104,11 @@ const deltaText = computed(() => {
   const sign = trend.value === "up" ? "+" : trend.value === "down" ? "-" : "";
   return `${sign}${absolute}${props.deltaSuffix}`;
 });
+const favorText = computed(() => {
+  if (resolvedTone.value === "positive") return t("stat.favorable");
+  if (resolvedTone.value === "negative") return t("stat.unfavorable");
+  return "";
+});
 const trendText = computed(() => {
   if (trend.value === "up") return props.increaseLabel ?? t("stat.increased");
   if (trend.value === "down") return props.decreaseLabel ?? t("stat.decreased");

package/dist/components/data/Stat.vue.d.ts

@@ -40,6 +40,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -198,7 +199,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
@@ -266,6 +266,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -424,7 +425,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];

package/dist/components/data/Table.vue

@@ -13,11 +13,12 @@
       :style="maxHeight ? { '--k-table-max-height': maxHeight } : void 0"
    >
       <div
+         ref="scroller"
          class="k-table-scroll"
-         :tabindex="regionLabelled ? 0 : void 0"
-         :role="regionLabelled ? 'region' : void 0"
-         :aria-labelledby="caption ? captionId : void 0"
-         :aria-label="caption ? void 0 : label"
+         :tabindex="scrollable ? 0 : void 0"
+         :role="isRegion ? 'region' : void 0"
+         :aria-labelledby="isRegion && caption ? captionId : void 0"
+         :aria-label="isRegion && !caption ? regionLabel : void 0"
       >
          <table class="k-table-el" :aria-busy="loading ? 'true' : void 0">
             <caption v-if="caption" :id="captionId" :class="{ 'k-visually-hidden': captionHidden }">
@@ -127,9 +128,24 @@
                         </label>
                      </td>
                      <td v-for="column in columns" :key="column.key" :class="cellClass(column)">
+                        <button
+                           v-if="column.key === linkColumnKey && clickOnly"
+                           type="button"
+                           class="k-table-link"
+                           @click.stop="emit('rowClick', row, index, $event)"
+                        >
+                           <slot
+                              :name="`cell-${column.key}`"
+                              :row="row"
+                              :value="cellValue(column, row)"
+                              :index="index"
+                              :column="column"
+                              >{{ cellText(column, row) }}</slot
+                           >
+                        </button>
                         <component
                            :is="rowLinks.get(row).is"
-                           v-if="column.key === linkColumnKey && rowLinks.has(row)"
+                           v-else-if="column.key === linkColumnKey && rowLinks.has(row)"
                            v-bind="rowLinks.get(row).attrs"
                            class="k-table-link"
                            @click.stop
@@ -158,12 +174,23 @@
             </tbody>
          </table>
       </div>
-      <span v-if="loading" role="status" class="k-visually-hidden">{{ loadingLabel }}</span>
+      <LiveRegion :message="loading ? loadingLabel : live.message.value" />
    </div>
 </template>
 
 <script setup>
-import { computed, getCurrentInstance, useId, useTemplateRef, watchEffect } from "vue";
+import {
+  computed,
+  getCurrentInstance,
+  onMounted,
+  ref,
+  useId,
+  useTemplateRef,
+  watchEffect
+} from "vue";
+import { useResizeObserver } from "../../internal/core/resize";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
+import { useLiveMessage } from "../../internal/core/live";
 import { useLinkResolver } from "../../internal/core/link";
 import { readColumn } from "../../internal/data/rows";
 import { rowDelay } from "../../internal/data/stagger";
@@ -203,15 +230,26 @@ const captionId = useId();
 const { resolveLink } = useLinkResolver();
 const instance = getCurrentInstance();
 const headCheck = useTemplateRef("headCheck");
-const regionLabelled = computed(() => Boolean(props.caption || props.label));
+const live = useLiveMessage();
+const scroller = useTemplateRef("scroller");
+const scrollable = ref(false);
+const isRegion = computed(() => scrollable.value || Boolean(props.label));
+const regionLabel = computed(() => props.label ?? t("table.label"));
+function measure() {
+  const element = scroller.value;
+  if (!element) return;
+  scrollable.value = element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1;
+}
+onMounted(measure);
+useResizeObserver(() => [scroller.value, scroller.value?.firstElementChild], measure);
 const hasWidths = computed(() => props.columns.some((column) => column.width));
 const colspan = computed(() => props.columns.length + (props.selectable ? 1 : 0));
 const linkColumnKey = computed(() => props.linkKey ?? props.columns[0]?.key);
-const rowsInteractive = computed(
-  () => Boolean(
-    props.rowTo || instance?.vnode.props?.onRowClick || instance?.vnode.props?.["onRow-click"]
-  )
+const hasRowClick = computed(
+  () => Boolean(instance?.vnode.props?.onRowClick || instance?.vnode.props?.["onRow-click"])
 );
+const rowsInteractive = computed(() => Boolean(props.rowTo || hasRowClick.value));
+const clickOnly = computed(() => !props.rowTo && hasRowClick.value);
 function keyOf(row, index) {
   if (typeof props.rowKey === "function") return props.rowKey(row, index);
   const value = row[props.rowKey];
@@ -247,8 +285,7 @@ function cellClass(column) {
   ];
 }
 function ariaSort(column) {
-  if (!column.sortable) return void 0;
-  if (sort.value?.key !== column.key) return "none";
+  if (!column.sortable || sort.value?.key !== column.key) return void 0;
   return sort.value.direction === "asc" ? "ascending" : "descending";
 }
 function sortIcon(column) {
@@ -259,6 +296,17 @@ function toggleSort(column) {
   if (sort.value?.key !== column.key) sort.value = { key: column.key, direction: "asc" };
   else if (sort.value.direction === "asc") sort.value = { key: column.key, direction: "desc" };
   else sort.value = null;
+  const current = sort.value;
+  if (!current) {
+    live.announce(t("table.sortCleared"));
+    return;
+  }
+  live.announce(
+    t("table.sortedBy", {
+      column: column.label ?? column.key,
+      direction: t(current.direction === "asc" ? "table.ascending" : "table.descending")
+    })
+  );
 }
 const selectedSet = computed(() => new Set(selected.value));
 function isSelected(row, index) {

package/dist/components/data/Tag.vue

@@ -1,5 +1,6 @@
 <template>
    <span
+      ref="root"
       class="k-tag"
       :class="[
   `k-tag-${tone}`,
@@ -27,8 +28,10 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, useTemplateRef } from "vue";
+import { hasFocusWithin, neighborFocusTarget } from "../../internal/core/focus";
 import { useLocale } from "../../composables/useLocale";
+import { formatLocaleMessage } from "../../locale";
 import Icon from "../core/Icon.vue";
 const props = defineProps({
   label: { type: String, required: false },
@@ -39,9 +42,24 @@ const props = defineProps({
   removeLabel: { type: String, required: false },
   disabled: { type: Boolean, required: false }
 });
-const { t } = useLocale();
+const { t, locale } = useLocale();
+const root = useTemplateRef("root");
 const emit = defineEmits(["remove"]);
+function focusTarget(element) {
+  const parent = element.parentElement;
+  const buttons = parent ? Array.from(
+    parent.querySelectorAll(
+      ":scope > .k-tag > .k-tag-remove:not(:disabled)"
+    )
+  ).filter((button) => !element.contains(button)) : [];
+  const after = buttons.find(
+    (button) => element.compareDocumentPosition(button) & Node.DOCUMENT_POSITION_FOLLOWING
+  );
+  return after ?? buttons[buttons.length - 1] ?? neighborFocusTarget(element);
+}
 function onRemove() {
+  const element = root.value;
+  if (element && hasFocusWithin(element)) focusTarget(element)?.focus({ preventScroll: true });
   emit("remove");
 }
 function onKeydown(event) {
@@ -50,7 +68,9 @@ function onKeydown(event) {
   onRemove();
 }
 const removeText = computed(() => {
-  const action = props.removeLabel ?? t("common.remove");
-  return props.label ? `${action} ${props.label}` : action;
+  const label = props.label ?? "";
+  if (props.removeLabel)
+    return formatLocaleMessage(locale.value.code, props.removeLabel, { label });
+  return label ? t("common.removeItem", { label }) : t("common.remove");
 });
 </script>

package/dist/components/data/Tag.vue.d.ts

@@ -19,6 +19,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -174,7 +175,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -221,6 +221,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -376,7 +377,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -410,8 +410,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }> & Readonly<{
     onRemove?: (() => any) | undefined;
 }>, {
-    size: BadgeSize;
     tone: Tone;
+    size: BadgeSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/data/Timeline.vue

@@ -14,7 +14,11 @@
          <div class="k-timeline-content">
             <slot name="item" :item="item" :index="index">
                <div class="k-timeline-head">
-                  <span class="k-timeline-title">{{ item.title }}</span>
+                  <span class="k-timeline-title"
+                     ><span v-if="toneText(item.tone)" class="k-visually-hidden"
+                        >{{ toneText(item.tone) }}: </span
+                     >{{ item.title }}</span
+                  >
                   <time v-if="item.time" class="k-timeline-time" :datetime="item.datetime">{{
                      item.time
                   }}</time>
@@ -29,10 +33,17 @@
 </template>
 
 <script setup>
+import { useLocale } from "../../composables/useLocale";
 import Icon from "../core/Icon.vue";
 import { rowDelay } from "../../internal/data/stagger";
 defineProps({
   items: { type: Array, required: true },
   compact: { type: Boolean, required: false }
 });
+const { t } = useLocale();
+function toneText(tone) {
+  if (tone === "danger" || tone === "warning" || tone === "info" || tone === "success")
+    return t(`tone.${tone}`);
+  return "";
+}
 </script>