@astryx-vue/lab 0.3.1 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +143 -37
  2. package/dist/index.js +612 -68
  3. package/lab.css +2 -0
  4. package/package.json +3 -3
  5. package/styles/code-editor.css +95 -0
  6. package/styles/tour.css +65 -0
package/lab.css CHANGED
@@ -9,3 +9,5 @@
9
9
  @import './styles/transfer-list-selector.css';
10
10
  @import './styles/list-input.css';
11
11
  @import './styles/diff-viewer.css';
12
+ @import './styles/tour.css';
13
+ @import './styles/code-editor.css';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@astryx-vue/lab",
3
3
  "type": "module",
4
- "version": "0.3.1",
4
+ "version": "0.5.0",
5
5
  "description": "Astryx lab components for Vue 3 — experimental components that may change. Ships only under the canary dist-tag.",
6
6
  "author": "ShenQingchuan",
7
7
  "license": "MIT",
@@ -53,7 +53,7 @@
53
53
  ],
54
54
  "peerDependencies": {
55
55
  "vue": "^3.5.0",
56
- "@astryx-vue/core": "^0.7.11"
56
+ "@astryx-vue/core": "^0.7.13"
57
57
  },
58
58
  "devDependencies": {
59
59
  "@types/node": "26.6.4",
@@ -64,7 +64,7 @@
64
64
  "unplugin-vue": "8.0.0",
65
65
  "vue": "3.5.43",
66
66
  "vue-tsc": "3.3.12",
67
- "@astryx-vue/core": "^0.7.11"
67
+ "@astryx-vue/core": "^0.7.13"
68
68
  },
