@astryx-vue/lab 0.0.0-stage → 0.1.0

package/styles/svg-icon.css

@@ -0,0 +1,204 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /*
+   * 尺寸、颜色和每一层的取值都从这里进：变体（data-variation）改层的内部变量，
+   * 尺寸（data-size）改边长和描边宽度，颜色（data-color）改 color。
+   * 使用方可以直接覆盖 --astryx-icon-* 这几个变量，不用碰选择器。
+   */
+
+  .astryx-svg-icon {
+    /* 层的默认值就是 linear 变体的取值，见下面的 data-variation 覆盖。 */
+    --_icon-primary-fill: none;
+    --_icon-primary-stroke: currentcolor;
+    --_icon-primary-opacity: 1;
+    --_icon-primary-stroke-role-fill: none;
+    --_icon-primary-stroke-role-stroke: currentcolor;
+    --_icon-primary-stroke-role-opacity: 1;
+    --_icon-primary-stroke-role-width: 1.5;
+    --_icon-secondary-fill: none;
+    --_icon-secondary-stroke: currentcolor;
+    --_icon-secondary-opacity: 1;
+    --_icon-secondary-stroke-role-fill: none;
+    --_icon-secondary-stroke-role-stroke: currentcolor;
+    --_icon-secondary-stroke-role-opacity: 1;
+    --_icon-secondary-stroke-role-width: 1.5;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    width: var(--astryx-icon-size, 24px);
+    height: var(--astryx-icon-size, 24px);
+    padding-inline-start: var(--astryx-icon-inline-offset, 0px);
+    padding-block-start: var(--astryx-icon-block-offset, 0px);
+  }
+
+  /* 颜色角色，和 core 的 Icon 语义一致。 */
+  .astryx-svg-icon[data-color='primary'] {
+    color: var(--astryx-color-icon-primary, light-dark(#000000, #ffffff));
+  }
+
+  .astryx-svg-icon[data-color='secondary'] {
+    color: var(--astryx-color-icon-secondary, light-dark(#6a6a6a, #9e9e9e));
+  }
+
+  .astryx-svg-icon[data-color='disabled'] {
+    color: var(--astryx-color-icon-disabled, light-dark(#919191, #525252));
+  }
+
+  .astryx-svg-icon[data-color='accent'] {
+    color: var(--astryx-color-accent, light-dark(#1b1b1b, #f1f1f1));
+  }
+
+  .astryx-svg-icon[data-color='positive'] {
+    color: var(--astryx-color-success, light-dark(#00490b, #a4d6a3));
+  }
+
+  .astryx-svg-icon[data-color='negative'] {
+    color: var(--astryx-color-error, light-dark(#76000c, #ffc4be));
+  }
+
+  .astryx-svg-icon[data-color='warning'] {
+    color: var(--astryx-color-warning, light-dark(#4b3900, #f8d36a));
+  }
+
+  .astryx-svg-icon[data-color='inherit'] {
+    color: inherit;
+  }
+
+  /* 光学补偿：越小描边越粗，看上去粗细才一致。 */
+  .astryx-svg-icon[data-size='xsm'] {
+    --astryx-icon-size: 12px;
+    --astryx-icon-stroke-width: 2;
+  }
+
+  .astryx-svg-icon[data-size='sm'] {
+    --astryx-icon-size: 16px;
+    --astryx-icon-stroke-width: 1.75;
+  }
+
+  .astryx-svg-icon[data-size='md'] {
+    --astryx-icon-size: 20px;
+    --astryx-icon-stroke-width: 1.5;
+  }
+
+  .astryx-svg-icon[data-size='lg'] {
+    --astryx-icon-size: 24px;
+    --astryx-icon-stroke-width: 1.5;
+  }
+
+  /* linear：填充角色其实只描边，描边角色不透明。 */
+  .astryx-svg-icon[data-variation='linear'] {
+    --_icon-primary-fill: none;
+    --_icon-primary-stroke: currentcolor;
+    --_icon-primary-opacity: 1;
+    --_icon-primary-stroke-role-fill: none;
+    --_icon-primary-stroke-role-stroke: currentcolor;
+    --_icon-primary-stroke-role-opacity: 1;
+    --_icon-secondary-fill: none;
+    --_icon-secondary-stroke: currentcolor;
+    --_icon-secondary-opacity: 1;
+    --_icon-secondary-stroke-role-fill: none;
+    --_icon-secondary-stroke-role-stroke: currentcolor;
+    --_icon-secondary-stroke-role-opacity: 1;
+  }
+
+  /* bold：填充角色变实心（重叠靠遮罩挖），描边角色加粗。 */
+  .astryx-svg-icon[data-variation='bold'] {
+    --_icon-primary-fill: currentcolor;
+    --_icon-primary-stroke: none;
+    --_icon-primary-opacity: 1;
+    --_icon-primary-stroke-role-fill: none;
+    --_icon-primary-stroke-role-stroke: currentcolor;
+    --_icon-primary-stroke-role-opacity: 1;
+    --_icon-primary-stroke-role-width: 2;
+    --_icon-secondary-fill: currentcolor;
+    --_icon-secondary-stroke: none;
+    --_icon-secondary-opacity: 1;
+    --_icon-secondary-stroke-role-fill: none;
+    --_icon-secondary-stroke-role-stroke: currentcolor;
+    --_icon-secondary-stroke-role-opacity: 1;
+    --_icon-secondary-stroke-role-width: 2.5;
+  }
+
+  /* twotone：次层和描边角色淡下去，留出主次的层次。 */
+  .astryx-svg-icon[data-variation='twotone'] {
+    --_icon-primary-fill: none;
+    --_icon-primary-stroke: currentcolor;
+    --_icon-primary-opacity: 1;
+    --_icon-primary-stroke-role-fill: none;
+    --_icon-primary-stroke-role-stroke: currentcolor;
+    --_icon-primary-stroke-role-opacity: 0.4;
+    --_icon-secondary-fill: none;
+    --_icon-secondary-stroke: currentcolor;
+    --_icon-secondary-opacity: 0.4;
+    --_icon-secondary-stroke-role-fill: none;
+    --_icon-secondary-stroke-role-stroke: currentcolor;
+    --_icon-secondary-stroke-role-opacity: 0.4;
+  }
+
+  /* bulk：主层实心，次层和描边角色淡下去。 */
+  .astryx-svg-icon[data-variation='bulk'] {
+    --_icon-primary-fill: currentcolor;
+    --_icon-primary-stroke: none;
+    --_icon-primary-opacity: 1;
+    --_icon-primary-stroke-role-fill: none;
+    --_icon-primary-stroke-role-stroke: currentcolor;
+    --_icon-primary-stroke-role-opacity: 0.4;
+    --_icon-secondary-fill: currentcolor;
+    --_icon-secondary-stroke: none;
+    --_icon-secondary-opacity: 0.4;
+    --_icon-secondary-stroke-role-fill: none;
+    --_icon-secondary-stroke-role-stroke: currentcolor;
+    --_icon-secondary-stroke-role-opacity: 0.4;
+  }
+
+  /* broken：次层整层不画。 */
+  .astryx-svg-icon[data-variation='broken'] {
+    --_icon-primary-fill: none;
+    --_icon-primary-stroke: currentcolor;
+    --_icon-primary-opacity: 1;
+    --_icon-primary-stroke-role-fill: none;
+    --_icon-primary-stroke-role-stroke: currentcolor;
+    --_icon-primary-stroke-role-opacity: 1;
+    --_icon-secondary-fill: none;
+    --_icon-secondary-stroke: currentcolor;
+    --_icon-secondary-opacity: 0;
+    --_icon-secondary-stroke-role-fill: none;
+    --_icon-secondary-stroke-role-stroke: currentcolor;
+    --_icon-secondary-stroke-role-opacity: 0;
+  }
+
+  /* 四个图层组：主层/次层各分出填充角色和描边角色。 */
+  .astryx-svg-icon__layer {
+    stroke-linecap: var(--astryx-icon-stroke-linecap, round);
+    stroke-linejoin: var(--astryx-icon-stroke-linejoin, round);
+  }
+
+  .astryx-svg-icon__layer--primary-fill {
+    fill: var(--_icon-primary-fill);
+    stroke: var(--_icon-primary-stroke);
+    opacity: var(--_icon-primary-opacity);
+    stroke-width: var(--astryx-icon-stroke-width, 1.5);
+  }
+
+  .astryx-svg-icon__layer--primary-stroke {
+    fill: var(--_icon-primary-stroke-role-fill);
+    stroke: var(--_icon-primary-stroke-role-stroke);
+    opacity: var(--_icon-primary-stroke-role-opacity);
+    stroke-width: var(--_icon-primary-stroke-role-width);
+  }
+
+  .astryx-svg-icon__layer--secondary-fill {
+    fill: var(--_icon-secondary-fill);
+    stroke: var(--_icon-secondary-stroke);
+    opacity: var(--_icon-secondary-opacity);
+    stroke-width: var(--astryx-icon-stroke-width, 1.5);
+  }
+
+  .astryx-svg-icon__layer--secondary-stroke {
+    fill: var(--_icon-secondary-stroke-role-fill);
+    stroke: var(--_icon-secondary-stroke-role-stroke);
+    opacity: var(--_icon-secondary-stroke-role-opacity);
+    stroke-width: var(--_icon-secondary-stroke-role-width);
+  }
+}

package/styles/transfer-list-selector.css

@@ -0,0 +1,46 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /* 弹层面板：两栏区域自己滚，底部操作一直留在弹层底部。宽度和去内边距由组件传给 ComplexSelector 的 contentStyle 决定。 */
+  .astryx-transfer-list-selector__surface {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    max-height: inherit;
+  }
+
+  /* 两栏区域自己滚，底部按钮一直留在弹层里。 */
+  .astryx-transfer-list-selector__fieldset {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    min-width: 0;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* 提交中的字段区读起来像不可用，但仍然能聚焦：禁用它会把焦点丢到 body。 */
+  .astryx-transfer-list-selector__surface[aria-busy='true'] .astryx-transfer-list-selector__fieldset {
+    cursor: progress;
+  }
+
+  .astryx-transfer-list-selector__fieldset:disabled {
+    cursor: default;
+  }
+
+  .astryx-transfer-list-selector__footer {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--astryx-spacing-2, 8px);
+    padding: var(--astryx-spacing-3, 12px);
+    border-block-start: var(--astryx-border-width, 1px) solid var(--astryx-color-border, #00000014);
+    background-color: var(--astryx-color-background-surface, #fff);
+  }
+}

package/styles/transfer-list.css

@@ -0,0 +1,234 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /*
+   * 两栏之间靠容器查询决定是并排还是上下堆叠：宽的时候左右分栏，
+   * 窄的时候改成上下两段，分隔线也跟着从竖的变横的。
+   */
+  .astryx-transfer-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    min-width: 0;
+    container-type: inline-size;
+  }
+
+  .astryx-transfer-list__heading {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-1, 4px);
+    padding-inline: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-transfer-list__controls {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--astryx-spacing-2, 8px);
+    min-width: 0;
+    padding: var(--astryx-spacing-3, 12px);
+  }
+
+  /* core 的 TextInput 外壳会缩到内容宽，这里让它撑满这一行。 */
+  .astryx-transfer-list__search {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .astryx-transfer-list-collection {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 0;
+    min-width: 0;
+  }
+
+  .astryx-transfer-list-panel {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    /* 焦点环画在面板自己的边上，所以往里收，不能超出组件边界。 */
+    outline-offset: 0;
+  }
+
+  .astryx-transfer-list-panel:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: calc(-1 * var(--astryx-focus-outline-width, 2px));
+  }
+
+  /* 可选栏和已选栏之间那条分隔线。窄屏时改成上边线。 */
+  .astryx-transfer-list-panel[data-side='available'] {
+    border-inline-start: var(--astryx-border-width, 1px) solid var(--astryx-color-border, #00000014);
+  }
+
+  .astryx-transfer-list-panel__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--astryx-spacing-2, 8px);
+    padding-block: var(--astryx-spacing-2, 8px);
+    padding-inline: var(--astryx-spacing-3, 12px);
+    border-block-end: var(--astryx-border-width, 1px) solid var(--astryx-color-border, #00000014);
+  }
+
+  /*
+   * 表头的批量操作看起来像文字链接，但点击区域仍然要够 24px，
+   * 所以只把上下内边距压平、给一个最小高度，文字位置不变。
+   */
+  .astryx-transfer-list-header-action {
+    height: auto;
+    min-block-size: var(--astryx-size-element-sm, 28px);
+    padding-block: 0;
+    padding-inline: 0;
+    border: 0;
+    border-radius: 0;
+    background-color: transparent;
+    color: var(--astryx-color-text-accent, light-dark(#0a66ff, #7cb8ff));
+    font-size: var(--astryx-text-body-size, 0.875rem);
+    font-weight: var(--astryx-text-body-weight, 400);
+    line-height: var(--astryx-text-body-leading, 1.4);
+    cursor: pointer;
+  }
+
+  .astryx-transfer-list-header-action:hover:where(:not(:disabled, [aria-disabled='true'])) {
+    text-decoration: underline;
+  }
+
+  /* 禁用时指针样式和普通文字一致，不做「不可点」的暗示。 */
+  .astryx-transfer-list-header-action:is(:disabled, [aria-disabled='true']) {
+    color: var(--astryx-color-text-secondary, light-dark(#6a6a6a, #9e9e9e));
+    cursor: default;
+  }
+
+  .astryx-transfer-list-header-action: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, 2px);
+  }
+
+  /* 面板主体：给一个高度区间，条目多了自己滚，不让整页跟着变长。 */
+  .astryx-transfer-list-panel__body {
+    min-block-size: var(--astryx-transfer-list-panel-min-block-size, 12rem);
+    max-block-size: var(--astryx-transfer-list-panel-max-block-size, 20rem);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+    padding: 0;
+  }
+
+  .astryx-transfer-list-panel__group-heading {
+    padding-block: var(--astryx-spacing-1, 4px);
+    padding-inline: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-transfer-list-panel__group-heading:first-child {
+    margin-block-start: 0;
+  }
+
+  .astryx-transfer-list-item {
+    min-width: 0;
+    padding-inline: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-transfer-list-panel__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: var(--astryx-transfer-list-panel-min-block-size, 12rem);
+    padding: var(--astryx-spacing-4, 16px);
+    text-align: center;
+  }
+
+  /* 键盘拿起中的行铺一层强调色，表示它正在被移动。 */
+  .astryx-transfer-list-item[data-state='reordering'] {
+    background-color: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
+  }
+
+  /* 拖动中的源行半透明，说明它是被拿起来那一行。 */
+  .astryx-transfer-list-item[data-transfer-list-reorder-source] {
+    opacity: 0.5;
+    user-select: none;
+  }
+
+  /* 落点指示线画在行的上边或下边。 */
+  .astryx-transfer-list-item[data-transfer-list-drop-target] {
+    position: relative;
+  }
+
+  .astryx-transfer-list-item[data-transfer-list-drop-target]::before,
+  .astryx-transfer-list-item[data-transfer-list-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-transfer-list-item[data-transfer-list-drop-target='before']::before {
+    inset-block-start: calc(-1 * var(--astryx-spacing-0-5, 2px));
+  }
+
+  .astryx-transfer-list-item[data-transfer-list-drop-target='after']::after {
+    inset-block-end: calc(-1 * var(--astryx-spacing-0-5, 2px));
+  }
+
+  /*
+   * 手柄给出抓取手势，并且吃掉触摸滚动，否则手机上竖着拖会变成滚动页面。
+   * 禁用时回到普通指针。
+   */
+  .astryx-transfer-list-reorder-handle {
+    margin-inline-start: calc(-1 * var(--astryx-spacing-1-5, 6px));
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .astryx-transfer-list-reorder-handle[aria-pressed='true'] {
+    cursor: grabbing;
+  }
+
+  .astryx-transfer-list-reorder-handle:is(:disabled, [aria-disabled='true']) {
+    cursor: default;
+  }
+
+  /* 跟着指针走的克隆体。位置的 top/left/width 由组件内联给出。 */
+  .astryx-transfer-list-drag-preview {
+    position: fixed;
+    z-index: 2147483000;
+    opacity: 0.5;
+    pointer-events: none;
+    user-select: none;
+    will-change: transform;
+    margin: 0;
+    padding-inline: var(--astryx-spacing-3, 12px);
+    list-style: none;
+  }
+
+  /* 窄的时候改成上下两栏，分隔线也从竖的换成横的。 */
+  @container (max-width: 40rem) {
+    .astryx-transfer-list-collection {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .astryx-transfer-list-panel[data-side='available'] {
+      border-inline-start: 0;
+      border-block-start: var(--astryx-border-width, 1px) solid var(--astryx-color-border, #00000014);
+    }
+
+    .astryx-transfer-list-panel__header {
+      background-color: var(--astryx-color-background-body, #fff);
+    }
+
+    .astryx-transfer-list-panel__body {
+      min-block-size: 0;
+      max-block-size: none;
+      overflow-y: visible;
+      overscroll-behavior: auto;
+      scrollbar-gutter: auto;
+    }
+
+    .astryx-transfer-list-panel__empty {
+      min-block-size: 0;
+    }
+  }
+}