@astryx-vue/core 0.1.1 → 0.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/core",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "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,10 +44,26 @@
       "types": "./dist/AvatarGroup/index.d.ts",
       "import": "./dist/AvatarGroup/index.js"
     },
+    "./Carousel": {
+      "types": "./dist/Carousel/index.d.ts",
+      "import": "./dist/Carousel/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"
@@ -56,14 +80,50 @@
       "types": "./dist/FileInput/index.d.ts",
       "import": "./dist/FileInput/index.js"
     },
+    "./FormLayout": {
+      "types": "./dist/FormLayout/index.d.ts",
+      "import": "./dist/FormLayout/index.js"
+    },
+    "./Icon": {
+      "types": "./dist/Icon/index.d.ts",
+      "import": "./dist/Icon/index.js"
+    },
+    "./Layout": {
+      "types": "./dist/Layout/index.d.ts",
+      "import": "./dist/Layout/index.js"
+    },
+    "./Lightbox": {
+      "types": "./dist/Lightbox/index.d.ts",
+      "import": "./dist/Lightbox/index.js"
+    },
     "./MetadataList": {
       "types": "./dist/MetadataList/index.d.ts",
       "import": "./dist/MetadataList/index.js"
     },
+    "./Outline": {
+      "types": "./dist/Outline/index.d.ts",
+      "import": "./dist/Outline/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"
@@ -116,10 +176,18 @@
       "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"
     },
+    "./Theme": {
+      "types": "./dist/Theme/index.d.ts",
+      "import": "./dist/Theme/index.js"
+    },
     "./Thumbnail": {
       "types": "./dist/Thumbnail/index.d.ts",
       "import": "./dist/Thumbnail/index.js"
@@ -128,6 +196,10 @@
       "types": "./dist/TimeInput/index.d.ts",
       "import": "./dist/TimeInput/index.js"
     },
+    "./Timer": {
+      "types": "./dist/Timer/index.d.ts",
+      "import": "./dist/Timer/index.js"
+    },
     "./Timestamp": {
       "types": "./dist/Timestamp/index.d.ts",
       "import": "./dist/Timestamp/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/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/carousel.css

@@ -0,0 +1,120 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-carousel {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .astryx-carousel__scroller {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-carousel-gap, var(--astryx-spacing-1, 4px));
+    width: 100%;
+    min-width: 0;
+    padding-inline: var(--astryx-carousel-padding, 0);
+    padding-bottom: 1px;
+    margin-bottom: -1px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
+    scroll-behavior: smooth;
+    scroll-padding-inline: var(--astryx-carousel-padding, 0);
+    scrollbar-width: none;
+  }
+
+  .astryx-carousel__scroller::-webkit-scrollbar {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-carousel__scroller {
+      scroll-behavior: auto;
+    }
+  }
+
+  .astryx-carousel__scroller:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, var(--astryx-color-accent, #0074e2));
+    outline-offset: var(--astryx-focus-outline-offset, 3px);
+  }
+
+  .astryx-carousel__scroller[data-snap] {
+    scroll-snap-type: x mandatory;
+  }
+
+  .astryx-carousel__scroller[data-fade='start'] {
+    mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 30%) 2px, #000 var(--astryx-spacing-1, 4px));
+  }
+
+  .astryx-carousel__scroller[data-fade='end'] {
+    mask-image: linear-gradient(to left, transparent 0%, rgb(0 0 0 / 30%) 2px, #000 var(--astryx-spacing-1, 4px));
+  }
+
+  .astryx-carousel__scroller[data-fade='both'] {
+    mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 30%) 2px, #000 var(--astryx-spacing-1, 4px), #000 calc(100% - var(--astryx-spacing-1, 4px)), rgb(0 0 0 / 30%) calc(100% - 2px), transparent 100%);
+  }
+
+  [dir='rtl'] .astryx-carousel__scroller[data-fade='start'] {
+    mask-image: linear-gradient(to left, transparent 0%, rgb(0 0 0 / 30%) 2px, #000 var(--astryx-spacing-1, 4px));
+  }
+
+  [dir='rtl'] .astryx-carousel__scroller[data-fade='end'] {
+    mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 30%) 2px, #000 var(--astryx-spacing-1, 4px));
+  }
+
+  .astryx-carousel__item {
+    display: flex;
+    flex-shrink: 0;
+    scroll-snap-align: start;
+  }
+
+  .astryx-carousel__controls {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    pointer-events: none;
+  }
+
+  .astryx-carousel__pill {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--astryx-radius-full, 9999px);
+    background-color: var(--astryx-color-background-popover, #fff);
+    box-shadow: var(--astryx-shadow-med, 0 2px 4px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 10%));
+    pointer-events: auto;
+    opacity: 1;
+    transition: opacity var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+    --astryx-button-radius: var(--astryx-radius-full, 9999px);
+  }
+
+  .astryx-carousel__pill--start {
+    transform: translateX(-50%);
+  }
+
+  .astryx-carousel__pill--end {
+    transform: translateX(50%);
+  }
+
+  [dir='rtl'] .astryx-carousel__pill--start {
+    transform: translateX(50%);
+  }
+
+  [dir='rtl'] .astryx-carousel__pill--end {
+    transform: translateX(-50%);
+  }
+
+  .astryx-carousel__pill[data-hidden] {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  [dir='rtl'] .astryx-carousel__pill .astryx-icon {
+    transform: scaleX(-1);
+  }
+}

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;