@astryx-vue/core 0.1.0 → 0.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/core",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Vue components for the unofficial astryx-vue community project.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -28,6 +28,14 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./AppShell": {
+      "types": "./dist/AppShell/index.d.ts",
+      "import": "./dist/AppShell/index.js"
+    },
+    "./AspectRatio": {
+      "types": "./dist/AspectRatio/index.d.ts",
+      "import": "./dist/AspectRatio/index.js"
+    },
     "./Avatar": {
       "types": "./dist/Avatar/index.d.ts",
       "import": "./dist/Avatar/index.js"
@@ -36,6 +44,70 @@
       "types": "./dist/AvatarGroup/index.d.ts",
       "import": "./dist/AvatarGroup/index.js"
     },
+    "./CheckboxList": {
+      "types": "./dist/CheckboxList/index.d.ts",
+      "import": "./dist/CheckboxList/index.js"
+    },
+    "./ClickableCard": {
+      "types": "./dist/ClickableCard/index.d.ts",
+      "import": "./dist/ClickableCard/index.js"
+    },
+    "./CommandPalette": {
+      "types": "./dist/CommandPalette/index.d.ts",
+      "import": "./dist/CommandPalette/index.js"
+    },
+    "./ComplexSelector": {
+      "types": "./dist/ComplexSelector/index.d.ts",
+      "import": "./dist/ComplexSelector/index.js"
+    },
+    "./DateRangeInput": {
+      "types": "./dist/DateRangeInput/index.d.ts",
+      "import": "./dist/DateRangeInput/index.js"
+    },
+    "./DateTimeInput": {
+      "types": "./dist/DateTimeInput/index.d.ts",
+      "import": "./dist/DateTimeInput/index.js"
+    },
+    "./FieldStatus": {
+      "types": "./dist/FieldStatus/index.d.ts",
+      "import": "./dist/FieldStatus/index.js"
+    },
+    "./FileInput": {
+      "types": "./dist/FileInput/index.d.ts",
+      "import": "./dist/FileInput/index.js"
+    },
+    "./FormLayout": {
+      "types": "./dist/FormLayout/index.d.ts",
+      "import": "./dist/FormLayout/index.js"
+    },
+    "./Layout": {
+      "types": "./dist/Layout/index.d.ts",
+      "import": "./dist/Layout/index.js"
+    },
+    "./MetadataList": {
+      "types": "./dist/MetadataList/index.d.ts",
+      "import": "./dist/MetadataList/index.js"
+    },
+    "./RadioList": {
+      "types": "./dist/RadioList/index.d.ts",
+      "import": "./dist/RadioList/index.js"
+    },
+    "./Resizable": {
+      "types": "./dist/Resizable/index.d.ts",
+      "import": "./dist/Resizable/index.js"
+    },
+    "./ScrollableArea": {
+      "types": "./dist/ScrollableArea/index.d.ts",
+      "import": "./dist/ScrollableArea/index.js"
+    },
+    "./Section": {
+      "types": "./dist/Section/index.d.ts",
+      "import": "./dist/Section/index.js"
+    },
+    "./SelectableCard": {
+      "types": "./dist/SelectableCard/index.d.ts",
+      "import": "./dist/SelectableCard/index.js"
+    },
     "./StatusDot": {
       "types": "./dist/StatusDot/index.d.ts",
       "import": "./dist/StatusDot/index.js"
@@ -88,6 +160,26 @@
       "types": "./dist/Radio/index.d.ts",
       "import": "./dist/Radio/index.js"
     },
+    "./Stepper": {
+      "types": "./dist/Stepper/index.d.ts",
+      "import": "./dist/Stepper/index.js"
+    },
+    "./Table": {
+      "types": "./dist/Table/index.d.ts",
+      "import": "./dist/Table/index.js"
+    },
+    "./Thumbnail": {
+      "types": "./dist/Thumbnail/index.d.ts",
+      "import": "./dist/Thumbnail/index.js"
+    },
+    "./TimeInput": {
+      "types": "./dist/TimeInput/index.d.ts",
+      "import": "./dist/TimeInput/index.js"
+    },
+    "./Timestamp": {
+      "types": "./dist/Timestamp/index.d.ts",
+      "import": "./dist/Timestamp/index.js"
+    },
     "./Tooltip": {
       "types": "./dist/Tooltip/index.d.ts",
       "import": "./dist/Tooltip/index.js"
@@ -136,6 +228,10 @@
       "types": "./dist/Toast/index.d.ts",
       "import": "./dist/Toast/index.js"
     },
