@astryx-vue/core 0.1.0 → 0.1.3

package/styles/tree-list.css

@@ -0,0 +1,229 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-tree-list {
+    position: relative;
+    --tree-list-indent: var(--astryx-spacing-4, 16px);
+    --tree-list-row-gap: var(--astryx-spacing-0-5, 2px);
+    /*
+     * A nested branch only indents 16px, while the guide is centered on the
+     * parent chevron (10px margin + 10px). The 1px line therefore ends about
+     * 4.5px inside that row. The fill starts one 4px step past that edge.
+     */
+    --_tree-guide-clearance: calc(
+      var(--astryx-spacing-2, 8px) + var(--astryx-spacing-0-5, 2px) + (var(--astryx-spacing-5, 20px) / 2) + 0.5px - var(--tree-list-indent, 16px) + var(--astryx-spacing-1, 4px)
+    );
+  }
+
+  .astryx-tree-list__header {
+    margin-bottom: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-tree-list__list,
+  .astryx-tree-list__group {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .astryx-tree-list__item {
+    position: relative;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    outline: none;
+  }
+
+  .astryx-tree-list__row {
+    position: relative;
+    padding-block: calc(var(--tree-list-row-gap, 0px) / 2);
+  }
+
+  .astryx-tree-list__content {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    margin-inline-start: var(--_tree-indent, 0px);
+    padding-inline: var(--astryx-spacing-2, 8px);
+    overflow: hidden;
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    font-size: var(--astryx-text-body-size, 1rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+    text-align: start;
+  }
+
+  .astryx-tree-list__content::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
+    background-color: transparent;
+    pointer-events: none;
+    transition: background-color var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-tree-list__content[data-guide-inset]::before {
+    inset-inline-start: var(--_tree-guide-clearance, 8.5px);
+  }
+
+  .astryx-tree-list__content[data-density='compact'] {
+    padding-block: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-tree-list__content[data-density='balanced'] {
+    padding-block: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-tree-list__content[data-density='spacious'] {
+    padding-block: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-tree-list__content[data-selected='true']::before {
+    background-color: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
+  }
+
+  .astryx-tree-list__content[data-interactive='true'] {
+    cursor: pointer;
+  }
+
+  @media (hover: hover) {
+    .astryx-tree-list__content[data-interactive='true']:hover::before {
+      background-color: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
+    }
+
+    .astryx-tree-list__content[data-selected='true']:hover::before {
+      background-color: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
+    }
+  }
+
+  .astryx-tree-list__item:focus-visible > .astryx-tree-list__row > .astryx-tree-list__content {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, var(--astryx-color-accent));
+    outline-offset: var(--astryx-focus-outline-offset, 3px);
+  }
+
+  .astryx-tree-list__content[data-disabled='true'] {
+    cursor: default;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .astryx-tree-list__label {
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+  }
+
+  .astryx-tree-list__description {
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+    font-size: var(--astryx-text-supporting-size, 0.875rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+  }
+
+  .astryx-tree-list__main,
+  .astryx-tree-list__action {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    outline: none;
+    cursor: inherit;
+  }
+
+  .astryx-tree-list__start,
+  .astryx-tree-list__end {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+
+  /*
+   * External icon classes (UnoCSS and the like) size themselves to 100% of
+   * their box. The box has to be explicit or the glyph collapses to nothing.
+   * 1rem matches Icon size sm, the size the original file-tree icons use.
+   */
+  .astryx-tree-list__icon {
+    display: inline-flex;
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+    color: var(--astryx-color-text-primary, currentcolor);
+  }
+
+  .astryx-tree-list__icon > i {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .astryx-tree-list__end {
+    margin-inline-start: auto;
+  }
+
+  .astryx-tree-list__chevron {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--astryx-spacing-4, 16px);
+    height: var(--astryx-spacing-4, 16px);
+    margin-inline: var(--astryx-spacing-1, 4px) calc(var(--astryx-spacing-1, 4px) * -1);
+    padding: 0;
+    border: 0;
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+    background: transparent;
+    color: var(--astryx-color-icon-secondary, light-dark(#737373, #a3a3a3));
+    cursor: pointer;
+  }
+
+  .astryx-tree-list__chevron .astryx-icon {
+    width: var(--astryx-spacing-4, 16px);
+    height: var(--astryx-spacing-4, 16px);
+    font-size: var(--astryx-spacing-4, 16px);
+    transition: transform var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-tree-list__chevron[data-state='expanded'] .astryx-icon {
+    transform: rotate(90deg);
+  }
+
+  [dir='rtl'] .astryx-tree-list__chevron .astryx-icon {
+    transform: scaleX(-1);
+  }
+
+  [dir='rtl'] .astryx-tree-list__chevron[data-state='expanded'] .astryx-icon {
+    transform: scaleX(-1) rotate(90deg);
+  }
+
+  .astryx-tree-list__guide {
+    position: absolute;
+    width: var(--astryx-spacing-5, 20px);
+    height: 100%;
+  }
+
+  .astryx-tree-list__guide-line {
+    position: absolute;
+    inset-inline: 0;
+    width: 1px;
+    margin: auto;
+    border-radius: 1px;
+    background-color: var(--astryx-color-border-emphasized, light-dark(#d4d4d4, #525252));
+  }
+
+  .astryx-tree-list__guide-line[data-span='full'] {
+    height: calc(100% + 1px);
+  }
+
+  .astryx-tree-list__guide-line[data-span='last'] {
+    height: calc(100% - var(--tree-list-row-gap, 0px) / 2);
+  }
+}

package/styles.css

@@ -1,10 +1,13 @@
 /* 这个文件由 `pnpm sync` 生成，不要手改。 */
 @import './styles/alert-dialog.css';
+@import './styles/app-shell.css';
+@import './styles/aspect-ratio.css';
 @import './styles/avatar.css';
 @import './styles/avatar-group.css';
 @import './styles/badge.css';
 @import './styles/banner.css';
 @import './styles/blockquote.css';
+@import './styles/bordered-control.css';
 @import './styles/bottom-sheet.css';
 @import './styles/breadcrumbs.css';
 @import './styles/button.css';
@@ -14,24 +17,34 @@
 @import './styles/chat.css';
 @import './styles/checkbox-indicator.css';
 @import './styles/checkbox-input.css';
+@import './styles/checkbox-list.css';
 @import './styles/citation.css';
+@import './styles/clickable-card.css';
 @import './styles/code.css';
 @import './styles/collapsible.css';
+@import './styles/command-palette.css';
+@import './styles/complex-selector.css';
 @import './styles/context-menu.css';
+@import './styles/date-range-input.css';
+@import './styles/date-time-input.css';
 @import './styles/dialog.css';
 @import './styles/dialog-header.css';
 @import './styles/divider.css';
 @import './styles/dropdown-menu.css';
 @import './styles/empty-state.css';
 @import './styles/field.css';
+@import './styles/file-input.css';
+@import './styles/form-layout.css';
 @import './styles/grid.css';
 @import './styles/heading.css';
 @import './styles/hover-card.css';
 @import './styles/icon.css';
 @import './styles/kbd.css';
+@import './styles/layout.css';
 @import './styles/link.css';
 @import './styles/list.css';
 @import './styles/markdown.css';
+@import './styles/metadata-list.css';
 @import './styles/mobile-nav.css';
 @import './styles/more-menu.css';
 @import './styles/motion.css';
@@ -43,6 +56,9 @@
 @import './styles/popover.css';
 @import './styles/progress-bar.css';
 @import './styles/radio.css';
+@import './styles/resize-handle.css';
+@import './styles/scrollable-area.css';
+@import './styles/section.css';
 @import './styles/segmented-control.css';
 @import './styles/side-nav.css';
 @import './styles/skeleton.css';
@@ -50,11 +66,17 @@
 @import './styles/spinner.css';
 @import './styles/stack.css';
 @import './styles/status-dot.css';
+@import './styles/stepper.css';
 @import './styles/switch.css';
 @import './styles/tab-list.css';
+@import './styles/tab-menu.css';
+@import './styles/table.css';
 @import './styles/text.css';
 @import './styles/text-area.css';
 @import './styles/text-input.css';
+@import './styles/thumbnail.css';
+@import './styles/time-input.css';
+@import './styles/timestamp.css';
 @import './styles/toast.css';
 @import './styles/toggle-button.css';
 @import './styles/token.css';
@@ -62,5 +84,6 @@
 @import './styles/toolbar.css';
 @import './styles/tooltip.css';
 @import './styles/top-nav.css';
+@import './styles/tree-list.css';
 @import './styles/typeahead.css';
 @import './styles/visually-hidden.css';

package/dist/Collapsible-ByXCGhT8.js

@@ -1,102 +0,0 @@
-import { t as _sfc_main$1 } from "./Icon-B6qNgBP9.js";
-import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, openBlock, renderSlot, shallowRef, toDisplayString, useId, useModel, useTemplateRef, vShow, withCtx, withDirectives } from "vue";
-import "../styles/collapsible.css";
-//#region src/Collapsible/Collapsible.vue
-const _hoisted_1 = [
-	"data-chevron-position",
-	"data-open",
-	"data-disabled",
-	"aria-expanded",
-	"aria-disabled",
-	"tabindex"
-];
-const _hoisted_2 = { class: "astryx-collapsible-trigger-label" };
-const _hoisted_3 = ["data-open"];
-const _hoisted_4 = { class: "astryx-collapsible-content-inner" };
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "AstryxCollapsible",
-	__name: "Collapsible",
-	props: /*@__PURE__*/ mergeModels({
-		trigger: {},
-		defaultIsOpen: {
-			type: Boolean,
-			default: true
-		},
-		isDisabled: {
-			type: Boolean,
-			default: false
-		},
-		chevronPosition: { default: "end" }
-	}, {
-		"isOpen": {
-			type: Boolean,
-			default: void 0
-		},
-		"isOpenModifiers": {}
-	}),
-	emits: /*@__PURE__*/ mergeModels(["openChange"], ["update:isOpen"]),
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const open = useModel(__props, "isOpen");
-		const localIsOpen = shallowRef(props.defaultIsOpen);
-		const isOpen = computed(() => open.value ?? localIsOpen.value);
-		const isChevronAtStart = computed(() => props.chevronPosition === "start");
-		const contentId = `astryx-collapsible-${useId()}`;
-		const root = useTemplateRef("root");
-		__expose({ element: computed(() => root.value ?? null) });
-		function toggle() {
-			if (props.isDisabled) return;
-			const next = !isOpen.value;
-			localIsOpen.value = next;
-			open.value = next;
-			emit("openChange", next);
-		}
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				ref_key: "root",
-				ref: root,
-				class: "astryx-collapsible"
-			}, [createElementVNode("button", {
-				type: "button",
-				class: "astryx-collapsible-trigger",
-				"data-chevron-position": __props.chevronPosition,
-				"data-open": isOpen.value ? "open" : void 0,
-				"data-disabled": __props.isDisabled ? "disabled" : void 0,
-				"aria-expanded": isOpen.value,
-				"aria-controls": contentId,
-				"aria-disabled": __props.isDisabled || void 0,
-				tabindex: __props.isDisabled ? -1 : void 0,
-				onClick: toggle
-			}, [
-				isChevronAtStart.value ? (openBlock(), createBlock(_sfc_main$1, {
-					key: 0,
-					class: "astryx-collapsible-chevron",
-					color: "secondary",
-					icon: "chevronRight",
-					size: "sm"
-				})) : createCommentVNode("v-if", true),
-				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "trigger", {}, () => [createTextVNode(toDisplayString(__props.trigger), 1)])]),
-				!isChevronAtStart.value ? (openBlock(), createBlock(_sfc_main$1, {
-					key: 1,
-					class: "astryx-collapsible-chevron",
-					color: "secondary",
-					icon: "chevronDown",
-					size: "sm"
-				})) : createCommentVNode("v-if", true)
-			], 8, _hoisted_1), createVNode(Transition, {
-				name: "astryx-collapsible-reveal",
-				persisted: ""
-			}, {
-				default: withCtx(() => [withDirectives(createElementVNode("div", {
-					id: contentId,
-					class: "astryx-collapsible-content",
-					"data-open": isOpen.value ? "open" : void 0
-				}, [createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")])], 8, _hoisted_3), [[vShow, isOpen.value]])]),
-				_: 3
-			})], 512);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };

package/dist/TabList-LV1U4ZD6.js

@@ -1,184 +0,0 @@
-import { computed, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, onMounted, onUnmounted, openBlock, provide, reactive, ref, renderSlot, watch } from "vue";
-import "../styles/tab-list.css";
-//#region src/TabList/context.ts
-const tabListContextKey = Symbol("tabListContext");
-//#endregion
-//#region src/TabList/Tab.vue
-const _hoisted_1$1 = [
-	"id",
-	"aria-selected",
-	"aria-controls",
-	"tabindex",
-	"disabled"
-];
-const _hoisted_2 = { class: "astryx-tab__label" };
-const _sfc_main$1 = /*@__PURE__*/ defineComponent({
-	__name: "Tab",
-	props: {
-		value: {},
-		panelId: {},
-		disabled: {
-			type: Boolean,
-			default: false
-		}
-	},
-	setup(__props) {
-		const props = __props;
-		const context = inject(tabListContextKey);
-		const rootRef = ref();
-		const isSelected = computed(() => context?.value.value === props.value);
-		const tabIndex = computed(() => isSelected.value && !props.disabled ? 0 : -1);
-		const classes = computed(() => [
-			"astryx-tab",
-			`astryx-tab--size-${context?.size.value ?? "md"}`,
-			isSelected.value && "astryx-tab--selected",
-			props.disabled && "astryx-tab--disabled"
-		]);
-		function handleClick() {
-			if (props.disabled || !context) return;
-			context.selectTab(props.value);
-		}
-		function handleKeydown(event) {
-			if (props.disabled || !context) return;
-			switch (event.key) {
-				case "ArrowRight":
-				case "ArrowDown":
-					event.preventDefault();
-					context.moveFocus("next", props.value);
-					break;
-				case "ArrowLeft":
-				case "ArrowUp":
-					event.preventDefault();
-					context.moveFocus("prev", props.value);
-					break;
-				case "Home":
-					event.preventDefault();
-					context.moveFocus("first", props.value);
-					break;
-				case "End":
-					event.preventDefault();
-					context.moveFocus("last", props.value);
-			}
-		}
-		onMounted(() => {
-			if (!context || !rootRef.value) return;
-			context.registerTab({
-				value: props.value,
-				disabled: props.disabled,
-				el: rootRef.value
-			});
-		});
-		onUnmounted(() => {
-			context?.unregisterTab(props.value);
-		});
-		watch(() => props.disabled, (disabled) => {
-			if (!context || !rootRef.value) return;
-			context.registerTab({
-				value: props.value,
-				disabled,
-				el: rootRef.value
-			});
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("button", {
-				id: `astryx-tab-${__props.value}`,
-				ref_key: "rootRef",
-				ref: rootRef,
-				type: "button",
-				role: "tab",
-				class: normalizeClass(classes.value),
-				"aria-selected": isSelected.value,
-				"aria-controls": __props.panelId,
-				tabindex: tabIndex.value,
-				disabled: __props.disabled,
-				onClick: handleClick,
-				onKeydown: handleKeydown
-			}, [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 42, _hoisted_1$1);
-		};
-	}
-});
-//#endregion
-//#region src/TabList/TabList.vue
-const _hoisted_1 = { class: "astryx-tab-list__strip" };
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	__name: "TabList",
-	props: {
-		value: {},
-		size: { default: "md" },
-		layout: { default: "hug" },
-		hasDivider: {
-			type: Boolean,
-			default: false
-		}
-	},
-	emits: ["update:value", "change"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const tabs = reactive([]);
-		const focusedValue = ref(props.value);
-		const enabledTabs = computed(() => tabs.filter((tab) => !tab.disabled));
-		function selectTab(value) {
-			if (value === props.value) return;
-			emit("update:value", value);
-			emit("change", value);
-			focusedValue.value = value;
-		}
-		function moveFocus(direction, value) {
-			const stops = enabledTabs.value;
-			if (stops.length === 0) return;
-			const index = stops.findIndex((tab) => tab.value === value);
-			let nextIndex = index;
-			switch (direction) {
-				case "next":
-					nextIndex = index >= 0 ? (index + 1) % stops.length : 0;
-					break;
-				case "prev":
-					nextIndex = index >= 0 ? (index - 1 + stops.length) % stops.length : stops.length - 1;
-					break;
-				case "first":
-					nextIndex = 0;
-					break;
-				case "last": nextIndex = stops.length - 1;
-			}
-			const next = stops[nextIndex];
-			if (!next) return;
-			focusedValue.value = next.value;
-			selectTab(next.value);
-			next.el.focus();
-		}
-		function registerTab(tab) {
-			const existingIndex = tabs.findIndex((t) => t.value === tab.value);
-			if (existingIndex >= 0) tabs.splice(existingIndex, 1, tab);
-			else tabs.push(tab);
-		}
-		function unregisterTab(value) {
-			const index = tabs.findIndex((t) => t.value === value);
-			if (index >= 0) tabs.splice(index, 1);
-		}
-		provide(tabListContextKey, {
-			value: computed(() => props.value),
-			size: computed(() => props.size),
-			layout: computed(() => props.layout),
-			hasDivider: computed(() => props.hasDivider),
-			tabs,
-			focusedValue,
-			registerTab,
-			unregisterTab,
-			selectTab,
-			moveFocus
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				class: normalizeClass(["astryx-tab-list", [
-					`astryx-tab-list--size-${__props.size}`,
-					`astryx-tab-list--layout-${__props.layout}`,
-					__props.hasDivider && "astryx-tab-list--has-divider"
-				]]),
-				role: "tablist"
-			}, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")])], 2);
-		};
-	}
-});
-//#endregion
-export { _sfc_main$1 as n, _sfc_main as t };