@axium/client 0.15.3 → 0.16.1

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 (5) hide show
  1. package/assets/styles.css +12 -9
  2. package/lib/ColorPicker.svelte +103 -0
  3. package/lib/UserDiscovery.svelte +3 -3
  4. package/lib/index.ts +1 -0
  5. package/package.json +2 -2
package/assets/styles.css CHANGED
@@ -52,10 +52,20 @@ form {
52
52
 
53
53
  input,
54
54
  button,
55
- select {
56
- border-radius: 0.5em;
55
+ select,
56
+ textarea {
57
57
  border: 1px solid var(--border-accent);
58
58
  background-color: var(--bg-normal);
59
+ font-family: inherit;
60
+ font-size: inherit;
61
+ color: hsl(0 0 var(--fg-light));
62
+ accent-color: hsl(0 0 var(--fg-light));
63
+ }
64
+
65
+ input,
66
+ button,
67
+ select {
68
+ border-radius: 0.5em;
59
69
  padding: 0.5em 1em;
60
70
  }
61
71
 
@@ -66,13 +76,6 @@ button.reset {
66
76
  padding: unset;
67
77
  }
68
78
 
69
- textarea {
70
- background: var(--bg-normal);
71
- border: 1px solid var(--border-accent);
72
- font-family: inherit;
73
- font-size: inherit;
74
- }
75
-
76
79
  input,
77
80
  textarea {
78
81
  outline: none;
package/lib/ColorPicker.svelte ADDED
@@ -0,0 +1,103 @@
1
+ <script lang="ts">
2
+ import { decodeColor, encodeColor } from '@axium/core/color';
3
+ import Icon from './Icon.svelte';
4
+ import Popover from './Popover.svelte';
5
+
6
+ let {
7
+ value = $bindable(),
8
+ defaultValue,
9
+ }: {
10
+ value?: string | null;
11
+ defaultValue: string;
12
+ } = $props();
13
+
14
+ const id = $props.id();
15
+
16
+ const builtinColors = [
17
+ '#ff0000', // red
18
+ '#ff7f00', // orange
19
+ '#ffff00', // yellow
20
+ '#bfff00', // lime green
21
+ '#00ff00', // green
22
+ '#00ff7f', // spring green
23
+ '#00ffff', // cyan
24
+ '#007fff', // sky blue
25
+ '#0000ff', // blue
26
+ '#7f00ff', // violet
27
+ '#ff00ff', // magenta
28
+ ];
29
+
30
+ const builtinEncoded = builtinColors.map(col => encodeColor(col, true));
31
+
32
+ const isBuiltin = $derived(builtinEncoded.includes(value || defaultValue));
33
+ const customValue = $derived(decodeColor(isBuiltin ? defaultValue : value || defaultValue));
34
+ </script>
35
+
36
+ <Popover>
37
+ {#snippet toggle()}
38
+ <div class="toggle">
39
+ <div class="color" style="--color:{decodeColor(value || defaultValue)}"></div>
40
+ <Icon i="chevron-down" />
41
+ </div>
42
+ {/snippet}
43
+
44
+ <div class="colors">
45
+ {#each builtinEncoded as color}
46
+ <div class="color" style="--color:{decodeColor(color)}" onclick={() => (value = color)}>
47
+ {#if value == color}<Icon i="check" />{/if}
48
+ </div>
49
+ {/each}
50
+ <label class="color" for="ColorPicker:custom:{id}" style="--color:${customValue}" tabindex="-1">
51
+ <Icon i="pencil" />
52
+ </label>
53
+ </div>
54
+ </Popover>
55
+
56
+ <input
57
+ type="color"
58
+ id="ColorPicker:custom:{id}"
59
+ onchange={e => (value = encodeColor(e.currentTarget.value, false))}
60
+ value={customValue}
61
+ style:display="none"
62
+ tabindex="-1"
63
+ />
64
+
65
+ <style>
66
+ .color {
67
+ border-radius: 50%;
68
+ width: 1.5em;
69
+ height: 1.5em;
70
+ aspect-ratio: 1;
71
+ display: inline-flex;
72
+ align-items: center;
73
+ justify-content: center;
74
+ background-color: var(--color, #ff00ff);
75
+
76
+ &:hover {
77
+ cursor: pointer;
78
+ }
79
+ }
80
+
81
+ div.toggle {
82
+ cursor: pointer;
83
+ width: 4em;
84
+ display: inline-flex;
85
+ align-items: center;
86
+ justify-content: space-around;
87
+ gap: 0.25em;
88
+
89
+ border-radius: 0.5em;
90
+ border: 1px solid var(--border-accent);
91
+ background-color: var(--bg-normal);
92
+ padding: 0.25em 0.75em;
93
+ }
94
+
95
+ .colors {
96
+ padding: 0.25em;
97
+ width: max-content;
98
+ height: max-content;
99
+ display: grid;
100
+ grid-template-columns: repeat(4, 1fr);
101
+ gap: 0.5em;
102
+ }
103
+ </style>
package/lib/UserDiscovery.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import { fetchAPI } from '@axium/client/requests';
3
3
  import { getUserImage, type UserPublic } from '@axium/core';
4
- import { colorHash } from '@axium/core/color';
4
+ import { colorHashRGB } from '@axium/core/color';
5
5
  import { errorText } from '@axium/core/io';
6
6
  import Icon from './Icon.svelte';
7
7
 
@@ -66,13 +66,13 @@
66
66
  <span><img src={getUserImage(result.value)} alt={result.value.name} />{result.value.name}</span>
67
67
  {:else if result.type == 'role'}
68
68
  <span>
69
- <span class="icon-text tag-or-role" style:background-color={colorHash(result.value)}
69
+ <span class="icon-text tag-or-role" style:background-color={colorHashRGB(result.value)}
70
70
  ><Icon i="at" />{result.value}</span
71
71
  >
72
72
  </span>
73
73
  {:else if result.type == 'tag'}
74
74
  <span>
75
- <span class="icon-text tag-or-role" style:background-color={colorHash(result.value)}
75
+ <span class="icon-text tag-or-role" style:background-color={colorHashRGB(result.value)}
76
76
  ><Icon i="hashtag" />{result.value}</span
77
77
  >
78
78
  </span>
package/lib/index.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export { default as AccessControlDialog } from './AccessControlDialog.svelte';
2
2
  export { default as AppMenu } from './AppMenu.svelte';
3
+ export { default as ColorPicker } from './ColorPicker.svelte';
3
4
  export { default as ClipboardCopy } from './ClipboardCopy.svelte';
4
5
  export { default as FormDialog } from './FormDialog.svelte';
5
6
  export { default as Icon } from './Icon.svelte';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axium/client",
3
- "version": "0.15.3",
3
+ "version": "0.16.1",
4
4
  "author": "James Prevett <jp@jamespre.dev>",
5
5
  "funding": {
6
6
  "type": "individual",
@@ -41,7 +41,7 @@
41
41
  "build": "tsc"
42
42
  },
43
43
  "peerDependencies": {
44
- "@axium/core": ">=0.19.0",
44
+ "@axium/core": ">=0.20.0",
45
45
  "utilium": "^2.6.3",
46
46
  "zod": "^4.0.5",
47
47
  "svelte": "^5.36.0"