+    "./TreeList": {
+      "types": "./dist/TreeList/index.d.ts",
+      "import": "./dist/TreeList/index.js"
+    },
     "./VisuallyHidden": {
       "types": "./dist/VisuallyHidden/index.d.ts",
       "import": "./dist/VisuallyHidden/index.js"

package/styles/app-shell.css

@@ -0,0 +1,151 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-app-shell {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: clip;
+    min-height: 0;
+  }
+
+  .astryx-app-shell[data-variant='wash'],
+  .astryx-app-shell[data-variant='elevated'] {
+    background-color: var(--astryx-color-background-body, #f1f1f1);
+  }
+
+  .astryx-app-shell[data-variant='surface'],
+  .astryx-app-shell[data-variant='section'] {
+    background-color: var(--astryx-color-background-surface, #fff);
+  }
+
+  .astryx-app-shell[data-height='fill'] {
+    height: 100dvh;
+  }
+
+  .astryx-app-shell[data-height='auto'] {
+    min-height: 100dvh;
+  }
+
+  .astryx-app-shell > .astryx-layout {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .astryx-app-shell__skip {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    background-color: var(--astryx-color-background-surface, #fff);
+    color: var(--astryx-color-text-accent, #262626);
+    font-weight: var(--astryx-font-weight-semibold, 600);
+    text-decoration: none;
+    z-index: 9999;
+  }
+
+  .astryx-app-shell__skip:focus {
+    position: fixed;
+    top: var(--astryx-spacing-2, 8px);
+    inset-inline-start: var(--astryx-spacing-2, 8px);
+    width: auto;
+    height: auto;
+    margin: 0;
+    padding-block: var(--astryx-spacing-2, 8px);
+    padding-inline: var(--astryx-spacing-4, 16px);
+    overflow: visible;
+    clip-path: none;
+    white-space: normal;
+    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);
+  }
+
+  .astryx-app-shell__header[data-variant='wash'],
+  .astryx-app-shell__header[data-variant='elevated'],
+  .astryx-app-shell__sidenav[data-variant='wash'],
+  .astryx-app-shell__sidenav[data-variant='elevated'] {
+    background-color: var(--astryx-color-background-body, #f1f1f1);
+  }
+
+  .astryx-app-shell__header[data-variant='surface'],
+  .astryx-app-shell__sidenav[data-variant='surface'] {
+    background-color: var(--astryx-color-background-surface, #fff);
+  }
+
+  .astryx-app-shell__banner {
+    flex-shrink: 0;
+  }
+
+  .astryx-app-shell__mobile-bar {
+    display: flex;
+    align-items: center;
+    height: var(--astryx-spacing-12, 48px);
+    padding-inline: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-app-shell__mobile-bar[data-variant='wash'],
+  .astryx-app-shell__mobile-bar[data-variant='elevated'] {
+    background-color: var(--astryx-color-background-body, #f1f1f1);
+  }
+
+  .astryx-app-shell__mobile-bar[data-variant='surface'],
+  .astryx-app-shell__mobile-bar[data-variant='section'] {
+    background-color: var(--astryx-color-background-surface, #fff);
+  }
+
+  .astryx-app-shell__mobile-nav {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+  }
+
+  .astryx-app-shell__mobile-nav > .astryx-mobile-nav-toggle {
+    flex: none;
+    margin-inline-start: auto;
+  }
+
+  .astryx-app-shell__main {
+    display: contents;
+  }
+
+  .astryx-app-shell__main[data-elevated] {
+    position: relative;
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    height: 100%;
+  }
+
+  .astryx-app-shell__backdrop {
+    position: absolute;
+    inset: 0;
+    background-color: var(--astryx-color-background-surface, #fff);
+    border-start-start-radius: var(--astryx-radius-page, 1.75rem);
+    pointer-events: none;
+  }
+
+  .astryx-app-shell__content:focus {
+    outline: none;
+  }
+
+  .astryx-app-shell__content[data-variant='wash'] {
+    background-color: var(--astryx-color-background-body, #f1f1f1);
+  }
+
+  .astryx-app-shell__content[data-variant='surface'],
+  .astryx-app-shell__content[data-variant='elevated']:not([data-corner]) {
+    background-color: var(--astryx-color-background-surface, #fff);
+  }
+
+  .astryx-app-shell__content[data-corner] {
+    background-color: transparent;
+    isolation: isolate;
+  }
+}

package/styles/aspect-ratio.css

@@ -0,0 +1,49 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+/*
+ * fit 的子元素尺寸放在 reset 层，选择器特异性为零。
+ * 子元素自己写的宽高和 object-fit 仍然能盖过这里。
+ */
+@layer astryx.reset {
+  :where([data-astryx-aspect-ratio-override='cover'], [data-astryx-aspect-ratio-override='contain']) > :where(*) {
+    width: 100%;
+    height: 100%;
+  }
+
+  :where([data-astryx-aspect-ratio-override='cover']) > :where(img, video) {
+    object-fit: cover;
+  }
+
+  :where([data-astryx-aspect-ratio-override='contain']) > :where(img, video) {
+    object-fit: contain;
+  }
+}
+
+@layer astryx.components {
+  .astryx-aspect-ratio {
+    position: relative;
+    width: 100%;
+    overflow: clip;
+    min-height: 0;
+    flex-shrink: 0;
+    aspect-ratio: var(--astryx-aspect-ratio);
+  }
+
+  .astryx-aspect-ratio[data-shape='ellipse'] {
+    border-radius: 50%;
+  }
+
+  .astryx-aspect-ratio__child {
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .astryx-aspect-ratio__child[data-fit='center'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/styles/bordered-control.css

@@ -0,0 +1,87 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-bordered-control {
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    min-width: 0;
+    height: var(--astryx-input-height-md, 32px);
+    padding: var(--astryx-spacing-1, 4px) var(--astryx-spacing-2, 8px);
+    border: 1px solid var(--astryx-input-status-color, var(--astryx-input-border, #d4d4d4));
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    color: var(--astryx-color-text-primary, #171717);
+    background: var(--astryx-input-background, #fff);
+    font-family: inherit;
+    font-size: var(--astryx-text-body-size, 14px);
+    font-weight: 400;
+    line-height: 1.4286;
+    transition: border-color 130ms cubic-bezier(0.24, 1, 0.4, 1), box-shadow 130ms cubic-bezier(0.24, 1, 0.4, 1);
+  }
+
+  .astryx-bordered-control[data-size='sm'] {
+    height: var(--astryx-input-height-sm, 28px);
+  }
+
+  .astryx-bordered-control[data-size='lg'] {
+    height: var(--astryx-input-height-lg, 36px);
+  }
+
+  .astryx-bordered-control[data-status='error'],
+  .astryx-date-time-input[data-status='error'] {
+    --astryx-input-status-color: var(--astryx-input-error, #e33f4a);
+  }
+
+  .astryx-bordered-control[data-status='warning'],
+  .astryx-date-time-input[data-status='warning'] {
+    --astryx-input-status-color: var(--astryx-input-warning, #a67a00);
+  }
+
+  .astryx-bordered-control[data-status='success'],
+  .astryx-date-time-input[data-status='success'] {
+    --astryx-input-status-color: var(--astryx-input-success, #198100);
+  }
+
+  @media (hover: hover) {
+    .astryx-bordered-control:not([data-disabled='true']):hover:not(:focus-within) {
+      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--astryx-input-status-color, var(--astryx-input-border, #d4d4d4)) 30%, transparent);
+    }
+  }
+
+  .astryx-bordered-control:focus-within {
+    border-color: var(--astryx-input-status-color, var(--astryx-input-focus, #262626));
+    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--astryx-input-status-color, var(--astryx-input-focus, #262626)) 15%, transparent);
+  }
+
+  .astryx-bordered-control[data-disabled='true'] {
+    opacity: 0.5;
+    box-shadow: none;
+    cursor: default;
+  }
+
+  .astryx-bordered-control > .astryx-field-icon {
+    color: var(--astryx-input-status-color);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-bordered-control {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .astryx-bordered-control {
+      border-color: ButtonText;
+      color: CanvasText;
+      background: Canvas;
+      box-shadow: none;
+    }
+
+    .astryx-bordered-control:focus-within {
+      border-color: Highlight;
+    }
+  }
+}

package/styles/calendar.css

@@ -115,8 +115,12 @@
   }
 
   .astryx-calendar-cell.is-selected {
-    background: var(--astryx-button-primary-background, light-dark(#262626, #ebebeb));
-    color: var(--astryx-button-primary-foreground, light-dark(#ffffff, #171717));
+    background: light-dark(#1b1b1b, #f1f1f1);
+    color: light-dark(#ffffff, #111111);
+  }
+
+  .astryx-calendar-cell.is-today.is-selected {
+    box-shadow: inset 0 0 0 1px light-dark(#000000, #ffffff);
   }
 
   .astryx-calendar-cell.is-disabled {
@@ -126,6 +130,8 @@
   }
 
   .astryx-calendar-day {
+    position: relative;
+    z-index: 1;
     font-size: var(--astryx-text-body-size, 0.875rem);
   }
 

package/styles/card.css

@@ -29,6 +29,10 @@
     --container-padding-inline-end: var(--_card-padding-inline-end);
     --container-padding-block-start: var(--_card-padding-block-start);
     --container-padding-block-end: var(--_card-padding-block-end);
+    --layout-padding-own-outer-x: initial;
+    --layout-padding-own-outer-y: initial;
+    --layout-padding-outer-x: var(--_card-padding-inline-start);
+    --layout-padding-outer-y: var(--_card-padding-block-start);
   }
 
   .astryx-card[data-scrollable='true'] {
@@ -111,7 +115,7 @@
   }
 
   .astryx-card[data-variant='muted'] {
-    background-color: var(--astryx-card-muted-background, #f5f5f5);
+    background-color: var(--astryx-card-muted-background, var(--astryx-color-background-muted, #f1f1f1));
   }
 
   .astryx-card[data-variant='blue'] {

package/styles/checkbox-list.css

@@ -0,0 +1,15 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-checkbox-list {
+    min-width: 0;
+  }
+
+  .astryx-checkbox-list .astryx-item[data-selected='true'] {
+    background-color: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
+  }
+
+  .astryx-checkbox-list .astryx-checkbox-input {
+    gap: 0;
+  }
+}

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;