@dxos/lit-ui 0.8.3 → 0.8.4-main.03d5cd7b56
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.
- package/dist/src/dx-anchor/dx-anchor.d.ts +9 -0
- package/dist/src/dx-anchor/dx-anchor.d.ts.map +1 -0
- package/dist/src/{dx-ref-tag/dx-ref-tag.js → dx-anchor/dx-anchor.js} +12 -21
- package/dist/src/dx-anchor/dx-anchor.js.map +1 -0
- package/dist/src/dx-anchor/index.d.ts +2 -0
- package/dist/src/dx-anchor/index.d.ts.map +1 -0
- package/dist/src/dx-anchor/index.js +5 -0
- package/dist/src/dx-anchor/index.js.map +1 -0
- package/dist/src/dx-avatar/dx-avatar.d.ts +2 -2
- package/dist/src/dx-avatar/dx-avatar.d.ts.map +1 -1
- package/dist/src/dx-avatar/dx-avatar.js +62 -35
- package/dist/src/dx-avatar/dx-avatar.js.map +1 -1
- package/dist/src/dx-avatar/dx-avatar.lit-stories.d.ts +2 -2
- package/dist/src/dx-avatar/dx-avatar.lit-stories.d.ts.map +1 -1
- package/dist/src/dx-avatar/dx-avatar.lit-stories.js +6 -6
- package/dist/src/dx-avatar/dx-avatar.lit-stories.js.map +1 -1
- package/dist/src/dx-icon/dx-icon.d.ts.map +1 -1
- package/dist/src/dx-icon/dx-icon.js +1 -1
- package/dist/src/dx-icon/dx-icon.js.map +1 -1
- package/dist/src/dx-tag-picker/dx-tag-picker-item.d.ts.map +1 -1
- package/dist/src/dx-tag-picker/dx-tag-picker-item.js +1 -1
- package/dist/src/dx-tag-picker/dx-tag-picker-item.js.map +1 -1
- package/dist/src/index.d.ts +2 -2
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/index.js +2 -2
- package/dist/src/index.js.map +1 -1
- package/dist/src/react.d.ts +6 -5
- package/dist/src/react.d.ts.map +1 -1
- package/dist/src/react.js +6 -5
- package/dist/src/react.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +20 -21
- package/src/defs.ts +1 -1
- package/src/{dx-ref-tag/dx-ref-tag.ts → dx-anchor/dx-anchor.ts} +9 -24
- package/src/{dx-ref-tag → dx-anchor}/index.ts +1 -1
- package/src/dx-avatar/dx-avatar.lit-stories.ts +7 -6
- package/src/dx-avatar/dx-avatar.pcss +57 -31
- package/src/dx-avatar/dx-avatar.ts +67 -37
- package/src/dx-icon/dx-icon.ts +1 -1
- package/src/dx-tag-picker/dx-tag-picker-item.ts +1 -1
- package/src/dx-tag-picker/dx-tag-picker.pcss +9 -6
- package/src/index.ts +2 -2
- package/src/react.ts +12 -10
- package/dist/src/dx-ref-tag/dx-ref-tag.d.ts +0 -19
- package/dist/src/dx-ref-tag/dx-ref-tag.d.ts.map +0 -1
- package/dist/src/dx-ref-tag/dx-ref-tag.js.map +0 -1
- package/dist/src/dx-ref-tag/index.d.ts +0 -2
- package/dist/src/dx-ref-tag/index.d.ts.map +0 -1
- package/dist/src/dx-ref-tag/index.js +0 -5
- package/dist/src/dx-ref-tag/index.js.map +0 -1
- package/dist/types/src/defs.d.ts +0 -2
- package/dist/types/src/defs.d.ts.map +0 -1
- package/dist/types/src/defs.js +0 -4
- package/dist/types/src/defs.js.map +0 -1
- package/dist/types/src/dx-avatar/dx-avatar.d.ts +0 -31
- package/dist/types/src/dx-avatar/dx-avatar.d.ts.map +0 -1
- package/dist/types/src/dx-avatar/dx-avatar.js +0 -187
- package/dist/types/src/dx-avatar/dx-avatar.js.map +0 -1
- package/dist/types/src/dx-avatar/dx-avatar.lit-stories.d.ts +0 -12
- package/dist/types/src/dx-avatar/dx-avatar.lit-stories.d.ts.map +0 -1
- package/dist/types/src/dx-avatar/dx-avatar.lit-stories.js +0 -16
- package/dist/types/src/dx-avatar/dx-avatar.lit-stories.js.map +0 -1
- package/dist/types/src/dx-avatar/index.d.ts +0 -2
- package/dist/types/src/dx-avatar/index.d.ts.map +0 -1
- package/dist/types/src/dx-avatar/index.js +0 -5
- package/dist/types/src/dx-avatar/index.js.map +0 -1
- package/dist/types/src/dx-icon/dx-icon.d.ts +0 -10
- package/dist/types/src/dx-icon/dx-icon.d.ts.map +0 -1
- package/dist/types/src/dx-icon/dx-icon.js +0 -43
- package/dist/types/src/dx-icon/dx-icon.js.map +0 -1
- package/dist/types/src/dx-icon/index.d.ts +0 -2
- package/dist/types/src/dx-icon/index.d.ts.map +0 -1
- package/dist/types/src/dx-icon/index.js +0 -5
- package/dist/types/src/dx-icon/index.js.map +0 -1
- package/dist/types/src/dx-ref-tag/dx-ref-tag.d.ts +0 -19
- package/dist/types/src/dx-ref-tag/dx-ref-tag.d.ts.map +0 -1
- package/dist/types/src/dx-ref-tag/dx-ref-tag.js +0 -65
- package/dist/types/src/dx-ref-tag/dx-ref-tag.js.map +0 -1
- package/dist/types/src/dx-ref-tag/index.d.ts +0 -2
- package/dist/types/src/dx-ref-tag/index.d.ts.map +0 -1
- package/dist/types/src/dx-ref-tag/index.js +0 -5
- package/dist/types/src/dx-ref-tag/index.js.map +0 -1
- package/dist/types/src/dx-tag-picker/dx-tag-picker-item.d.ts +0 -21
- package/dist/types/src/dx-tag-picker/dx-tag-picker-item.d.ts.map +0 -1
- package/dist/types/src/dx-tag-picker/dx-tag-picker-item.js +0 -68
- package/dist/types/src/dx-tag-picker/dx-tag-picker-item.js.map +0 -1
- package/dist/types/src/dx-tag-picker/index.d.ts +0 -2
- package/dist/types/src/dx-tag-picker/index.d.ts.map +0 -1
- package/dist/types/src/dx-tag-picker/index.js +0 -5
- package/dist/types/src/dx-tag-picker/index.js.map +0 -1
- package/dist/types/src/index.d.ts +0 -5
- package/dist/types/src/index.d.ts.map +0 -1
- package/dist/types/src/index.js +0 -8
- package/dist/types/src/index.js.map +0 -1
- package/dist/types/src/react.d.ts +0 -18
- package/dist/types/src/react.d.ts.map +0 -1
- package/dist/types/src/react.js +0 -34
- package/dist/types/src/react.js.map +0 -1
- package/dist/types/tsconfig.tsbuildinfo +0 -1
- package/src/dx-ref-tag/dx-ref-tag.pcss +0 -8
package/package.json
CHANGED
|
@@ -1,48 +1,47 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/lit-ui",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.4-main.03d5cd7b56",
|
|
4
4
|
"description": "Web Components for DXOS using Lit",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/dxos/dxos"
|
|
10
|
+
},
|
|
7
11
|
"license": "MIT",
|
|
8
12
|
"author": "DXOS.org",
|
|
9
|
-
"sideEffects":
|
|
13
|
+
"sideEffects": [
|
|
14
|
+
"*.css",
|
|
15
|
+
"*.pcss"
|
|
16
|
+
],
|
|
10
17
|
"type": "module",
|
|
11
18
|
"exports": {
|
|
12
19
|
".": {
|
|
13
|
-
"types": "./dist/
|
|
14
|
-
"
|
|
15
|
-
"node": "./dist/src/index.js"
|
|
20
|
+
"types": "./dist/src/index.d.ts",
|
|
21
|
+
"default": "./dist/src/index.js"
|
|
16
22
|
},
|
|
17
23
|
"./react": {
|
|
18
|
-
"types": "./dist/
|
|
19
|
-
"
|
|
20
|
-
"node": "./dist/src/react.js"
|
|
24
|
+
"types": "./dist/src/react.d.ts",
|
|
25
|
+
"default": "./dist/src/react.js"
|
|
21
26
|
},
|
|
22
27
|
"./dx-avatar.pcss": "./src/dx-avatar/dx-avatar.pcss",
|
|
23
|
-
"./dx-tag-picker.pcss": "./src/dx-tag-picker/dx-tag-picker.pcss"
|
|
24
|
-
"./dx-ref-tag.pcss": "./src/dx-ref-tag/dx-ref-tag.pcss"
|
|
28
|
+
"./dx-tag-picker.pcss": "./src/dx-tag-picker/dx-tag-picker.pcss"
|
|
25
29
|
},
|
|
26
30
|
"main": "dist/src/index.js",
|
|
27
31
|
"types": "dist/src/index.d.ts",
|
|
28
|
-
"typesVersions": {
|
|
29
|
-
"*": {
|
|
30
|
-
"react": [
|
|
31
|
-
"./dist/types/src/react.d.ts"
|
|
32
|
-
]
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
32
|
"files": [
|
|
36
33
|
"src",
|
|
37
34
|
"dist"
|
|
38
35
|
],
|
|
39
36
|
"dependencies": {
|
|
40
|
-
"@lit/react": "^1.0.
|
|
41
|
-
"lit": "^3.
|
|
42
|
-
"@dxos/react-hooks": "0.8.
|
|
37
|
+
"@lit/react": "^1.0.8",
|
|
38
|
+
"lit": "^3.3.1",
|
|
39
|
+
"@dxos/react-hooks": "0.8.4-main.03d5cd7b56",
|
|
40
|
+
"@dxos/util": "0.8.4-main.03d5cd7b56",
|
|
41
|
+
"@dxos/ui-types": "0.8.4-main.03d5cd7b56"
|
|
43
42
|
},
|
|
44
43
|
"devDependencies": {
|
|
45
|
-
"@dxos/test-utils": "0.8.
|
|
44
|
+
"@dxos/test-utils": "0.8.4-main.03d5cd7b56"
|
|
46
45
|
},
|
|
47
46
|
"publishConfig": {
|
|
48
47
|
"access": "public"
|
package/src/defs.ts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
// TODO(thure): I was unable to bring this in from `
|
|
5
|
+
// TODO(thure): I was unable to bring this in from `ui-types` because toolbox.ts would not acknowledge
|
|
6
6
|
// `"@dxos/lit-ui": [ "packages/ui/lit-ui/src/index.ts" ]` in tsconfig.paths.json. How is this meant to work? How is it
|
|
7
7
|
// okay with `react-hooks`?
|
|
8
8
|
export type Size =
|
|
@@ -5,41 +5,28 @@
|
|
|
5
5
|
// TODO(thure): Find a way to instruct ESLint & Prettier to treat any whitespace between tags rendered in the `html` template function as significant.
|
|
6
6
|
/* eslint-disable */
|
|
7
7
|
|
|
8
|
-
import {
|
|
8
|
+
import { LitElement } from 'lit';
|
|
9
9
|
import { customElement, property } from 'lit/decorators.js';
|
|
10
10
|
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
export class DxRefTagActivate extends Event {
|
|
14
|
-
public readonly refId: string;
|
|
15
|
-
public readonly label: string;
|
|
16
|
-
public readonly trigger: DxRefTag;
|
|
17
|
-
constructor(props: { refId: string; label: string; trigger: DxRefTag }) {
|
|
18
|
-
super('dx-ref-tag-activate');
|
|
19
|
-
this.refId = props.refId;
|
|
20
|
-
this.label = props.label;
|
|
21
|
-
this.trigger = props.trigger;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
@customElement('dx-ref-tag')
|
|
26
|
-
export class DxRefTag extends LitElement {
|
|
11
|
+
import { DxAnchorActivate } from '@dxos/ui-types';
|
|
27
12
|
|
|
13
|
+
@customElement('dx-anchor')
|
|
14
|
+
export class DxAnchor extends LitElement {
|
|
28
15
|
// TODO(thure): There is a case (in)sensitivity issue here which is pernicious:
|
|
29
16
|
// Only refactoring the properties here to all-lowercase fixes the binding in `RefField.tsx`, but that
|
|
30
17
|
// should be unnecessary, and it isn’t an issue for `DxAvatar` or `DxGrid`. What’s going on?
|
|
31
18
|
|
|
32
19
|
@property({ type: String })
|
|
33
|
-
|
|
20
|
+
dxn: string = '';
|
|
34
21
|
|
|
35
22
|
@property({ type: String })
|
|
36
23
|
rootclassname: string | undefined = undefined;
|
|
37
24
|
|
|
38
|
-
override connectedCallback
|
|
25
|
+
override connectedCallback(): void {
|
|
39
26
|
super.connectedCallback();
|
|
40
27
|
this.tabIndex = 0;
|
|
41
|
-
this.classList.add('dx-focus-ring');
|
|
42
|
-
if(this.rootclassname){
|
|
28
|
+
this.classList.add(this.getAttribute('data-visible-focus') === 'false' ? 'outline-hidden' : 'dx-focus-ring');
|
|
29
|
+
if (this.rootclassname) {
|
|
43
30
|
this.classList.add(this.rootclassname);
|
|
44
31
|
}
|
|
45
32
|
this.setAttribute('role', 'button');
|
|
@@ -52,9 +39,7 @@ export class DxRefTag extends LitElement {
|
|
|
52
39
|
}
|
|
53
40
|
|
|
54
41
|
private handleActivate(event: { type: string }): void {
|
|
55
|
-
this.dispatchEvent(
|
|
56
|
-
new DxRefTagActivate({ refId: this.refid, label: this.textContent ?? '', trigger: this }),
|
|
57
|
-
);
|
|
42
|
+
this.dispatchEvent(new DxAnchorActivate({ dxn: this.dxn, label: this.textContent ?? '', trigger: this }));
|
|
58
43
|
}
|
|
59
44
|
|
|
60
45
|
override createRenderRoot(): this {
|
|
@@ -2,19 +2,20 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import '
|
|
5
|
+
import '@dxos-theme';
|
|
6
6
|
import './dx-avatar.pcss';
|
|
7
|
+
|
|
7
8
|
import { html } from 'lit';
|
|
8
9
|
|
|
9
10
|
import { type DxAvatarProps } from './dx-avatar';
|
|
10
11
|
|
|
11
12
|
export default {
|
|
12
13
|
title: 'dx-avatar',
|
|
13
|
-
parameters: {
|
|
14
|
+
parameters: {
|
|
15
|
+
layout: 'centered',
|
|
16
|
+
},
|
|
14
17
|
};
|
|
15
18
|
|
|
16
|
-
export const Basic = (
|
|
17
|
-
return html
|
|
18
|
-
<dx-avatar></dx-avatar>
|
|
19
|
-
</div>`;
|
|
19
|
+
export const Basic = (_props: DxAvatarProps) => {
|
|
20
|
+
return html` <dx-avatar hue="teal" fallback="Composer user" icon="/icons.svg#ph--basketball--regular"></dx-avatar> `;
|
|
20
21
|
};
|
|
@@ -1,14 +1,23 @@
|
|
|
1
|
+
/* Tailwind v4: Fixed @apply directives - converted to direct CSS */
|
|
1
2
|
.dx-avatar-group {
|
|
2
|
-
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
padding-right: 0.5rem;
|
|
3
6
|
}
|
|
4
7
|
|
|
5
8
|
.dx-avatar-group .dx-avatar {
|
|
6
|
-
|
|
9
|
+
margin-right: -0.5rem;
|
|
7
10
|
}
|
|
8
11
|
|
|
9
12
|
.dx-avatar-group .dx-avatar {
|
|
10
|
-
&[size=
|
|
11
|
-
|
|
13
|
+
&[size='0'],
|
|
14
|
+
&[size='px'],
|
|
15
|
+
&[size='0.5'],
|
|
16
|
+
&[size='1'],
|
|
17
|
+
&[size='1.5'],
|
|
18
|
+
&[size='2'],
|
|
19
|
+
&[size='2.5'] {
|
|
20
|
+
margin-right: -0.25rem;
|
|
12
21
|
}
|
|
13
22
|
}
|
|
14
23
|
|
|
@@ -17,62 +26,79 @@ dx-avatar {
|
|
|
17
26
|
}
|
|
18
27
|
|
|
19
28
|
.dx-avatar {
|
|
20
|
-
|
|
29
|
+
position: relative;
|
|
30
|
+
display: inline-flex;
|
|
31
|
+
flex-shrink: 0;
|
|
32
|
+
/* Tailwind v4 migration: converted @apply to direct CSS properties */
|
|
21
33
|
|
|
22
34
|
.dx-avatar__frame {
|
|
23
|
-
|
|
35
|
+
width: 100%;
|
|
36
|
+
height: 100%;
|
|
24
37
|
}
|
|
25
38
|
|
|
26
|
-
.dx-avatar__frame,
|
|
27
|
-
|
|
39
|
+
.dx-avatar__frame,
|
|
40
|
+
.dx-avatar__ring {
|
|
41
|
+
border-radius: 9999px;
|
|
28
42
|
}
|
|
29
43
|
|
|
30
|
-
&[data-variant=
|
|
31
|
-
.dx-avatar__frame,
|
|
32
|
-
|
|
44
|
+
&[data-variant='square'] {
|
|
45
|
+
.dx-avatar__frame,
|
|
46
|
+
.dx-avatar__ring {
|
|
47
|
+
border-radius: 0.125rem;
|
|
33
48
|
}
|
|
34
49
|
}
|
|
35
50
|
|
|
36
51
|
.dx-avatar__status-icon {
|
|
37
|
-
|
|
52
|
+
position: absolute;
|
|
53
|
+
bottom: 0;
|
|
54
|
+
right: 0;
|
|
38
55
|
}
|
|
39
56
|
|
|
40
57
|
.dx-avatar__ring {
|
|
41
|
-
|
|
58
|
+
position: absolute;
|
|
59
|
+
inset: 0;
|
|
60
|
+
border-width: 2px;
|
|
61
|
+
border-color: var(--surface-bg);
|
|
42
62
|
}
|
|
43
63
|
|
|
44
|
-
&[data-status=
|
|
45
|
-
|
|
64
|
+
&[data-status='active'] .dx-avatar__ring {
|
|
65
|
+
border-color: var(--color-success-border);
|
|
46
66
|
}
|
|
47
67
|
|
|
48
|
-
&[data-status=
|
|
49
|
-
|
|
68
|
+
&[data-status='inactive'] .dx-avatar__ring {
|
|
69
|
+
border-color: var(--color-neutral-border);
|
|
50
70
|
}
|
|
51
71
|
|
|
52
|
-
&[data-status=
|
|
53
|
-
|
|
72
|
+
&[data-status='current'] .dx-avatar__ring {
|
|
73
|
+
border-color: var(--color-accent-focus-indicator);
|
|
54
74
|
}
|
|
55
75
|
|
|
56
|
-
&[data-status=
|
|
57
|
-
|
|
76
|
+
&[data-status='internal'] .dx-avatar__ring {
|
|
77
|
+
border-color: var(--color-separator);
|
|
58
78
|
}
|
|
59
79
|
|
|
60
|
-
&[data-status=
|
|
61
|
-
|
|
80
|
+
&[data-status='error'] .dx-avatar__ring {
|
|
81
|
+
border-color: var(--color-error-border);
|
|
62
82
|
}
|
|
63
83
|
|
|
64
|
-
&[data-status=
|
|
65
|
-
|
|
84
|
+
&[data-status='warning'] .dx-avatar__ring {
|
|
85
|
+
border-color: var(--color-warning-border);
|
|
66
86
|
}
|
|
67
87
|
|
|
68
|
-
&[data-animation=
|
|
69
|
-
|
|
88
|
+
&[data-animation='pulse'] .dx-avatar__ring {
|
|
89
|
+
animation: halo-pulse var(--duration, 1s) ease-in-out infinite;
|
|
70
90
|
}
|
|
71
91
|
|
|
72
|
-
&[data-state-loading-status=
|
|
73
|
-
.dx-avatar__fallback-text,
|
|
74
|
-
|
|
92
|
+
&[data-state-loading-status='loaded'] {
|
|
93
|
+
.dx-avatar__fallback-text,
|
|
94
|
+
.dx-avatar__status-icon {
|
|
95
|
+
display: none;
|
|
75
96
|
}
|
|
76
97
|
}
|
|
77
|
-
}
|
|
78
98
|
|
|
99
|
+
&[data-state-loading-status='error'] {
|
|
100
|
+
.dx-avatar__image {
|
|
101
|
+
display: none;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import { html, svg
|
|
6
|
-
import { customElement,
|
|
5
|
+
import { LitElement, html, svg } from 'lit';
|
|
6
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
7
7
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
8
8
|
|
|
9
9
|
import { makeId } from '@dxos/react-hooks';
|
|
@@ -13,7 +13,7 @@ import { type Size } from '../defs';
|
|
|
13
13
|
export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
|
|
14
14
|
|
|
15
15
|
export type AvatarVariant = 'square' | 'circle';
|
|
16
|
-
export type AvatarStatus = 'active' | 'inactive' | 'current' | '
|
|
16
|
+
export type AvatarStatus = 'active' | 'inactive' | 'current' | 'internal' | 'error' | 'warning';
|
|
17
17
|
export type AvatarAnimation = 'pulse' | 'none';
|
|
18
18
|
|
|
19
19
|
const rx = '0.125rem';
|
|
@@ -36,6 +36,7 @@ export type DxAvatarProps = Partial<
|
|
|
36
36
|
>
|
|
37
37
|
>;
|
|
38
38
|
|
|
39
|
+
// TODO(burdon): Needs popover.
|
|
39
40
|
@customElement('dx-avatar')
|
|
40
41
|
export class DxAvatar extends LitElement {
|
|
41
42
|
private maskId: string;
|
|
@@ -46,7 +47,7 @@ export class DxAvatar extends LitElement {
|
|
|
46
47
|
}
|
|
47
48
|
|
|
48
49
|
@property({ type: String })
|
|
49
|
-
fallback: string = '
|
|
50
|
+
fallback: string = '🫥';
|
|
50
51
|
|
|
51
52
|
@property({ type: String })
|
|
52
53
|
imgSrc: string | undefined = undefined;
|
|
@@ -70,7 +71,7 @@ export class DxAvatar extends LitElement {
|
|
|
70
71
|
hue: string | undefined = undefined;
|
|
71
72
|
|
|
72
73
|
@property({ type: String })
|
|
73
|
-
hueVariant: 'fill' | 'surface' = 'fill';
|
|
74
|
+
hueVariant: 'fill' | 'surface' | 'transparent' = 'fill';
|
|
74
75
|
|
|
75
76
|
@property({ type: String })
|
|
76
77
|
size: Size = 10;
|
|
@@ -112,13 +113,19 @@ export class DxAvatar extends LitElement {
|
|
|
112
113
|
const r = sizePx / 2 - ringGap - ringWidth;
|
|
113
114
|
const isTextOnly = Boolean(this.fallback && /[0-9a-zA-Z]+/.test(this.fallback));
|
|
114
115
|
const fontScale = (isTextOnly ? 3 : 3.6) * (1 / 1.612);
|
|
115
|
-
const bg =
|
|
116
|
-
|
|
117
|
-
?
|
|
118
|
-
:
|
|
119
|
-
|
|
116
|
+
const bg =
|
|
117
|
+
this.hueVariant === 'transparent'
|
|
118
|
+
? 'transparent'
|
|
119
|
+
: this.hue
|
|
120
|
+
? this.hueVariant === 'surface'
|
|
121
|
+
? `var(--color-${this.hue}-surface)`
|
|
122
|
+
: `var(--color-${this.hue === 'neutral' ? 'input-surface' : `${this.hue}-fill`})`
|
|
123
|
+
: 'var(--surface-bg)';
|
|
120
124
|
const fg =
|
|
121
|
-
this.hue && this.hueVariant === 'surface'
|
|
125
|
+
this.hue && this.hueVariant === 'surface'
|
|
126
|
+
? `var(--color-${this.hue}-surface-text)`
|
|
127
|
+
: 'var(--color-accent-surface-text)';
|
|
128
|
+
|
|
122
129
|
return html`<span
|
|
123
130
|
role="none"
|
|
124
131
|
class=${`dx-avatar${this.rootClassName ? ` ${this.rootClassName}` : ''}`}
|
|
@@ -138,62 +145,71 @@ export class DxAvatar extends LitElement {
|
|
|
138
145
|
${
|
|
139
146
|
this.variant === 'circle'
|
|
140
147
|
? svg`<circle fill="white" cx="50%" cy="50%" r=${r} />`
|
|
141
|
-
: svg
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
148
|
+
: svg`
|
|
149
|
+
<rect
|
|
150
|
+
fill="white"
|
|
151
|
+
width=${2 * r}
|
|
152
|
+
height=${2 * r}
|
|
153
|
+
x=${ringGap + ringWidth}
|
|
154
|
+
y=${ringGap + ringWidth}
|
|
155
|
+
rx=${rx}
|
|
156
|
+
/>`
|
|
149
157
|
}
|
|
150
158
|
</mask>
|
|
151
159
|
</defs>
|
|
152
160
|
${
|
|
153
161
|
this.variant === 'circle'
|
|
154
|
-
? svg`
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
162
|
+
? svg`
|
|
163
|
+
<circle
|
|
164
|
+
cx="50%"
|
|
165
|
+
cy="50%"
|
|
166
|
+
r=${r}
|
|
167
|
+
fill=${bg}
|
|
168
|
+
/>`
|
|
169
|
+
: svg`
|
|
170
|
+
<rect
|
|
171
|
+
fill=${bg}
|
|
172
|
+
x=${ringGap + ringWidth}
|
|
173
|
+
y=${ringGap + ringWidth}
|
|
174
|
+
width=${2 * r}
|
|
175
|
+
height=${2 * r}
|
|
176
|
+
rx=${rx}
|
|
177
|
+
/>`
|
|
168
178
|
}
|
|
169
179
|
${
|
|
170
180
|
this.icon
|
|
171
|
-
? svg
|
|
181
|
+
? svg`
|
|
182
|
+
<use
|
|
172
183
|
class="dx-avatar__icon"
|
|
173
184
|
href=${this.icon}
|
|
174
185
|
x=${sizePx / 5}
|
|
175
186
|
y=${sizePx / 5}
|
|
176
187
|
width=${(3 * sizePx) / 5}
|
|
177
188
|
height=${(3 * sizePx) / 5} />`
|
|
178
|
-
:
|
|
189
|
+
: // NOTE: Firefox currently doesn't fully support alignment-baseline.
|
|
190
|
+
svg`
|
|
191
|
+
<text
|
|
179
192
|
x="50%"
|
|
180
193
|
y="50%"
|
|
181
194
|
class="dx-avatar__fallback-text"
|
|
182
195
|
fill=${fg}
|
|
183
196
|
text-anchor="middle"
|
|
184
197
|
alignment-baseline="central"
|
|
198
|
+
dominant-baseline="middle"
|
|
185
199
|
font-size=${this.size === 'px' ? '200%' : this.size * fontScale}
|
|
186
200
|
mask=${`url(#${this.maskId})`}
|
|
187
201
|
>
|
|
188
|
-
${this.fallback}
|
|
202
|
+
${/\p{Emoji_Presentation}/u.test(this.fallback) ? this.fallback : getInitials(this.fallback)}
|
|
189
203
|
</text>`
|
|
190
204
|
}
|
|
191
205
|
${
|
|
192
206
|
this.imgSrc &&
|
|
193
|
-
svg
|
|
207
|
+
svg`
|
|
208
|
+
<image
|
|
194
209
|
width="100%"
|
|
195
210
|
height="100%"
|
|
196
211
|
preserveAspectRatio="xMidYMid slice"
|
|
212
|
+
class="dx-avatar__image"
|
|
197
213
|
href=${this.imgSrc}
|
|
198
214
|
mask=${`url(#${this.maskId})`}
|
|
199
215
|
crossorigin=${this.imgCrossOrigin}
|
|
@@ -209,3 +225,17 @@ export class DxAvatar extends LitElement {
|
|
|
209
225
|
return this;
|
|
210
226
|
}
|
|
211
227
|
}
|
|
228
|
+
|
|
229
|
+
/**
|
|
230
|
+
* Returns the first two renderable characters from a string that are separated by non-word characters.
|
|
231
|
+
* Handles Unicode characters correctly.
|
|
232
|
+
*/
|
|
233
|
+
const getInitials = (label = ''): string[] => {
|
|
234
|
+
return label
|
|
235
|
+
.trim()
|
|
236
|
+
.split(/\s+/)
|
|
237
|
+
.map((str) => str.replace(/[^\p{L}\p{N}\s]/gu, ''))
|
|
238
|
+
.filter(Boolean)
|
|
239
|
+
.slice(0, 2)
|
|
240
|
+
.map((word) => word[0].toUpperCase());
|
|
241
|
+
};
|
package/src/dx-icon/dx-icon.ts
CHANGED
|
@@ -1,22 +1,25 @@
|
|
|
1
|
+
@reference "../../../ui-theme/src/main.css";
|
|
2
|
+
|
|
1
3
|
@layer dx-components {
|
|
2
4
|
dx-tag-picker-item {
|
|
3
|
-
display:
|
|
5
|
+
display: inline-block;
|
|
6
|
+
@apply p-0.5;
|
|
4
7
|
}
|
|
5
8
|
|
|
6
9
|
.dx-tag-picker-item.dx-tag {
|
|
7
|
-
@apply p-0
|
|
10
|
+
@apply p-0 m-0 flex;
|
|
8
11
|
|
|
9
12
|
button {
|
|
10
|
-
@apply
|
|
11
|
-
padding-block: var(--
|
|
13
|
+
@apply px-1;
|
|
14
|
+
padding-block: var(--spacing-tag-padding-block);
|
|
12
15
|
}
|
|
13
16
|
|
|
14
17
|
&[data-remove='true'] {
|
|
15
18
|
button:first-child {
|
|
16
|
-
@apply
|
|
19
|
+
@apply pr-0.5;
|
|
17
20
|
}
|
|
18
21
|
button:last-child {
|
|
19
|
-
@apply
|
|
22
|
+
@apply pl-0.5;
|
|
20
23
|
}
|
|
21
24
|
}
|
|
22
25
|
}
|
package/src/index.ts
CHANGED
package/src/react.ts
CHANGED
|
@@ -2,28 +2,29 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import {
|
|
5
|
+
import { type EventName, createComponent } from '@lit/react';
|
|
6
6
|
import React, { type ComponentPropsWithRef } from 'react';
|
|
7
7
|
|
|
8
|
+
import { DX_ANCHOR_ACTIVATE, type DxAnchorActivate } from '@dxos/ui-types';
|
|
9
|
+
|
|
8
10
|
import {
|
|
11
|
+
type DxTagPickerItemClick,
|
|
12
|
+
DxAnchor as NaturalDxAnchor,
|
|
9
13
|
DxAvatar as NaturalDxAvatar,
|
|
10
|
-
DxRefTag as NaturalDxRefTag,
|
|
11
|
-
DxIcon as NaturalIcon,
|
|
12
|
-
type DxRefTagActivate,
|
|
13
14
|
DxTagPickerItem as NaturalDxTagPickerItem,
|
|
14
|
-
|
|
15
|
+
DxIcon as NaturalIcon,
|
|
15
16
|
} from './index';
|
|
16
17
|
|
|
17
|
-
export const
|
|
18
|
-
tagName: 'dx-
|
|
19
|
-
elementClass:
|
|
18
|
+
export const DxAnchor = createComponent({
|
|
19
|
+
tagName: 'dx-anchor',
|
|
20
|
+
elementClass: NaturalDxAnchor,
|
|
20
21
|
react: React,
|
|
21
22
|
events: {
|
|
22
|
-
onActivate:
|
|
23
|
+
onActivate: DX_ANCHOR_ACTIVATE as EventName<DxAnchorActivate>,
|
|
23
24
|
},
|
|
24
25
|
});
|
|
25
26
|
|
|
26
|
-
export type
|
|
27
|
+
export type DxAnchorProps = ComponentPropsWithRef<typeof DxAnchor>;
|
|
27
28
|
|
|
28
29
|
export const DxAvatar = createComponent({
|
|
29
30
|
tagName: 'dx-avatar',
|
|
@@ -53,4 +54,5 @@ export const DxTagPickerItem = createComponent({
|
|
|
53
54
|
export type DxTagPickerItemProps = ComponentPropsWithRef<typeof DxTagPickerItem>;
|
|
54
55
|
|
|
55
56
|
export { createComponent };
|
|
57
|
+
|
|
56
58
|
export type { EventName };
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
export declare class DxRefTagActivate extends Event {
|
|
3
|
-
readonly refId: string;
|
|
4
|
-
readonly label: string;
|
|
5
|
-
readonly trigger: DxRefTag;
|
|
6
|
-
constructor(props: {
|
|
7
|
-
refId: string;
|
|
8
|
-
label: string;
|
|
9
|
-
trigger: DxRefTag;
|
|
10
|
-
});
|
|
11
|
-
}
|
|
12
|
-
export declare class DxRefTag extends LitElement {
|
|
13
|
-
refid: string;
|
|
14
|
-
rootclassname: string | undefined;
|
|
15
|
-
connectedCallback(): void;
|
|
16
|
-
private handleActivate;
|
|
17
|
-
createRenderRoot(): this;
|
|
18
|
-
}
|
|
19
|
-
//# sourceMappingURL=dx-ref-tag.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dx-ref-tag.d.ts","sourceRoot":"","sources":["../../../src/dx-ref-tag/dx-ref-tag.ts"],"names":[],"mappings":"AAOA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,qBAAa,gBAAiB,SAAQ,KAAK;IACzC,SAAgB,KAAK,EAAE,MAAM,CAAC;IAC9B,SAAgB,KAAK,EAAE,MAAM,CAAC;IAC9B,SAAgB,OAAO,EAAE,QAAQ,CAAC;gBACtB,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,QAAQ,CAAA;KAAE;CAMvE;AAED,qBACa,QAAS,SAAQ,UAAU;IAOtC,KAAK,EAAE,MAAM,CAAwB;IAGrC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC,iBAAiB,IAAK,IAAI;IAgBnC,OAAO,CAAC,cAAc;IAMb,gBAAgB,IAAI,IAAI;CAGlC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dx-ref-tag.js","sourceRoot":"","sources":["../../../src/dx-ref-tag/dx-ref-tag.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;AAEF,sJAAsJ;AACtJ,oBAAoB;AAEpB,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,OAAO,gBAAiB,SAAQ,KAAK;IAIzC,YAAY,KAA0D;QACpE,KAAK,CAAC,qBAAqB,CAAC,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC/B,CAAC;CACF;AAGM,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;QAEL,+EAA+E;QAC/E,wGAAwG;QACxG,8FAA8F;;QAG9F,UAAK,GAAW,MAAM,CAAC,YAAY,CAAC,CAAC;QAGrC,kBAAa,GAAuB,SAAS,CAAC;IA2BhD,CAAC;IAzBU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAClB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QACpC,IAAG,IAAI,CAAC,aAAa,EAAC,CAAC;YACrB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACzC,CAAC;QACD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,KAAK,MAAM,EAAE,CAAC;YACtD,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC;QAChD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,KAAuB;;QAC5C,IAAI,CAAC,aAAa,CAChB,IAAI,gBAAgB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,WAAW,mCAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAC1F,CAAC;IACJ,CAAC;IAEQ,gBAAgB;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;CACF,CAAA;AA9BC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACU;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACmB;AAVnC,QAAQ;IADpB,aAAa,CAAC,YAAY,CAAC;GACf,QAAQ,CAqCpB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dx-ref-tag/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/dx-ref-tag/index.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;AAEF,cAAc,cAAc,CAAC"}
|
package/dist/types/src/defs.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAOA,MAAM,MAAM,IAAI,GACZ,CAAC,GACD,IAAI,GACJ,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,GAAG,GACH,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,CAAC"}
|