origam 0.3.10 → 2.3.0

package/dist/src/components/Treeview/OrigamTreeview.vue

@@ -0,0 +1,210 @@
+<template>
+	<div
+			:id="id"
+			:class="treeviewClasses"
+			:style="treeviewStyles"
+			role="tree"
+			:aria-label="ariaLabel || 'File tree'"
+			:aria-multiselectable="selectMode === 'multiple' || undefined"
+			@keydown="handleKeydown"
+	>
+		<origam-treeview-node
+				v-for="node in items"
+				:key="node.id"
+				:node="node"
+				:depth="0"
+				:data-cy="`treeview-node-${node.id}`"
+		/>
+	</div>
+</template>
+
+<script setup>
+import { computed, provide, ref, watch } from "vue";
+import { OrigamTreeviewNode } from "../../components";
+import { ORIGAM_TREEVIEW_KEY } from "../../consts";
+import { DENSITY, SIZES } from "../../enums";
+import {
+  useDensity,
+  useProps,
+  useSize,
+  useStateEffect,
+  useStyle
+} from "../../composables";
+const props = defineProps({
+  items: { type: Array, required: true },
+  modelValue: { type: [Array, String], required: false },
+  expandedValue: { type: Array, required: false },
+  selectMode: { type: String, required: false, default: "none" },
+  selectableNodes: { type: String, required: false, default: "leaf" },
+  showLines: { type: Boolean, required: false, default: true },
+  expandOnClick: { type: Boolean, required: false, default: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  size: { type: null, required: false, default: SIZES.DEFAULT },
+  density: { type: null, required: false, default: DENSITY.DEFAULT },
+  ariaLabel: { type: String, required: false, default: void 0 }
+});
+const emit = defineEmits(["update:modelValue", "update:expandedValue", "select", "toggle"]);
+const { filterProps } = useProps(props);
+const expandedSet = ref(new Set(props.expandedValue ?? []));
+watch(
+  () => props.expandedValue,
+  (val) => {
+    if (val) {
+      expandedSet.value = new Set(val);
+    }
+  }
+);
+const toSelectedSet = (v) => {
+  if (!v) return /* @__PURE__ */ new Set();
+  if (Array.isArray(v)) return new Set(v);
+  return /* @__PURE__ */ new Set([v]);
+};
+const selectedSet = ref(toSelectedSet(props.modelValue));
+watch(
+  () => props.modelValue,
+  (val) => {
+    selectedSet.value = toSelectedSet(val);
+  }
+);
+const toggleExpanded = (id2) => {
+  const next = new Set(expandedSet.value);
+  const nowExpanded = !next.has(id2);
+  if (nowExpanded) {
+    next.add(id2);
+  } else {
+    next.delete(id2);
+  }
+  expandedSet.value = next;
+  emit("update:expandedValue", Array.from(next));
+  emit("toggle", id2, nowExpanded);
+};
+const toggleSelected = (id2) => {
+  const mode = props.selectMode;
+  if (mode === "none") return;
+  const next = new Set(selectedSet.value);
+  if (mode === "single") {
+    if (next.has(id2)) {
+      next.clear();
+    } else {
+      next.clear();
+      next.add(id2);
+    }
+    selectedSet.value = next;
+    emit("update:modelValue", next.size === 1 ? Array.from(next)[0] : "");
+  } else {
+    if (next.has(id2)) {
+      next.delete(id2);
+    } else {
+      next.add(id2);
+    }
+    selectedSet.value = next;
+    emit("update:modelValue", Array.from(next));
+  }
+  emit("select", id2);
+};
+const isExpanded = (id2) => expandedSet.value.has(id2);
+const isSelected = (id2) => selectedSet.value.has(id2);
+provide(ORIGAM_TREEVIEW_KEY, {
+  toggleExpanded,
+  toggleSelected,
+  isExpanded,
+  isSelected,
+  selectMode: computed(() => props.selectMode ?? "none"),
+  selectableNodes: computed(() => props.selectableNodes ?? "leaf"),
+  showLines: computed(() => props.showLines !== false),
+  expandOnClick: computed(() => props.expandOnClick === true),
+  color: computed(() => {
+    const c = props.color;
+    return typeof c === "string" ? c : void 0;
+  })
+});
+const handleKeydown = (e) => {
+  const tree = e.currentTarget;
+  const rows = Array.from(
+    tree.querySelectorAll('[role="treeitem"]:not([aria-disabled="true"])')
+  );
+  const focused = document.activeElement;
+  const idx = rows.findIndex((r) => r === focused || r.contains(focused));
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    rows[Math.min(idx + 1, rows.length - 1)]?.focus();
+  } else if (e.key === "ArrowUp") {
+    e.preventDefault();
+    rows[Math.max(idx - 1, 0)]?.focus();
+  }
+};
+const { colorClasses, colorStyles } = useStateEffect(props);
+const { densityClasses } = useDensity(props);
+const { sizeClasses } = useSize(props);
+const treeviewStyles = computed(() => {
+  return [colorStyles.value, props.style];
+});
+const treeviewClasses = computed(() => [
+  "origam-treeview",
+  colorClasses.value,
+  hoverState,
+  activeState,
+  densityClasses.value,
+  sizeClasses.value,
+  props.class
+]);
+const { id, css, load, isLoaded, unload } = useStyle(treeviewStyles);
+defineExpose({
+  filterProps,
+  isExpanded,
+  isSelected,
+  toggleExpanded,
+  toggleSelected,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-treeview {
+		background-color: var(--origam-treeview---background-color, var(--origam-color__surface---default));
+		color: var(--origam-treeview---color, var(--origam-color__text---primary));
+		padding-block: var(--origam-treeview---padding-block, 4px);
+		padding-inline: var(--origam-treeview---padding-inline, 8px);
+		outline: none;
+		width: 100%;
+		box-sizing: border-box;
+
+		&:focus-within {
+			outline: none;
+		}
+
+		&--size-x-small {
+			--origam-treeview---label-font-size: var(--origam-font__size---xs, 0.625rem);
+		}
+
+		&--size-small {
+			--origam-treeview---label-font-size: var(--origam-font__size---sm, 0.75rem);
+		}
+
+		&--size-large {
+			--origam-treeview---row-height: 40px;
+		}
+
+		&--size-x-large {
+			--origam-treeview---row-height: 48px;
+		}
+
+		&--density-compact {
+			--origam-treeview---row-height: 24px;
+			--origam-treeview---padding-block: 2px;
+		}
+
+		&--density-comfortable {
+			--origam-treeview---row-height: 40px;
+			--origam-treeview---padding-block: 6px;
+		}
+	}
+</style>

package/dist/src/components/Treeview/OrigamTreeviewNode.vue

@@ -0,0 +1,322 @@
+<template>
+	<div
+			:class="nodeWrapperClasses"
+			role="none"
+	>
+		<div
+				:class="rowClasses"
+				:style="rowStyles"
+				role="treeitem"
+				:aria-expanded="hasChildren ? isNodeExpanded : undefined"
+				:aria-selected="isSelectable ? isNodeSelected : undefined"
+				:aria-disabled="node.disabled || undefined"
+				:aria-label="node.label"
+				:tabindex="node.disabled ? -1 : 0"
+				:data-cy="`treeview-row-${node.id}`"
+				@click="handleRowClick"
+				@keydown="handleKeydown"
+		>
+			<template v-if="depth > 0 && treeview?.showLines.value">
+				<span
+						v-for="level in depth"
+						:key="level"
+						class="origam-treeview-node__guide"
+						aria-hidden="true"
+				/>
+			</template>
+
+			<span
+					:class="chevronClasses"
+					aria-hidden="true"
+					@click.stop="handleChevronClick"
+			>
+				<template v-if="hasChildren">
+					&#8250;
+				</template>
+			</span>
+
+			<span
+					v-if="node.icon || hasChildren"
+					class="origam-treeview-node__icon"
+					aria-hidden="true"
+			>
+				<template v-if="node.icon">{{ node.icon }}</template>
+				<template v-else-if="hasChildren">
+					{{ isNodeExpanded ? '📂' : '📁' }}
+				</template>
+				<template v-else>📄</template>
+			</span>
+
+			<span class="origam-treeview-node__label">{{ node.label }}</span>
+
+			<span
+					v-if="node.size"
+					class="origam-treeview-node__size"
+			>{{ node.size }}</span>
+		</div>
+
+		<slot
+				name="node"
+				:node="node"
+				:depth="depth"
+				:is-expanded="isNodeExpanded"
+				:is-selected="isNodeSelected"
+		/>
+
+		<div
+				v-if="isNodeExpanded && hasChildren"
+				class="origam-treeview-node__children"
+				role="group"
+				:aria-label="`${node.label} contents`"
+		>
+			<origam-treeview-node
+					v-for="child in node.children"
+					:key="child.id"
+					:node="child"
+					:depth="(depth ?? 0) + 1"
+					:data-cy="`treeview-node-${child.id}`"
+			>
+				<template
+						v-if="hasNodeSlot"
+						#node="slotProps"
+				>
+					<slot
+							name="node"
+							v-bind="slotProps"
+					/>
+				</template>
+			</origam-treeview-node>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { computed, inject, useSlots } from "vue";
+import { ORIGAM_TREEVIEW_KEY } from "../../consts";
+import {
+  useProps,
+  useStyle
+} from "../../composables";
+defineOptions({ name: "OrigamTreeviewNode" });
+const props = defineProps({
+  node: { type: Object, required: true },
+  depth: { type: Number, required: false, default: 0 },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
+});
+const { filterProps } = useProps(props);
+const slots = useSlots();
+const hasNodeSlot = computed(() => !!slots.node);
+const treeview = inject(ORIGAM_TREEVIEW_KEY);
+const hasChildren = computed(() => {
+  if (props.node.expandable !== void 0) return props.node.expandable;
+  return !!(props.node.children && props.node.children.length > 0);
+});
+const isLeaf = computed(() => !hasChildren.value);
+const isSelectable = computed(() => {
+  if (props.node.disabled) return false;
+  const mode = treeview?.selectMode.value ?? "none";
+  if (mode === "none") return false;
+  const selectableNodes = treeview?.selectableNodes.value ?? "leaf";
+  if (selectableNodes === "leaf") return isLeaf.value;
+  return true;
+});
+const isNodeExpanded = computed(() => treeview?.isExpanded(props.node.id) ?? false);
+const isNodeSelected = computed(() => treeview?.isSelected(props.node.id) ?? false);
+const handleChevronClick = () => {
+  if (!hasChildren.value || props.node.disabled) return;
+  treeview?.toggleExpanded(props.node.id);
+};
+const handleRowClick = () => {
+  if (props.node.disabled) return;
+  if (treeview?.expandOnClick.value === true && hasChildren.value) {
+    treeview.toggleExpanded(props.node.id);
+  }
+  if (isSelectable.value) {
+    treeview?.toggleSelected(props.node.id);
+  }
+};
+const handleKeydown = (e) => {
+  if (props.node.disabled) return;
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    if (isSelectable.value) {
+      treeview?.toggleSelected(props.node.id);
+    } else if (hasChildren.value) {
+      treeview?.toggleExpanded(props.node.id);
+    }
+  } else if (e.key === "ArrowRight") {
+    e.preventDefault();
+    if (hasChildren.value && !isNodeExpanded.value) {
+      treeview?.toggleExpanded(props.node.id);
+    } else if (hasChildren.value && isNodeExpanded.value) {
+      const row = e.currentTarget.closest(".origam-treeview-node")?.querySelector('.origam-treeview-node__children [role="treeitem"]');
+      row?.focus();
+    }
+  } else if (e.key === "ArrowLeft") {
+    e.preventDefault();
+    if (hasChildren.value && isNodeExpanded.value) {
+      treeview?.toggleExpanded(props.node.id);
+    } else {
+      const parentChildren = e.currentTarget.closest(".origam-treeview-node__children");
+      if (parentChildren) {
+        const parentNode = parentChildren.closest(".origam-treeview-node");
+        const parentRow = parentNode?.querySelector(':scope > [role="treeitem"]');
+        parentRow?.focus();
+      }
+    }
+  }
+};
+const nodeWrapperClasses = computed(() => [
+  "origam-treeview-node",
+  {
+    "origam-treeview-node--expanded": isNodeExpanded.value,
+    "origam-treeview-node--selected": isNodeSelected.value,
+    "origam-treeview-node--disabled": props.node.disabled
+  },
+  props.class
+]);
+const rowClasses = computed(() => [
+  "origam-treeview-node__row",
+  {
+    "origam-treeview-node__row--selected": isNodeSelected.value,
+    "origam-treeview-node__row--disabled": props.node.disabled,
+    "origam-treeview-node__row--selectable": isSelectable.value
+  }
+]);
+const chevronClasses = computed(() => [
+  "origam-treeview-node__chevron",
+  {
+    "origam-treeview-node__chevron--expanded": isNodeExpanded.value,
+    "origam-treeview-node__chevron--hidden": !hasChildren.value
+  }
+]);
+const rowStyles = computed(() => {
+  const d = props.depth ?? 0;
+  return {
+    paddingInlineStart: `calc(var(--origam-treeview---indent-size, 16px) * ${d} + var(--origam-treeview---row-padding-inline, 8px))`
+  };
+});
+const { id, css, load, isLoaded, unload } = useStyle(rowStyles);
+defineExpose({
+  filterProps,
+  isNodeExpanded,
+  isNodeSelected,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-treeview-node {
+		display: flex;
+		flex-direction: column;
+
+		&__row {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+			min-height: var(--origam-treeview---row-height, 32px);
+			padding-inline-end: var(--origam-treeview---row-padding-inline, 8px);
+			border-radius: var(--origam-radius---sm, 4px);
+			cursor: pointer;
+			outline: none;
+			transition: background-color 150ms ease;
+			user-select: none;
+			box-sizing: border-box;
+			width: 100%;
+
+			&:hover:not(.origam-treeview-node__row--disabled) {
+				background-color: var(--origam-treeview---row-bg-hover, var(--origam-color__surface---overlay));
+			}
+
+			&:focus-visible {
+				outline: 2px solid var(--origam-color__border---focus);
+				outline-offset: -2px;
+			}
+
+			&--selected {
+				background-color: var(--origam-treeview---row-bg-selected, var(--origam-color__action--primary---bgSubtle));
+				color: var(--origam-treeview---row-color-selected, var(--origam-color__action--primary---fgSubtle));
+
+				.origam-treeview-node__label {
+					color: var(--origam-treeview---row-color-selected, var(--origam-color__action--primary---fgSubtle));
+				}
+			}
+
+			&--disabled {
+				color: var(--origam-treeview---row-color-disabled, var(--origam-color__text---disabled));
+				cursor: not-allowed;
+				pointer-events: none;
+
+				.origam-treeview-node__label {
+					color: var(--origam-treeview---row-color-disabled, var(--origam-color__text---disabled));
+				}
+			}
+		}
+
+		&__guide {
+			display: inline-block;
+			flex-shrink: 0;
+			width: 1px;
+			align-self: stretch;
+			background-color: var(--origam-treeview---guide-color, var(--origam-color__border---subtle));
+			width: var(--origam-treeview---guide-thickness, 1px);
+			margin-inline-end: calc(var(--origam-treeview---indent-size, 16px) - var(--origam-treeview---guide-thickness, 1px));
+		}
+
+		&__chevron {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			flex-shrink: 0;
+			width: var(--origam-treeview---chevron-size, 16px);
+			height: var(--origam-treeview---chevron-size, 16px);
+			color: var(--origam-treeview---chevron-color, var(--origam-color__text---secondary));
+			font-size: 14px;
+			line-height: 1;
+			transform: rotate(0deg);
+			transition: transform 200ms ease;
+
+			&--expanded {
+				transform: rotate(90deg);
+			}
+
+			&--hidden {
+				visibility: hidden;
+			}
+		}
+
+		&__icon {
+			display: inline-flex;
+			align-items: center;
+			flex-shrink: 0;
+			font-size: var(--origam-treeview---icon-size, 16px);
+			color: var(--origam-treeview---icon-color, var(--origam-color__text---primary));
+		}
+
+		&__label {
+			flex: 1;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			font-size: var(--origam-treeview---label-font-size, 0.75rem);
+			color: var(--origam-treeview---label-color, var(--origam-color__text---primary));
+		}
+
+		&__size {
+			flex-shrink: 0;
+			font-size: var(--origam-treeview---size-font-size, 0.625rem);
+			color: var(--origam-treeview---size-color, var(--origam-color__text---secondary));
+		}
+
+		&__children {
+			display: flex;
+			flex-direction: column;
+		}
+	}
+</style>

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

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

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

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

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

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

package/dist/src/components/VirtualScroll/OrigamVirtualScroll.vue

@@ -80,7 +80,13 @@
 <script setup>
 import { computed, onMounted, onScopeDispose, Ref, StyleValue, toRef } from "vue";
 import { OrigamVirtualScrollItem } from "../../components";
-import { useDimension, useProps, useToggleScope, useVirtual } from "../../composables";
+import {
+  useDimension,
+  useProps,
+  useStyle,
+  useToggleScope,
+  useVirtual
+} from "../../composables";
 import { convertToUnit, getCurrentInstance, getScrollParent } from "../../utils";
 const props = defineProps({
   items: { type: Array, required: false },
@@ -94,7 +100,9 @@ const props = defineProps({
   minHeight: { type: [Number, String], required: false },
   minWidth: { type: [Number, String], required: false },
   width: { type: [Number, String], required: false },
-  itemHeight: { type: [Number, String], required: false }
+  itemHeight: { type: [Number, String], required: false },
+  scrollDuration: { type: Number, required: false },
+  scrollEasing: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
 const vm = getCurrentInstance("OrigamVirtualScroll");
@@ -139,8 +147,34 @@ const virtualScrollClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(virtualScrollStyles);
 defineExpose({
   scrollToIndex,
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
+
+<style lang="scss" scoped>
+	.origam-virtual-scroll {
+		overflow-y: auto;
+		scroll-padding: var(--origam-virtual-scroll---scroll-padding, 0px);
+
+		&__container {
+			position: relative;
+		}
+
+		&__item {
+			transition-duration: var(--origam-virtual-scroll---transition-duration, 100ms);
+			transition-timing-function: var(--origam-virtual-scroll---transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+		}
+
+		&__spacer {
+			display: block;
+		}
+	}
+</style>

package/dist/src/components/VirtualScroll/OrigamVirtualScrollItem.vue

@@ -19,7 +19,11 @@
 
 <script setup>
 import { computed, StyleValue, useAttrs, watch } from "vue";
-import { useProps, useResizeObserver } from "../../composables";
+import {
+  useProps,
+  useResizeObserver,
+  useStyle
+} from "../../composables";
 const props = defineProps({
   renderless: { type: Boolean, required: false },
   id: { type: String, required: false },
@@ -44,7 +48,18 @@ const virtualScrollItemClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(virtualScrollItemStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
+
+<style lang="scss" scoped>
+	.origam-virtual-scroll-item {
+	}
+</style>