69
69
  "scripts": {
70
70
  "build": "tsdown",
package/styles/code-editor.css ADDED
@@ -0,0 +1,95 @@
1
+ @layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
2
+
3
+ @layer astryx.components {
4
+ .astryx-code-editor {
5
+ position: relative;
6
+ display: flex;
7
+ border: var(--astryx-border-width, 1px) solid var(--astryx-color-border, #ebebeb);
8
+ border-radius: var(--astryx-radius-element, 0.625rem);
9
+ background: var(--astryx-color-background-muted, #f5f5f5);
10
+ overflow: hidden;
11
+ }
12
+
13
+ .astryx-code-editor.is-focused {
14
+ border-color: var(--astryx-color-accent, #0064e0);
15
+ box-shadow: 0 0 0 1px var(--astryx-color-accent, #0064e0);
16
+ }
17
+
18
+ .astryx-code-editor__container {
19
+ display: flex;
20
+ flex: 1;
21
+ min-width: 0;
22
+ overflow: auto;
23
+ }
24
+
25
+ .astryx-code-editor__gutter {
26
+ flex-shrink: 0;
27
+ padding-block: var(--astryx-spacing-3, 12px);
28
+ padding-inline-start: var(--astryx-spacing-4, 16px);
29
+ padding-inline-end: var(--astryx-spacing-3, 12px);
30
+ border-inline-end: var(--astryx-border-width, 1px) solid var(--astryx-color-border, #ebebeb);
31
+ color: var(--astryx-color-text-disabled, #a3a3a3);
32
+ font-family: var(--astryx-font-family-code, monospace);
33
+ line-height: var(--astryx-text-code-leading, 1.5);
34
+ text-align: end;
35
+ user-select: none;
36
+ }
37
+
38
+ .astryx-code-editor__body {
39
+ position: relative;
40
+ flex: 1;
41
+ min-width: 0;
42
+ }
43
+
44
+ .astryx-code-editor__input {
45
+ display: block;
46
+ min-height: 3em;
47
+ margin: 0;
48
+ padding-block: var(--astryx-spacing-3, 12px);
49
+ padding-inline: var(--astryx-spacing-4, 16px);
50
+ color: var(--astryx-color-text-primary, #171717);
51
+ caret-color: var(--astryx-color-text-primary, #171717);
52
+ font-family: var(--astryx-font-family-code, monospace);
53
+ line-height: var(--astryx-text-code-leading, 1.5);
54
+ tab-size: 2;
55
+ white-space: pre;
56
+ word-break: normal;
57
+ overflow-wrap: normal;
58
+ outline: none;
59
+ }
60
+
61
+ .astryx-code-editor__input,
62
+ .astryx-code-editor__gutter {
63
+ font-size: var(--astryx-text-code-size, 14px);
64
+ }
65
+
66
+ .astryx-code-editor[data-size='sm'] .astryx-code-editor__input,
67
+ .astryx-code-editor[data-size='sm'] .astryx-code-editor__gutter {
68
+ font-size: var(--astryx-font-size-sm, 12px);
69
+ }
70
+
71
+ .astryx-code-editor__placeholder {
72
+ position: absolute;
73
+ top: var(--astryx-spacing-3, 12px);
74
+ inset-inline-start: var(--astryx-spacing-4, 16px);
75
+ color: var(--astryx-color-text-disabled, #a3a3a3);
76
+ font-family: var(--astryx-font-family-code, monospace);
77
+ line-height: var(--astryx-text-code-leading, 1.5);
78
+ pointer-events: none;
79
+ user-select: none;
80
+ }
81
+ }
82
+
83
+ .astryx-code-editor__input::highlight(astryx-keyword) { color: var(--astryx-code-syntax-keyword, #52237b); }
84
+ .astryx-code-editor__input::highlight(astryx-string) { color: var(--astryx-code-syntax-string, #004800); }
85
+ .astryx-code-editor__input::highlight(astryx-comment) { color: var(--astryx-code-syntax-comment, #605f52); }
86
+ .astryx-code-editor__input::highlight(astryx-number) { color: var(--astryx-code-syntax-number, #622e00); }
87
+ .astryx-code-editor__input::highlight(astryx-function) { color: var(--astryx-code-syntax-function, #203a6c); }
88
+ .astryx-code-editor__input::highlight(astryx-type) { color: var(--astryx-code-syntax-type, #52237b); }
89
+ .astryx-code-editor__input::highlight(astryx-tag) { color: var(--astryx-code-syntax-tag, #6d211c); }
90
+ .astryx-code-editor__input::highlight(astryx-attribute) { color: var(--astryx-code-syntax-attribute, #413e00); }
91
+ .astryx-code-editor__input::highlight(astryx-property) { color: var(--astryx-code-syntax-property, #203a6c); }
92
+ .astryx-code-editor__input::highlight(astryx-operator) { color: var(--astryx-code-syntax-operator, #171717); }
93
+ .astryx-code-editor__input::highlight(astryx-constant) { color: var(--astryx-code-syntax-constant, #622e00); }
94
+ .astryx-code-editor__input::highlight(astryx-punctuation) { color: var(--astryx-code-syntax-punctuation, #525252); }
95
+ .astryx-code-editor__input::highlight(astryx-variable) { color: var(--astryx-code-syntax-variable, #203a6c); }
package/styles/tour.css ADDED
@@ -0,0 +1,65 @@
1
+ @layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
2
+
3
+ @layer astryx.components {
4
+ .astryx-tour-step {
5
+ display: flex;
6
+ flex-direction: column;
7
+ gap: var(--astryx-spacing-3, 12px);
8
+ max-width: 320px;
9
+ }
10
+
11
+ .astryx-tour-step__footer {
12
+ align-items: center;
13
+ }
14
+
15
+ .astryx-tour-highlight-root {
16
+ position: fixed;
17
+ z-index: calc(var(--astryx-popover-z-index, 1000) - 1);
18
+ inset: 0;
19
+ box-sizing: border-box;
20
+ width: 100vw;
21
+ max-width: none;
22
+ height: 100vh;
23
+ max-height: none;
24
+ margin: 0;
25
+ padding: 0;
26
+ border: 0;
27
+ background: transparent;
28
+ overflow: visible;
29
+ pointer-events: none;
30
+ }
31
+
32
+ .astryx-tour-highlight-root.is-interactive {
33
+ pointer-events: auto;
34
+ }
35
+
36
+ .astryx-tour-highlight {
37
+ position: absolute;
38
+ pointer-events: none;
39
+ box-shadow:
40
+ 0 0 0 2px var(--astryx-color-background-surface, #fff),
41
+ 0 0 0 4px var(--astryx-color-accent, #0064e0);
42
+ transition:
43
+ top var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, ease),
44
+ left var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, ease),
45
+ width var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, ease),
46
+ height var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, ease);
47
+ }
48
+
49
+ .astryx-tour-highlight.has-backdrop {
50
+ box-shadow:
51
+ 0 0 0 2px var(--astryx-color-background-surface, #fff),
52
+ 0 0 0 4px var(--astryx-color-accent, #0064e0),
53
+ 0 0 0 9999px var(--astryx-color-overlay, rgb(0 0 0 / 50%));
54
+ }
55
+
56
+ .astryx-tour-highlight.is-hidden {
57
+ opacity: 0;
58
+ }
59
+
60
+ @media (prefers-reduced-motion: reduce) {
61
+ .astryx-tour-highlight {
62
+ transition: none;
63
+ }
64
+ }
65
+ }