@astryx-vue/lab 0.0.0-stage → 0.1.0

package/lab.css

@@ -0,0 +1,10 @@
+/* 实验包的全部样式。按需引入时也可以只引 styles/ 下的单份文件。 */
+@import './styles/stat.css';
+@import './styles/circular-progress.css';
+@import './styles/info-tip.css';
+@import './styles/svg-icon.css';
+@import './styles/log-stream.css';
+@import './styles/mobile-tokenizer.css';
+@import './styles/transfer-list.css';
+@import './styles/transfer-list-selector.css';
+@import './styles/list-input.css';

package/package.json

@@ -1,6 +1,74 @@
 {
   "name": "@astryx-vue/lab",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Astryx lab components for Vue 3 — experimental components that may change. Ships only under the canary dist-tag.",
+  "author": "ShenQingchuan",
+  "license": "MIT",
+  "homepage": "https://astryx-vue.pages.dev/lab/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/astryx-vue/astryx-vue.git",
+    "directory": "packages/lab"
+  },
+  "bugs": "https://github.com/astryx-vue/astryx-vue/issues",
+  "keywords": [
+    "vue",
+    "vue3",
+    "design-system",
+    "astryx",
+    "lab",
+    "experimental"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "tag": "canary"
+  },
+  "astryxVue": {
+    "canaryOnly": true
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./lab.css": {
+      "types": "./css.d.ts",
+      "default": "./lab.css"
+    },
+    "./styles/*.css": "./styles/*.css",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "README.md",
+    "css.d.ts",
+    "dist",
+    "lab.css",
+    "styles"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "@astryx-vue/core": "^0.5.1"
+  },
+  "devDependencies": {
+    "@types/node": "26.6.4",
+    "@vue/compiler-sfc": "3.5.43",
+    "@vue/test-utils": "2.5.1",
+    "tsdown": "0.23.0",
+    "typescript": "npm:@typescript/typescript6@6.0.2",
+    "unplugin-vue": "8.0.0",
+    "vue": "3.5.43",
+    "vue-tsc": "3.3.12",
+    "@astryx-vue/core": "^0.5.1"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json"
+  }
 }

package/styles/circular-progress.css

