origam 2.2.1 → 2.3.0

package/dist/src/components/CommandPalette/OrigamCommandPalette.vue

@@ -0,0 +1,614 @@
+<template>
+	<teleport to="body">
+		<transition name="origam-command-palette--fade">
+			<div
+					v-if="isActive"
+					ref="rootRef"
+					:class="rootClasses"
+					:style="rootStyles"
+					:data-cy="dataCy"
+					@click.self="handleBackdropClick"
+					@keydown="handleKeydown"
+			>
+				<div
+						ref="dialogRef"
+						:aria-labelledby="inputId"
+						:class="dialogClasses"
+						:style="dialogStyles"
+						aria-modal="true"
+						role="dialog"
+						tabindex="-1"
+				>
+					<div class="origam-command-palette__search">
+						<origam-icon
+								:icon="MDI_ICONS.MAGNIFY"
+								:size="20"
+								aria-hidden="true"
+								class="origam-command-palette__search-icon"
+						/>
+						<input
+								:id="inputId"
+								ref="inputRef"
+								v-model="query"
+								:aria-activedescendant="activeOptionId"
+								:aria-controls="listboxId"
+								:aria-expanded="String(hasResults)"
+								:placeholder="placeholder"
+								aria-autocomplete="list"
+								autocomplete="off"
+								class="origam-command-palette__input"
+								role="combobox"
+								spellcheck="false"
+								type="text"
+								@input="handleInput"
+								@keydown.down.prevent="moveActive(1)"
+								@keydown.up.prevent="moveActive(-1)"
+								@keydown.enter.prevent="handleEnter"
+								@keydown.escape.prevent="handleEscape"
+						/>
+					</div>
+
+					<div
+							:id="listboxId"
+							:aria-label="placeholder"
+							:style="listStyles"
+							class="origam-command-palette__list"
+							role="listbox"
+					>
+						<div
+								v-if="loading"
+								class="origam-command-palette__loading"
+						>
+							<origam-icon
+									:icon="MDI_ICONS.LOADING"
+									:size="20"
+									class="origam-command-palette__loading-icon"
+							/>
+						</div>
+
+						<template
+								v-else-if="hasResults"
+						>
+							<template
+									v-for="group in groupedResults"
+									:key="group.label || '__default__'"
+							>
+								<div
+										v-if="group.label"
+										class="origam-command-palette__group-title"
+								>
+									{{ group.label }}
+								</div>
+
+								<button
+										v-for="entry in group.items"
+										:id="optionDomId(entry.command.id)"
+										:key="entry.command.id"
+										:aria-disabled="entry.command.disabled ? 'true' : 'false'"
+										:aria-selected="entry.command.id === activeCommandId ? 'true' : 'false'"
+										:class="itemClasses(entry.command)"
+										:disabled="entry.command.disabled"
+										role="option"
+										tabindex="-1"
+										type="button"
+										@click="handleItemClick(entry.command)"
+										@mousemove="handleItemHover(entry.command)"
+								>
+									<slot
+											name="item"
+											v-bind="{ command: entry.command, isActive: entry.command.id === activeCommandId }"
+									>
+										<origam-icon
+												v-if="entry.command.icon"
+												:icon="entry.command.icon"
+												:size="18"
+												class="origam-command-palette__item-icon"
+										/>
+
+										<span class="origam-command-palette__item-text">
+											<span class="origam-command-palette__item-label">{{ entry.command.label }}</span>
+											<span
+													v-if="entry.command.description"
+													class="origam-command-palette__item-description"
+											>
+												{{ entry.command.description }}
+											</span>
+										</span>
+
+										<origam-kbd
+												v-if="entry.command.kbd && entry.command.kbd.length > 0"
+												:combination="[...entry.command.kbd]"
+												class="origam-command-palette__item-kbd"
+												variant="outlined"
+										/>
+									</slot>
+								</button>
+							</template>
+						</template>
+
+						<div
+								v-else
+								class="origam-command-palette__empty"
+						>
+							<slot name="empty">
+								{{ emptyText }}
+							</slot>
+						</div>
+					</div>
+
+					<div
+							v-if="slots.footer || hasDefaultFooter"
+							class="origam-command-palette__footer"
+					>
+						<slot name="footer">
+							<span class="origam-command-palette__footer-hint">
+								<origam-kbd :combination="['arrowup', 'arrowdown']" variant="tonal"/>
+								{{ navigateText }}
+							</span>
+							<span class="origam-command-palette__footer-hint">
+								<origam-kbd :combination="['enter']" variant="tonal"/>
+								{{ selectText }}
+							</span>
+							<span class="origam-command-palette__footer-hint">
+								<origam-kbd :combination="['esc']" variant="tonal"/>
+								{{ closeText }}
+							</span>
+						</slot>
+					</div>
+				</div>
+			</div>
+		</transition>
+	</teleport>
+</template>
+
+<script setup>
+import { computed, nextTick, ref, StyleValue, useSlots, watch } from "vue";
+import { OrigamIcon, OrigamKbd } from "../../components";
+import { useCommand } from "../../composables/CommandPalette/command.composable";
+import { useHotkey } from "../../composables/Commons/hotkey.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import {
+  COMMAND_PALETTE_DEFAULT_HOTKEY,
+  COMMAND_PALETTE_DEFAULT_MAX_HEIGHT,
+  COMMAND_PALETTE_DEFAULT_WIDTH,
+  IN_BROWSER
+} from "../../consts";
+import { MDI_ICONS } from "../../enums";
+import { getUid } from "../../utils";
+import { fuzzyMatch } from "../../utils/CommandPalette/fuzzy-match.util";
+const props = defineProps({
+  modelValue: { type: Boolean, required: false, default: false },
+  hotkey: { type: [Array, null], required: false, default: () => COMMAND_PALETTE_DEFAULT_HOTKEY },
+  commands: { type: Array, required: false },
+  placeholder: { type: String, required: false, default: "Search\u2026" },
+  emptyText: { type: String, required: false, default: "No results" },
+  maxHeight: { type: [Number, String], required: false, default: COMMAND_PALETTE_DEFAULT_MAX_HEIGHT },
+  width: { type: [Number, String], required: false, default: COMMAND_PALETTE_DEFAULT_WIDTH },
+  loading: { type: Boolean, required: false, default: false },
+  closeOnSelect: { type: Boolean, required: false, default: true },
+  closeOnEscape: { type: Boolean, required: false, default: true },
+  closeOnBackdrop: { type: Boolean, required: false, default: true },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
+});
+const emit = defineEmits(["update:modelValue", "select", "query"]);
+defineSlots();
+const slots = useSlots();
+const isActive = useVModel(props, "modelValue");
+const { commands: registryCommands, isOpen: registryOpen } = useCommand();
+watch(registryOpen, (next) => {
+  if (next !== isActive.value) isActive.value = next;
+});
+watch(isActive, (next) => {
+  if (next !== registryOpen.value) registryOpen.value = next;
+});
+const uid = getUid();
+const inputId = computed(() => `origam-command-palette-input-${uid}`);
+const listboxId = computed(() => `origam-command-palette-listbox-${uid}`);
+const dataCy = computed(() => "origam-command-palette");
+const rootRef = ref();
+const dialogRef = ref();
+const inputRef = ref();
+const normalizedHotkeys = computed(() => {
+  const raw = props.hotkey;
+  if (!raw) return [];
+  if (raw.length === 0) return [];
+  if (Array.isArray(raw[0])) {
+    return raw;
+  }
+  return [raw];
+});
+const toggle = () => {
+  isActive.value = !isActive.value;
+};
+if (IN_BROWSER) {
+  const installed = [];
+  watch(normalizedHotkeys, (next) => {
+    while (installed.length > 0) {
+      const dispose = installed.pop();
+      try {
+        dispose?.();
+      } catch {
+      }
+    }
+    next.forEach((combo) => {
+      const keysAsString = combo.join("+");
+      const cleanup = useHotkey(keysAsString, () => toggle());
+      installed.push(cleanup);
+    });
+  }, { immediate: true });
+}
+const sourceCommands = computed(() => {
+  if (props.commands && props.commands.length > 0) return props.commands;
+  return registryCommands.value;
+});
+const query = ref("");
+const filtered = computed(() => {
+  return fuzzyMatch(sourceCommands.value, query.value, (cmd) => ({
+    label: cmd.label,
+    haystack: [
+      cmd.label,
+      ...cmd.keywords ?? [],
+      cmd.description ?? ""
+    ].join(" ")
+  }));
+});
+const hasResults = computed(() => filtered.value.length > 0);
+const groupedResults = computed(() => {
+  if (query.value.trim().length > 0) {
+    return [{ label: null, items: filtered.value }];
+  }
+  const buckets = /* @__PURE__ */ new Map();
+  const order = [];
+  filtered.value.forEach((entry) => {
+    const key = entry.item.group ?? null;
+    if (!buckets.has(key)) {
+      buckets.set(key, []);
+      order.push(key);
+    }
+    buckets.get(key).push(entry);
+  });
+  return order.map((key) => ({
+    label: key,
+    items: buckets.get(key) ?? []
+  }));
+});
+const flatResults = computed(() => {
+  const flat = [];
+  groupedResults.value.forEach((g) => {
+    g.items.forEach((entry) => flat.push(entry.item));
+  });
+  return flat;
+});
+const activeIndex = ref(0);
+const activeCommandId = computed(() => {
+  return flatResults.value[activeIndex.value]?.id;
+});
+const activeOptionId = computed(() => {
+  if (!activeCommandId.value) return void 0;
+  return optionDomId(activeCommandId.value);
+});
+function optionDomId(commandId) {
+  return `origam-command-palette-option-${uid}-${commandId}`;
+}
+watch(filtered, () => {
+  activeIndex.value = 0;
+  nextTick(() => scrollActiveIntoView());
+});
+function moveActive(delta) {
+  const len = flatResults.value.length;
+  if (len === 0) return;
+  let next = activeIndex.value;
+  for (let i = 0; i < len; i++) {
+    next = (next + delta + len) % len;
+    if (!flatResults.value[next].disabled) break;
+  }
+  activeIndex.value = next;
+  nextTick(() => scrollActiveIntoView());
+}
+function scrollActiveIntoView() {
+  if (!IN_BROWSER) return;
+  const id = activeCommandId.value;
+  if (!id) return;
+  const el = document.getElementById(optionDomId(id));
+  el?.scrollIntoView({ block: "nearest" });
+}
+async function selectCommand(cmd) {
+  if (cmd.disabled) return;
+  emit("select", cmd);
+  try {
+    await cmd.perform();
+  } finally {
+    if (props.closeOnSelect) {
+      isActive.value = false;
+    }
+  }
+}
+function handleItemClick(cmd) {
+  void selectCommand(cmd);
+}
+function handleItemHover(cmd) {
+  const idx = flatResults.value.findIndex((item) => item.id === cmd.id);
+  if (idx !== -1) activeIndex.value = idx;
+}
+function handleEnter() {
+  const cmd = flatResults.value[activeIndex.value];
+  if (cmd) void selectCommand(cmd);
+}
+function handleEscape() {
+  if (props.closeOnEscape) isActive.value = false;
+}
+function handleBackdropClick() {
+  if (props.closeOnBackdrop) isActive.value = false;
+}
+function handleKeydown(e) {
+  if (e.key === "Tab") {
+    e.preventDefault();
+    inputRef.value?.focus();
+  }
+}
+function handleInput() {
+  emit("query", query.value);
+}
+let returnFocusEl = null;
+watch(isActive, async (next) => {
+  if (next) {
+    if (IN_BROWSER) {
+      returnFocusEl = document.activeElement;
+    }
+    query.value = "";
+    activeIndex.value = 0;
+    await nextTick();
+    inputRef.value?.focus({ preventScroll: true });
+  } else {
+    returnFocusEl?.focus?.({ preventScroll: true });
+    returnFocusEl = null;
+  }
+});
+const navigateText = "Navigate";
+const selectText = "Select";
+const closeText = "Close";
+const hasDefaultFooter = computed(() => true);
+function itemClasses(cmd) {
+  return [
+    "origam-command-palette__item",
+    {
+      "origam-command-palette__item--active": cmd.id === activeCommandId.value,
+      "origam-command-palette__item--disabled": cmd.disabled
+    }
+  ];
+}
+function toUnit(value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return `${value}px`;
+  return value;
+}
+const rootClasses = computed(() => {
+  return [
+    "origam-command-palette",
+    props.class
+  ];
+});
+const rootStyles = computed(() => {
+  return [props.style];
+});
+const dialogClasses = computed(() => {
+  return ["origam-command-palette__dialog"];
+});
+const dialogStyles = computed(() => {
+  return [
+    { "--origam-command-palette---width": toUnit(props.width) }
+  ];
+});
+const listStyles = computed(() => {
+  return [
+    { "--origam-command-palette---max-height": toUnit(props.maxHeight) }
+  ];
+});
+defineExpose({
+  query,
+  filtered,
+  activeIndex,
+  isActive
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-command-palette {
+		position: fixed;
+		inset: 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: flex-start;
+		padding-top: var(--origam-command-palette---padding-top, 18vh);
+		z-index: var(--origam-command-palette---z-index, 2500);
+		background-color: var(--origam-command-palette--backdrop---background-color, rgba(0, 0, 0, 0.45));
+		backdrop-filter: var(--origam-command-palette--backdrop---backdrop-filter, blur(6px));
+
+		&__dialog {
+			display: flex;
+			flex-direction: column;
+			width: min(var(--origam-command-palette---width, 640px), calc(100vw - 32px));
+			max-height: calc(100vh - 96px);
+			background-color: var(--origam-command-palette---background-color, var(--origam-color__surface---elevated, #fff));
+			border: var(--origam-command-palette---border-width, 1px) solid var(--origam-command-palette---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12)));
+			border-radius: var(--origam-command-palette---border-radius, 12px);
+			box-shadow: var(--origam-command-palette---box-shadow, 0 24px 48px rgba(0, 0, 0, 0.18));
+			overflow: hidden;
+			color: var(--origam-command-palette---color, var(--origam-color__text---primary, #171717));
+		}
+
+		&__search {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			padding: var(--origam-command-palette__input---padding, 12px 16px);
+			border-bottom: 1px solid var(--origam-command-palette__input---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.08)));
+		}
+
+		&__search-icon {
+			flex: 0 0 auto;
+			color: var(--origam-command-palette__input---icon-color, var(--origam-color__text---secondary, rgba(0, 0, 0, 0.55)));
+		}
+
+		&__input {
+			flex: 1 1 auto;
+			background: transparent;
+			border: 0;
+			outline: none;
+			color: inherit;
+			font: inherit;
+			font-size: var(--origam-command-palette__input---font-size, 1rem);
+			padding: 0;
+
+			&::placeholder {
+				color: var(--origam-command-palette__input---placeholder-color, var(--origam-color__text---tertiary, rgba(0, 0, 0, 0.4)));
+			}
+		}
+
+		&__list {
+			max-height: var(--origam-command-palette---max-height, 480px);
+			overflow-y: auto;
+			padding: var(--origam-command-palette__list---padding, 6px);
+		}
+
+		&__group-title {
+			padding: var(--origam-command-palette__group-title---padding, 10px 12px 6px);
+			color: var(--origam-command-palette__group-title---color, var(--origam-color__text---secondary, rgba(0, 0, 0, 0.55)));
+			font-size: var(--origam-command-palette__group-title---font-size, 0.75rem);
+			text-transform: uppercase;
+			letter-spacing: 0.04em;
+			font-weight: 600;
+			user-select: none;
+		}
+
+		&__item {
+			display: flex;
+			align-items: center;
+			gap: 12px;
+			width: 100%;
+			background: transparent;
+			border: 0;
+			text-align: start;
+			cursor: pointer;
+			color: inherit;
+			font: inherit;
+			padding: var(--origam-command-palette__item---padding, 8px 12px);
+			min-height: var(--origam-command-palette__item---height, 40px);
+			border-radius: var(--origam-command-palette__item---border-radius, 8px);
+			background-color: var(--origam-command-palette__item---background-color, transparent);
+			transition: background-color 80ms ease;
+
+			&--active {
+				background-color: var(--origam-command-palette__item---background-color-active, var(--origam-color__action--neutral---bgSubtle, rgba(0, 0, 0, 0.06)));
+				color: var(--origam-command-palette__item---color-active, var(--origam-color__text---primary, #171717));
+			}
+
+			&--disabled {
+				cursor: not-allowed;
+				opacity: 0.45;
+			}
+
+			&:focus-visible {
+				outline: 2px solid currentColor;
+				outline-offset: 2px;
+			}
+		}
+
+		&__item-icon {
+			flex: 0 0 auto;
+			color: var(--origam-command-palette__item---icon-color, var(--origam-color__text---secondary, rgba(0, 0, 0, 0.6)));
+		}
+
+		&__item-text {
+			display: flex;
+			flex-direction: column;
+			gap: 2px;
+			flex: 1 1 auto;
+			min-width: 0;
+		}
+
+		&__item-label {
+			font-weight: 500;
+			line-height: 1.3;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		&__item-description {
+			font-size: 0.8125rem;
+			color: var(--origam-command-palette__item---description-color, var(--origam-color__text---secondary, rgba(0, 0, 0, 0.55)));
+			line-height: 1.2;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		&__item-kbd {
+			flex: 0 0 auto;
+			margin-inline-start: auto;
+			gap: var(--origam-command-palette__item-kbd---gap, 4px);
+		}
+
+		&__empty {
+			padding: 32px 16px;
+			text-align: center;
+			color: var(--origam-command-palette__empty---color, var(--origam-color__text---secondary, rgba(0, 0, 0, 0.55)));
+			font-size: 0.875rem;
+		}
+
+		&__loading {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			padding: 24px;
+		}
+
+		&__loading-icon {
+			animation: origam-command-palette-spin 800ms linear infinite;
+		}
+
+		&__footer {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			gap: 16px;
+			padding: var(--origam-command-palette__footer---padding, 8px 12px);
+			border-top: 1px solid var(--origam-command-palette__footer---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.08)));
+			color: var(--origam-command-palette__footer---color, var(--origam-color__text---secondary, rgba(0, 0, 0, 0.55)));
+			font-size: 0.75rem;
+		}
+
+		&__footer-hint {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+		}
+	}
+
+	@keyframes origam-command-palette-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.origam-command-palette--fade-enter-active,
+	.origam-command-palette--fade-leave-active {
+		transition: opacity 140ms ease;
+	}
+
+	.origam-command-palette--fade-enter-from,
+	.origam-command-palette--fade-leave-to {
+		opacity: 0;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.origam-command-palette--fade-enter-active,
+		.origam-command-palette--fade-leave-active {
+			transition: opacity 60ms ease;
+		}
+	}
+</style>

package/dist/src/components/CommandPalette/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamCommandPalette", {
+  enumerable: true,
+  get: function () {
+    return _OrigamCommandPalette.default;
+  }
+});
+var _OrigamCommandPalette = _interopRequireDefault(require("./OrigamCommandPalette.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/CommandPalette/index.d.ts

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

package/dist/src/components/CommandPalette/index.js

@@ -0,0 +1 @@
+export { default as OrigamCommandPalette } from "./OrigamCommandPalette.vue";

package/dist/src/components/DatePickerField/OrigamDatePickerField.vue

@@ -210,6 +210,7 @@ const props = defineProps({
   role: { type: String, required: false },
   type: { type: null, required: false, default: TEXT_FIELD_TYPE.TEXT },
   modelModifiers: { type: [String, Boolean], required: false },
+  mask: { type: null, required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },