@astryx-vue/core 0.1.1 → 0.1.3

package/styles/clickable-card.css

@@ -0,0 +1,101 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-clickable-card {
+    position: relative;
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .astryx-clickable-card::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    background-color: transparent;
+    transition: background-color var(--astryx-duration-fast, 130ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-clickable-card:active::after {
+    background-color: var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19));
+  }
+
+  @media (hover: hover) {
+    .astryx-clickable-card:hover::after {
+      background-color: var(--astryx-color-overlay-hover, light-dark(#0536590c, #ffffff0c));
+    }
+
+    .astryx-clickable-card[data-variant='default']:hover {
+      border-color: var(--astryx-color-border-emphasized, #d4d4d4);
+    }
+  }
+
+  .astryx-clickable-card:focus-within {
+    outline: var(--astryx-focus-outline-width, 2px) solid var(--astryx-focus-outline-color, var(--astryx-color-text-primary, #171717));
+    outline-offset: var(--astryx-focus-outline-offset, 2px);
+  }
+
+  .astryx-clickable-card[data-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .astryx-clickable-card[data-disabled='true']::after,
+  .astryx-clickable-card[data-disabled='true']:hover::after,
+  .astryx-clickable-card[data-disabled='true']:active::after {
+    background-color: transparent;
+  }
+
+  .astryx-selectable-card {
+    transition:
+      box-shadow var(--astryx-duration-fast, 130ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1)),
+      border-color var(--astryx-duration-fast, 130ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-selectable-card[data-selected='true'] {
+    border-color: var(--astryx-selectable-card-accent, var(--astryx-color-accent, #0082fb));
+    --_card-ring: inset 0 0 0 2px var(--astryx-selectable-card-accent, var(--astryx-color-accent, #0082fb));
+  }
+
+  .astryx-selectable-card[data-selected='true'][data-variant='blue'] {
+    --astryx-selectable-card-accent: var(--astryx-color-blue, #0082fb);
+  }
+
+  .astryx-selectable-card[data-selected='true'][data-variant='cyan'] {
+    --astryx-selectable-card-accent: var(--astryx-color-cyan, #0891b2);
+  }
+
+  .astryx-selectable-card[data-selected='true'][data-variant='gray'] {
+    --astryx-selectable-card-accent: var(--astryx-color-gray, #737373);
+  }
+
+  .astryx-selectable-card[data-selected='true'][data-variant='green'] {
+    --astryx-selectable-card-accent: var(--astryx-color-green, #16a34a);
+  }
+
+  .astryx-selectable-card[data-selected='true'][data-variant='orange'] {
+    --astryx-selectable-card-accent: var(--astryx-color-orange, #ea580c);
+  }
+
+  .astryx-selectable-card[data-selected='true'][data-variant='pink'] {
+    --astryx-selectable-card-accent: var(--astryx-color-pink, #db2777);
+  }
+
+  .astryx-selectable-card[data-selected='true'][data-variant='purple'] {
+    --astryx-selectable-card-accent: var(--astryx-color-purple, #9333ea);
+  }
+
+  .astryx-selectable-card[data-selected='true'][data-variant='red'] {
+    --astryx-selectable-card-accent: var(--astryx-color-red, #dc2626);
+  }
+
+  .astryx-selectable-card[data-selected='true'][data-variant='teal'] {
+    --astryx-selectable-card-accent: var(--astryx-color-teal, #0d9488);
+  }
+
+  .astryx-selectable-card[data-selected='true'][data-variant='yellow'] {
+    --astryx-selectable-card-accent: var(--astryx-color-yellow, #ca8a04);
+  }
+}

package/styles/collapsible.css

@@ -133,6 +133,43 @@
     opacity: 0;
   }
 
+  .astryx-collapsible-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .astryx-collapsible[data-dividers='true'] {
+    border-block-start: var(--astryx-border-width, 1px) solid var(--astryx-color-border, #00000014);
+  }
+
+  .astryx-collapsible-group > .astryx-collapsible:first-child {
+    border-block-start-width: 0;
+  }
+
+  .astryx-collapsible[data-density='compact'] > .astryx-collapsible-trigger {
+    padding-block: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-collapsible[data-density='balanced'] > .astryx-collapsible-trigger {
+    padding-block: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-collapsible[data-density='spacious'] > .astryx-collapsible-trigger {
+    padding-block: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-collapsible[data-density='compact'] > .astryx-collapsible-content {
+    padding-block-end: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-collapsible[data-density='balanced'] > .astryx-collapsible-content {
+    padding-block-end: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-collapsible[data-density='spacious'] > .astryx-collapsible-content {
+    padding-block-end: var(--astryx-spacing-3, 12px);
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .astryx-collapsible-content {
       transition-duration: 0.01ms;

package/styles/command-palette.css

@@ -0,0 +1,183 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-command-palette {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    max-height: 100%;
+  }
+
+  .astryx-command-palette-header,
+  .astryx-command-palette-footer-wrap {
+    flex-shrink: 0;
+  }
+
+  .astryx-command-palette-header {
+    border-block-end: var(--astryx-border-width, 1px) solid var(--astryx-color-border, #00000014);
+  }
+
+  .astryx-command-palette-footer-wrap {
+    border-block-start: var(--astryx-border-width, 1px) solid var(--astryx-color-border, #00000014);
+  }
+
+  .astryx-command-palette-input {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    padding-inline: var(--astryx-spacing-4, 16px);
+    padding-block: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-command-palette-search {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--astryx-color-text-secondary, #525252);
+    mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+  }
+
+  .astryx-command-palette-field {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--astryx-color-text-primary, #171717);
+    font-family: var(--astryx-font-family-body, Figtree, sans-serif);
+    font-size: var(--astryx-text-body-size, 0.875rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+  }
+
+  .astryx-command-palette-field::placeholder {
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  @media (pointer: coarse) {
+    .astryx-command-palette-field {
+      font-size: max(1rem, var(--astryx-text-body-size, 0.875rem));
+    }
+  }
+
+  .astryx-command-palette-end {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-command-palette-spinner {
+    opacity: 0;
+    animation: astryx-command-palette-spinner 1ms linear 150ms forwards;
+  }
+
+  @keyframes astryx-command-palette-spinner {
+    to { opacity: 1; }
+  }
+
+  .astryx-command-palette-list {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--astryx-spacing-0-5, 2px);
+    min-height: 0;
+    max-height: 100%;
+    overflow-y: auto;
+    padding: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-command-palette-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-0-5, 2px);
+    padding-block: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-command-palette-group-heading {
+    padding-inline: var(--astryx-spacing-3, 12px);
+    padding-block: var(--astryx-spacing-1, 4px);
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+    user-select: none;
+  }
+
+  .astryx-command-palette-item {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    width: 100%;
+    padding-inline: var(--astryx-spacing-3, 12px);
+    padding-block: var(--astryx-spacing-2, 8px);
+    border-radius: var(--astryx-radius-inner, 4px);
+    background: transparent;
+    color: var(--astryx-color-text-primary, #171717);
+    font-size: var(--astryx-text-label-size, 0.875rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  @media (hover: hover) {
+    .astryx-command-palette-item:hover:not([data-disabled]) {
+      background: var(--astryx-color-overlay-hover, light-dark(#0536590c, #ffffff0c));
+    }
+  }
+
+  .astryx-command-palette-item:active:not([data-disabled]) {
+    background: var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19));
+  }
+
+  .astryx-command-palette-item[data-highlighted='true'] {
+    background: var(--astryx-color-overlay-hover, light-dark(#0536590c, #ffffff0c));
+  }
+
+  .astryx-command-palette-item[data-selected='true'] {
+    background: var(--astryx-color-accent-muted, light-dark(#0082fb33, #0082fb3f));
+  }
+
+  .astryx-command-palette-item[data-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .astryx-command-palette-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-block: var(--astryx-spacing-8, 32px);
+    padding-inline: var(--astryx-spacing-4, 16px);
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+    text-align: center;
+  }
+
+  .astryx-command-palette-footer {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-4, 16px);
+    padding-inline: var(--astryx-spacing-4, 16px);
+    padding-block: var(--astryx-spacing-2, 8px);
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+  }
+
+  .astryx-command-palette-hint {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-command-palette-spinner {
+      animation: none;
+      opacity: 1;
+    }
+  }
+}

package/styles/complex-selector.css

@@ -0,0 +1,114 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-complex-selector-field .astryx-popover-trigger {
+    display: block;
+    width: 100%;
+  }
+
+  .astryx-complex-selector-field[data-variant='ghost'] .astryx-popover-trigger {
+    width: auto;
+  }
+
+  .astryx-complex-selector {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--astryx-spacing-2, 8px);
+    width: 100%;
+    min-height: var(--astryx-input-height-md, 32px);
+    margin: 0;
+    padding-block: var(--astryx-spacing-2, 8px);
+    padding-inline: var(--astryx-spacing-3, 12px);
+    border: var(--astryx-border-width, 1px) solid var(--astryx-input-border, #d4d4d4);
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: var(--astryx-input-background, #fff);
+    color: var(--astryx-color-text-primary, #171717);
+    font-family: var(--astryx-font-family-body, Figtree, sans-serif);
+    font-size: var(--astryx-text-label-size, 0.875rem);
+    line-height: var(--astryx-text-label-leading, 1.4286);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  @media (pointer: coarse) {
+    .astryx-complex-selector {
+      font-size: max(1rem, var(--astryx-text-label-size, 0.875rem));
+    }
+  }
+
+  .astryx-complex-selector[data-size='sm'] {
+    min-height: var(--astryx-input-height-sm, 28px);
+  }
+
+  .astryx-complex-selector[data-size='lg'] {
+    min-height: var(--astryx-input-height-lg, 36px);
+  }
+
+  .astryx-complex-selector[data-variant='ghost'] {
+    width: auto;
+    border-color: transparent;
+    background: transparent;
+  }
+
+  @media (hover: hover) {
+    .astryx-complex-selector[data-variant='ghost']:not(:disabled):hover {
+      background: var(--astryx-color-overlay-hover, #0000000d);
+    }
+  }
+
+  .astryx-complex-selector[data-placeholder] {
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  .astryx-complex-selector[data-status='error'] {
+    border-color: var(--astryx-input-error, #e33f4a);
+  }
+
+  .astryx-complex-selector[data-status='warning'] {
+    border-color: var(--astryx-input-warning, #a67a00);
+  }
+
+  .astryx-complex-selector:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) solid var(--astryx-focus-outline-color, var(--astryx-color-text-primary, #171717));
+    outline-offset: var(--astryx-focus-outline-offset, 2px);
+  }
+
+  .astryx-complex-selector:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .astryx-complex-selector-start {
+    flex-shrink: 0;
+  }
+
+  .astryx-complex-selector-value {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .astryx-complex-selector-chevron {
+    flex-shrink: 0;
+    transition: transform var(--astryx-duration-fast, 130ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-complex-selector-chevron[data-state='expanded'] {
+    transform: rotate(180deg);
+  }
+
+  .astryx-complex-selector-content {
+    max-height: min(480px, calc(100vh - 32px));
+    overflow: auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-complex-selector-chevron {
+      transition: none;
+    }
+  }
+}

package/styles/field.css

@@ -73,6 +73,18 @@
     gap: 0;
   }
 
+  /*
+   * horizontal-labels 把标签和控件拆成网格的两列。
+   * 标签顶部补上边框和 4px，才能和输入框里的文字对齐。
+   */
+  .astryx-field[data-layout='horizontal-labels'] {
+    display: contents;
+  }
+
+  .astryx-field[data-layout='horizontal-labels'] > .astryx-field-label-group {
+    padding-top: calc(var(--astryx-border-width, 1px) + var(--astryx-spacing-1, 4px));
+  }
+
   .astryx-field-control {
     position: relative;
     display: flex;

package/styles/form-layout.css

@@ -0,0 +1,31 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-form-layout {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-4, 16px);
+    min-width: 0;
+  }
+
+  .astryx-form-layout[data-direction='horizontal'] {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
+  .astryx-form-layout[data-direction='horizontal-labels'] {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--astryx-spacing-3, 12px) var(--astryx-spacing-4, 16px);
+    align-items: start;
+  }
+
+  @media (max-width: 480px) {
+    .astryx-form-layout[data-direction='horizontal-labels'] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--astryx-spacing-4, 16px);
+    }
+  }
+}

package/styles/heading.css

@@ -33,22 +33,6 @@
     color: inherit;
   }
 
-  .astryx-heading--weight-regular {
-    font-weight: var(--astryx-font-weight-regular, 400);
-  }
-
-  .astryx-heading--weight-medium {
-    font-weight: var(--astryx-font-weight-medium, 500);
-  }
-
-  .astryx-heading--weight-semibold {
-    font-weight: var(--astryx-font-weight-semibold, 600);
-  }
-
-  .astryx-heading--weight-bold {
-    font-weight: var(--astryx-font-weight-bold, 700);
-  }
-
   .astryx-heading--level-1 {
     font-size: var(--astryx-heading-level-1-size, 2rem);
   }
@@ -62,7 +46,9 @@
   }
 
   .astryx-heading--level-4 {
-    font-size: var(--astryx-heading-level-4-size, 1.25rem);
+    font-size: var(--astryx-heading-level-4-size, 0.875rem);
+    font-weight: var(--astryx-font-weight-bold, 700);
+    line-height: var(--astryx-text-heading-4-leading, 1.4286);
   }
 
   .astryx-heading--level-5 {
@@ -112,6 +98,22 @@
     line-height: var(--astryx-text-supporting-leading, 1.6667);
   }
 
+  .astryx-heading--weight-regular {
+    font-weight: var(--astryx-font-weight-regular, 400);
+  }
+
+  .astryx-heading--weight-medium {
+    font-weight: var(--astryx-font-weight-medium, 500);
+  }
+
+  .astryx-heading--weight-semibold {
+    font-weight: var(--astryx-font-weight-semibold, 600);
+  }
+
+  .astryx-heading--weight-bold {
+    font-weight: var(--astryx-font-weight-bold, 700);
+  }
+
   .astryx-heading--truncate-single {
     overflow: hidden;
     text-overflow: ellipsis;