@@ -0,0 +1,174 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /* 根：环形和标签叠成一列。标签显示在环上方时才有间距。 */
+  .astryx-circular-progress {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  .astryx-circular-progress--labelled {
+    flex-direction: column;
+    gap: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-circular-progress__label {
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+    font-weight: var(--astryx-font-weight-medium, 500);
+    color: var(--astryx-color-text-secondary, light-dark(#474747, #9e9e9e));
+  }
+
+  .astryx-circular-progress__label--disabled {
+    color: var(--astryx-color-text-disabled, light-dark(#919191, #525252));
+  }
+
+  /* 只给读屏软件念的标签。 */
+  .astryx-circular-progress__visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .astryx-circular-progress__ring {
+    position: relative;
+    display: inline-flex;
+  }
+
+  /* 起点转到 12 点方向，圆弧从左上方开始长。 */
+  .astryx-circular-progress__svg {
+    display: block;
+    transform: rotate(-90deg);
+  }
+
+  .astryx-circular-progress__svg--indeterminate {
+    animation: astryx-circular-progress-rotate 2s linear infinite;
+  }
+
+  .astryx-circular-progress__track {
+    fill: none;
+    stroke: var(--astryx-color-track, light-dark(#ccd3db, #5a5e66));
+  }
+
+  .astryx-circular-progress__track[data-variant='accent'] {
+    stroke: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
+  }
+
+  .astryx-circular-progress__track[data-variant='success'] {
+    stroke: var(--astryx-color-success-muted, light-dark(#bce0bb, #90ca903d));
+  }
+
+  .astryx-circular-progress__track[data-variant='warning'] {
+    stroke: var(--astryx-color-warning-muted, light-dark(#fae19e, #e2b6233d));
+  }
+
+  .astryx-circular-progress__track[data-variant='error'] {
+    stroke: var(--astryx-color-error-muted, light-dark(#ffc4be, #ff98903d));
+  }
+
+  .astryx-circular-progress__track[data-variant='neutral'] {
+    stroke: var(--astryx-color-track, light-dark(#ccd3db, #5a5e66));
+  }
+
+  .astryx-circular-progress__fill {
+    fill: none;
+    stroke-linecap: round;
+    transition-property: stroke-dashoffset;
+    transition-duration: var(--astryx-duration-medium, 300ms);
+    transition-timing-function: var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-circular-progress__fill[data-variant='accent'] {
+    stroke: var(--astryx-color-accent, light-dark(#1b1b1b, #f1f1f1));
+  }
+
+  .astryx-circular-progress__fill[data-variant='success'] {
+    stroke: var(--astryx-color-success, light-dark(#00490b, #a4d6a3));
+  }
+
+  .astryx-circular-progress__fill[data-variant='warning'] {
+    stroke: var(--astryx-color-warning, light-dark(#4b3900, #f8d36a));
+  }
+
+  .astryx-circular-progress__fill[data-variant='error'] {
+    stroke: var(--astryx-color-error, light-dark(#76000c, #ffc4be));
+  }
+
+  .astryx-circular-progress__fill[data-variant='neutral'],
+  .astryx-circular-progress__fill[data-variant='disabled'] {
+    stroke: var(--astryx-color-text-disabled, light-dark(#919191, #525252));
+  }
+
+  /* 不确定状态：一段固定的短弧一边转一边伸缩。 */
+  .astryx-circular-progress__fill--indeterminate {
+    animation: astryx-circular-progress-dash 1.5s ease-in-out infinite;
+  }
+
+  /* 环中心的内容压在圆弧上，不吃指针事件。 */
+  .astryx-circular-progress__center {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  .astryx-circular-progress__value {
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+    font-weight: var(--astryx-font-weight-normal, 400);
+    color: var(--astryx-color-text-secondary, light-dark(#474747, #9e9e9e));
+  }
+
+  .astryx-circular-progress__value--disabled {
+    color: var(--astryx-color-text-disabled, light-dark(#919191, #525252));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-circular-progress__svg--indeterminate {
+      animation-duration: 4s;
+    }
+
+    .astryx-circular-progress__fill--indeterminate {
+      animation-duration: 3s;
+    }
+  }
+
+  @keyframes astryx-circular-progress-rotate {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* 缺口 300% 超过任何环的周长；把「2% + 300%」整体挪 302% 正好接上首尾。 */
+  @keyframes astryx-circular-progress-dash {
+    0% {
+      stroke-dasharray: 2%, 300%;
+      stroke-dashoffset: 0%;
+    }
+
+    50% {
+      stroke-dasharray: 175%, 300%;
+      stroke-dashoffset: -68%;
+    }
+
+    100% {
+      stroke-dasharray: 2%, 300%;
+      stroke-dashoffset: -302%;
+    }
+  }
+}

package/styles/info-tip.css

@@ -0,0 +1,39 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /* 圆形的「i」按钮，对齐周围的文字基线。 */
+  .astryx-info-tip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    padding: var(--astryx-spacing-0-5, 2px);
+    margin: 0;
+    border-style: none;
+    background-color: transparent;
+    border-radius: var(--astryx-radius-full, 9999px);
+    cursor: pointer;
+    color: var(--astryx-color-icon-secondary, light-dark(#6a6a6a, #9e9e9e));
+    transition-property: color;
+    transition-duration: var(--astryx-duration-fast, 125ms);
+    transition-timing-function: var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  /* 指针设备上悬停时换成更清楚的主图标色。 */
+  @media (hover: hover) {
+    .astryx-info-tip:hover:where(:not(:disabled, [aria-disabled='true'])) {
+      color: var(--astryx-color-icon-primary, light-dark(#000000, #ffffff));
+    }
+  }
+
+  /* 禁用时指针样式和普通文字一致，不做「不可点」的暗示。 */
+  .astryx-info-tip:is(:disabled, [aria-disabled='true']) {
+    cursor: default;
+  }
+
+  /* 键盘聚焦时的焦点环。 */
+  .astryx-info-tip:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: var(--astryx-focus-outline-offset, 3px);
+  }
+}

package/styles/list-input.css

@@ -0,0 +1,206 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /*
+   * 记录列表。容器查询决定是「一行排所有列」（宽）还是「每列一行堆叠」（窄），
+   * 和原版一样在 640px 处切换。
+   */
+  .astryx-list-input {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    width: 100%;
+    overflow-anchor: none;
+    container-type: inline-size;
+    container-name: list-input;
+  }
+
+  .astryx-list-input__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-2, 8px);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .astryx-list-input__empty-item {
+    width: 100%;
+  }
+
+  /* 空状态在空白区里居中，用四周边距撑出竖向空间。 */
+  .astryx-list-input__empty-item .astryx-empty-state {
+    align-items: center;
+    justify-content: center;
+    padding-block: var(--astryx-spacing-6, 24px);
+    text-align: center;
+  }
+
+  .astryx-list-input__item {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    position: relative;
+  }
+
+  /*
+   * 一行：先是所有字段，然后是删除按钮，最后是拖动手柄。
+   * 控件列宽固定成一格控件的大小，字段列吃掉剩下的空间。
+   */
+  .astryx-list-input__row {
+    display: grid;
+    align-items: end;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    column-gap: var(--astryx-spacing-1, 4px);
+    row-gap: 0;
+    min-width: 0;
+  }
+
+  .astryx-list-input__fields {
+    display: grid;
+    align-items: end;
+    gap: var(--astryx-spacing-1, 4px);
+    min-width: 0;
+  }
+
+  .astryx-list-input__cell {
+    min-width: 0;
+  }
+
+  /* 列名只在第一条上显示；窄屏时每条都显示，按下标由标记切换。 */
+  .astryx-list-input__column-label {
+    display: block;
+    margin-block-end: var(--astryx-spacing-0-5, 2px);
+    color: var(--astryx-color-text-primary, light-dark(#0a0a0a, #fafafa));
+    font-size: var(--astryx-text-label-size, 0.8125rem);
+    line-height: var(--astryx-text-label-leading, 1.3);
+    font-weight: var(--astryx-font-weight-medium, 500);
+  }
+
+  .astryx-list-input__column-label[data-list-input-repeated] {
+    display: none;
+  }
+
+  .astryx-list-input__cell-content {
+    min-width: 0;
+  }
+
+  .astryx-list-input__control-cell {
+    display: flex;
+    align-items: center;
+    align-self: end;
+    justify-content: center;
+    min-height: var(--astryx-size-element-md, 32px);
+  }
+
+  /* 记录本身的状态消息占满整行，跟在字段和控件下面。 */
+  .astryx-list-input__item-status {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    margin-block-start: var(--astryx-spacing-1, 4px);
+    min-width: 0;
+  }
+
+  /* 添加按钮和字段列对齐，宽度撑满。 */
+  .astryx-list-input__action-row {
+    display: grid;
+    align-items: center;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    column-gap: var(--astryx-spacing-1, 4px);
+    margin-block-start: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-list-input__action-content {
+    min-width: 0;
+  }
+
+  /* 拖动中的源行半透明，说明它是被拿起来那一行。 */
+  .astryx-list-input__row--dragging {
+    opacity: 0.5;
+    user-select: none;
+  }
+
+  /* 落点指示线画在整行的上边或下边。 */
+  .astryx-list-input__item[data-list-input-drop-target] {
+    position: relative;
+  }
+
+  .astryx-list-input__item[data-list-input-drop-target]::before,
+  .astryx-list-input__item[data-list-input-drop-target]::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    height: var(--astryx-spacing-0-5, 2px);
+    border-radius: var(--astryx-radius-full, 9999px);
+    background-color: var(--astryx-color-accent, light-dark(#0a0a0a, #fafafa));
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .astryx-list-input__item[data-list-input-drop-target='before']::before {
+    inset-block-start: calc(-1 * var(--astryx-spacing-0-5, 2px));
+  }
+
+  .astryx-list-input__item[data-list-input-drop-target='after']::after {
+    inset-block-end: calc(-1 * var(--astryx-spacing-0-5, 2px));
+  }
+
+  /* 手柄给出抓取手势，并且吃掉触摸滚动，否则手机上竖着拖会变成滚动页面。 */
+  .astryx-list-input__reorder-handle {
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .astryx-list-input__reorder-handle[aria-pressed='true'] {
+    background-color: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
+    cursor: grabbing;
+  }
+
+  .astryx-list-input__reorder-handle:is(:disabled, [aria-disabled='true']) {
+    cursor: default;
+  }
+
+  /* 跟着指针走的克隆体。top / left / width 由组件内联给出。 */
+  .astryx-list-input__drag-preview {
+    position: fixed;
+    z-index: 2147483000;
+    opacity: 0.5;
+    pointer-events: none;
+    user-select: none;
+    will-change: transform;
+    margin: 0;
+    container-type: inline-size;
+    container-name: list-input;
+    width: 100%;
+  }
+
+  /* 窄的时候每列占一行，行与行之间松一点。 */
+  @container list-input (max-width: 640px) {
+    .astryx-list-input__list {
+      gap: var(--astryx-spacing-8, 32px);
+    }
+
+    .astryx-list-input__row {
+      grid-template-columns: minmax(0, 1fr) auto auto;
+      row-gap: var(--astryx-spacing-2, 8px);
+    }
+
+    .astryx-list-input__fields {
+      grid-template-columns: minmax(0, 1fr);
+      gap: var(--astryx-spacing-2, 8px);
+    }
+
+    .astryx-list-input__column-label {
+      margin-block-end: var(--astryx-spacing-1, 4px);
+    }
+
+    .astryx-list-input__column-label[data-list-input-repeated] {
+      display: block;
+    }
+
+    .astryx-list-input__item-status {
+      grid-row: auto;
+      margin-block-start: 0;
+    }
+  }
+}