@poveste/controls 0.1.3 → 0.2.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.
- package/dist/index.es.css +1 -1
- package/dist/index.es.js +76 -76
- package/dist/style-standalone.css +148 -148
- package/package.json +3 -3
- package/src/components/HstCopyIcon.vue +1 -1
- package/src/components/HstWrapper.vue +4 -4
- package/src/components/button/HstButton.story.vue +1 -1
- package/src/components/button/HstButton.vue +4 -4
- package/src/components/button/HstButtonGroup.vue +3 -3
- package/src/components/checkbox/HstCheckbox.vue +1 -1
- package/src/components/checkbox/HstCheckboxList.vue +4 -4
- package/src/components/checkbox/HstSimpleCheckbox.vue +9 -9
- package/src/components/checkbox/__snapshots__/HstCheckbox.spec.ts.snap +2 -2
- package/src/components/colorselect/HstColorSelect.vue +3 -3
- package/src/components/design-tokens/HstColorShades.story.vue +3 -3
- package/src/components/design-tokens/HstColorShades.vue +9 -9
- package/src/components/design-tokens/HstTokenGrid.story.vue +1 -1
- package/src/components/design-tokens/HstTokenGrid.vue +9 -9
- package/src/components/design-tokens/HstTokenList.story.vue +2 -2
- package/src/components/design-tokens/HstTokenList.vue +8 -8
- package/src/components/json/HstJson.vue +3 -3
- package/src/components/number/HstNumber.vue +4 -4
- package/src/components/radio/HstRadio.vue +12 -12
- package/src/components/select/CustomSelect.vue +10 -10
- package/src/components/select/HstSelect.story.vue +4 -4
- package/src/components/select/HstSelect.vue +1 -1
- package/src/components/slider/HstSlider.vue +12 -12
- package/src/components/text/HstText.vue +2 -2
- package/src/components/textarea/HstTextarea.vue +2 -2
- package/src/end.d.ts +2 -2
- package/src/style/main.css +1 -1
- package/src/utils.ts +4 -4
- package/tailwind.config.cjs +1 -1
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@poveste/controls",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.2.0",
|
|
5
5
|
"description": "Prebuilt controls components",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "Sorin Gitlan"
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"@codemirror/state": "^6.4.1",
|
|
39
39
|
"@codemirror/theme-one-dark": "^6.1.2",
|
|
40
40
|
"@codemirror/view": "^6.35.0",
|
|
41
|
-
"@poveste/shared": "^0.
|
|
42
|
-
"@poveste/vendors": "^0.
|
|
41
|
+
"@poveste/shared": "^0.2.0",
|
|
42
|
+
"@poveste/vendors": "^0.2.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@types/node": "^22.10.1",
|
|
@@ -32,7 +32,7 @@ async function action() {
|
|
|
32
32
|
delay: 0,
|
|
33
33
|
}"
|
|
34
34
|
icon="carbon:copy-file"
|
|
35
|
-
class="
|
|
35
|
+
class="ptw-w-4 ptw-h-4 ptw-opacity-50 hover:ptw-opacity-100 hover:ptw-text-primary-500 ptw-cursor-pointer"
|
|
36
36
|
@click="action()"
|
|
37
37
|
/>
|
|
38
38
|
</template>
|
|
@@ -19,7 +19,7 @@ withDefaults(defineProps<{
|
|
|
19
19
|
<template>
|
|
20
20
|
<component
|
|
21
21
|
:is="tag"
|
|
22
|
-
class="poveste-wrapper histoire-wrapper
|
|
22
|
+
class="poveste-wrapper histoire-wrapper ptw-p-2 hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-800 ptw-flex ptw-gap-2 ptw-flex-wrap"
|
|
23
23
|
>
|
|
24
24
|
<span
|
|
25
25
|
v-tooltip="{
|
|
@@ -27,12 +27,12 @@ withDefaults(defineProps<{
|
|
|
27
27
|
placement: 'left',
|
|
28
28
|
distance: 12,
|
|
29
29
|
}"
|
|
30
|
-
class="
|
|
30
|
+
class="ptw-w-28 ptw-whitespace-nowrap ptw-text-ellipsis ptw-overflow-hidden ptw-shrink-0"
|
|
31
31
|
>
|
|
32
32
|
{{ title }}
|
|
33
33
|
</span>
|
|
34
|
-
<span class="
|
|
35
|
-
<span class="
|
|
34
|
+
<span class="ptw-grow ptw-max-w-full ptw-flex ptw-items-center ptw-gap-1">
|
|
35
|
+
<span class="ptw-block ptw-grow ptw-max-w-full">
|
|
36
36
|
<slot />
|
|
37
37
|
</span>
|
|
38
38
|
<slot name="actions" />
|
|
@@ -6,9 +6,9 @@ export default {
|
|
|
6
6
|
|
|
7
7
|
<script setup lang="ts">
|
|
8
8
|
const colors = {
|
|
9
|
-
default: '
|
|
10
|
-
primary: '
|
|
11
|
-
flat: '
|
|
9
|
+
default: 'ptw-bg-gray-200 dark:ptw-bg-gray-750 ptw-text-gray-900 dark:ptw-text-gray-100 hover:ptw-bg-primary-200 dark:hover:ptw-bg-primary-900',
|
|
10
|
+
primary: 'ptw-bg-primary-500 hover:ptw-bg-primary-600 ptw-text-white dark:ptw-text-black',
|
|
11
|
+
flat: 'ptw-bg-transparent hover:ptw-bg-gray-500/20 ptw-text-gray-900 dark:ptw-text-gray-100',
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
defineProps<{
|
|
@@ -18,7 +18,7 @@ defineProps<{
|
|
|
18
18
|
|
|
19
19
|
<template>
|
|
20
20
|
<button
|
|
21
|
-
class="poveste-button
|
|
21
|
+
class="poveste-button ptw-cursor-pointer ptw-rounded-sm ptw-border-none"
|
|
22
22
|
:class="colors[color ?? 'default']"
|
|
23
23
|
>
|
|
24
24
|
<slot />
|
|
@@ -50,13 +50,13 @@ function selectOption(value: string) {
|
|
|
50
50
|
tag="div"
|
|
51
51
|
role="group"
|
|
52
52
|
:title="title"
|
|
53
|
-
class="poveste-button-group
|
|
53
|
+
class="poveste-button-group ptw-flex-nowrap ptw-items-center"
|
|
54
54
|
>
|
|
55
|
-
<div class="
|
|
55
|
+
<div class="ptw-flex ptw-gap-px ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 ptw-rounded-sm ptw-p-px">
|
|
56
56
|
<HstButton
|
|
57
57
|
v-for="{ label, value } of formattedOptions"
|
|
58
58
|
:key="value"
|
|
59
|
-
class="
|
|
59
|
+
class="ptw-px-1 ptw-h-[22px] ptw-flex-1 !ptw-rounded-[3px]"
|
|
60
60
|
:color="value === modelValue ? 'primary' : 'flat'"
|
|
61
61
|
:rounded="false"
|
|
62
62
|
@click="selectOption(value)"
|
|
@@ -42,7 +42,7 @@ const isTrue = computed(() => {
|
|
|
42
42
|
<HstWrapper
|
|
43
43
|
role="checkbox"
|
|
44
44
|
tabindex="0"
|
|
45
|
-
class="poveste-checkbox
|
|
45
|
+
class="poveste-checkbox ptw-cursor-pointer ptw-items-center"
|
|
46
46
|
:title="title"
|
|
47
47
|
@click="toggle()"
|
|
48
48
|
@keydown.enter.prevent="toggle()"
|
|
@@ -49,11 +49,11 @@ function toggleOption(value: string) {
|
|
|
49
49
|
<HstWrapper
|
|
50
50
|
role="group"
|
|
51
51
|
:title="title"
|
|
52
|
-
class="poveste-checkbox-list
|
|
52
|
+
class="poveste-checkbox-list ptw-cursor-text"
|
|
53
53
|
:class="$attrs.class"
|
|
54
54
|
:style="$attrs.style"
|
|
55
55
|
>
|
|
56
|
-
<div class="-
|
|
56
|
+
<div class="-ptw-my-1">
|
|
57
57
|
<template
|
|
58
58
|
v-for="(label, value) in formattedOptions"
|
|
59
59
|
:key="value"
|
|
@@ -61,14 +61,14 @@ function toggleOption(value: string) {
|
|
|
61
61
|
<label
|
|
62
62
|
tabindex="0"
|
|
63
63
|
:for="`${value}-radio`"
|
|
64
|
-
class="
|
|
64
|
+
class="ptw-cursor-pointer ptw-flex ptw-items-center ptw-relative ptw-py-1 ptw-group"
|
|
65
65
|
@keydown.enter.prevent="toggleOption(value)"
|
|
66
66
|
@keydown.space.prevent="toggleOption(value)"
|
|
67
67
|
@click="toggleOption(value)"
|
|
68
68
|
>
|
|
69
69
|
<HstSimpleCheckbox
|
|
70
70
|
:model-value="modelValue.includes(value)"
|
|
71
|
-
class="
|
|
71
|
+
class="ptw-mr-2"
|
|
72
72
|
/>
|
|
73
73
|
{{ label }}
|
|
74
74
|
</label>
|
|
@@ -45,33 +45,33 @@ watch(path, () => {
|
|
|
45
45
|
|
|
46
46
|
<template>
|
|
47
47
|
<div
|
|
48
|
-
class="poveste-simple-checkbox
|
|
49
|
-
:class="{ '
|
|
48
|
+
class="poveste-simple-checkbox ptw-group ptw-text-white ptw-w-[16px] ptw-h-[16px] ptw-relative"
|
|
49
|
+
:class="{ 'ptw-cursor-pointer': withToggle }"
|
|
50
50
|
@click="toggle"
|
|
51
51
|
>
|
|
52
52
|
<div
|
|
53
|
-
class="
|
|
53
|
+
class="ptw-border ptw-border-solid group-active:ptw-bg-gray-500/20 ptw-rounded-sm ptw-box-border ptw-absolute ptw-inset-0 ptw-transition-border ptw-duration-150 ptw-ease-out group-hover:ptw-border-primary-500 group-hover:dark:ptw-border-primary-500"
|
|
54
54
|
:class="[
|
|
55
55
|
modelValue
|
|
56
|
-
? '
|
|
57
|
-
: '
|
|
56
|
+
? 'ptw-border-primary-500 ptw-border-8'
|
|
57
|
+
: 'ptw-border-black/25 dark:ptw-border-white/25 ptw-delay-150',
|
|
58
58
|
]"
|
|
59
59
|
/>
|
|
60
60
|
<svg
|
|
61
61
|
width="16"
|
|
62
62
|
height="16"
|
|
63
63
|
viewBox="0 0 24 24"
|
|
64
|
-
class="
|
|
64
|
+
class="ptw-relative ptw-z-10"
|
|
65
65
|
>
|
|
66
66
|
<path
|
|
67
67
|
ref="path"
|
|
68
68
|
d="m 4 12 l 5 5 l 10 -10"
|
|
69
69
|
fill="none"
|
|
70
|
-
class="
|
|
70
|
+
class="ptw-stroke-white ptw-stroke-2 ptw-duration-200 ptw-ease-in-out"
|
|
71
71
|
:class="[
|
|
72
|
-
animationEnabled ? '
|
|
72
|
+
animationEnabled ? 'ptw-transition-all' : 'ptw-transition-none',
|
|
73
73
|
{
|
|
74
|
-
'
|
|
74
|
+
'ptw-delay-150': modelValue,
|
|
75
75
|
},
|
|
76
76
|
]"
|
|
77
77
|
:stroke-dasharray="dasharray"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
2
2
|
|
|
3
|
-
exports[`hstCheckbox > toggle to checked 1`] = `"<label class="poveste-wrapper histoire-wrapper
|
|
3
|
+
exports[`hstCheckbox > toggle to checked 1`] = `"<label class="poveste-wrapper histoire-wrapper ptw-p-2 hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-800 ptw-flex ptw-gap-2 ptw-flex-wrap poveste-checkbox ptw-cursor-pointer ptw-items-center" role="checkbox" tabindex="0"><span class="ptw-w-28 ptw-whitespace-nowrap ptw-text-ellipsis ptw-overflow-hidden ptw-shrink-0 v-popper--has-tooltip">Label</span><span class="ptw-grow ptw-max-w-full ptw-flex ptw-items-center ptw-gap-1"><span class="ptw-block ptw-grow ptw-max-w-full"><div class="poveste-simple-checkbox ptw-group ptw-text-white ptw-w-[16px] ptw-h-[16px] ptw-relative"><div class="ptw-border ptw-border-solid group-active:ptw-bg-gray-500/20 ptw-rounded-sm ptw-box-border ptw-absolute ptw-inset-0 ptw-transition-border ptw-duration-150 ptw-ease-out group-hover:ptw-border-primary-500 group-hover:dark:ptw-border-primary-500 ptw-border-black/25 dark:ptw-border-white/25 ptw-delay-150"></div><svg width="16" height="16" viewBox="0 0 24 24" class="ptw-relative ptw-z-10"><path d="m 4 12 l 5 5 l 10 -10" fill="none" class="ptw-stroke-white ptw-stroke-2 ptw-duration-200 ptw-ease-in-out ptw-transition-none" stroke-dasharray="21.21" stroke-dashoffset="21.21"></path></svg></div></span></span></label>"`;
|
|
4
4
|
|
|
5
|
-
exports[`hstCheckbox > toggle to unchecked 1`] = `"<label class="poveste-wrapper histoire-wrapper
|
|
5
|
+
exports[`hstCheckbox > toggle to unchecked 1`] = `"<label class="poveste-wrapper histoire-wrapper ptw-p-2 hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-800 ptw-flex ptw-gap-2 ptw-flex-wrap poveste-checkbox ptw-cursor-pointer ptw-items-center" role="checkbox" tabindex="0"><span class="ptw-w-28 ptw-whitespace-nowrap ptw-text-ellipsis ptw-overflow-hidden ptw-shrink-0 v-popper--has-tooltip">Label</span><span class="ptw-grow ptw-max-w-full ptw-flex ptw-items-center ptw-gap-1"><span class="ptw-block ptw-grow ptw-max-w-full"><div class="poveste-simple-checkbox ptw-group ptw-text-white ptw-w-[16px] ptw-h-[16px] ptw-relative"><div class="ptw-border ptw-border-solid group-active:ptw-bg-gray-500/20 ptw-rounded-sm ptw-box-border ptw-absolute ptw-inset-0 ptw-transition-border ptw-duration-150 ptw-ease-out group-hover:ptw-border-primary-500 group-hover:dark:ptw-border-primary-500 ptw-border-primary-500 ptw-border-8"></div><svg width="16" height="16" viewBox="0 0 24 24" class="ptw-relative ptw-z-10"><path d="m 4 12 l 5 5 l 10 -10" fill="none" class="ptw-stroke-white ptw-stroke-2 ptw-duration-200 ptw-ease-in-out ptw-transition-none ptw-delay-150" stroke-dasharray="21.21" stroke-dashoffset="0"></path></svg></div></span></span></label>"`;
|
|
@@ -64,16 +64,16 @@ function processChange(inp) {
|
|
|
64
64
|
<template>
|
|
65
65
|
<HstWrapper
|
|
66
66
|
:title="title"
|
|
67
|
-
class="poveste-select
|
|
67
|
+
class="poveste-select ptw-cursor-text ptw-items-center"
|
|
68
68
|
:class="$attrs.class"
|
|
69
69
|
:style="$attrs.style"
|
|
70
70
|
>
|
|
71
|
-
<div class="
|
|
71
|
+
<div class="ptw-flex ptw-flex-row ptw-gap-1">
|
|
72
72
|
<input
|
|
73
73
|
v-bind="{ ...$attrs, class: null, style: null }"
|
|
74
74
|
v-model="stringModel"
|
|
75
75
|
type="text"
|
|
76
|
-
class="
|
|
76
|
+
class="ptw-text-inherit ptw-bg-transparent ptw-w-full ptw-outline-none ptw-px-2 ptw-py-1 -ptw-my-1 ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 focus:ptw-border-primary-500 dark:focus:ptw-border-primary-500 ptw-rounded-sm"
|
|
77
77
|
>
|
|
78
78
|
<input
|
|
79
79
|
type="color"
|
|
@@ -309,7 +309,7 @@ const colors = {
|
|
|
309
309
|
>
|
|
310
310
|
<template #default="{ color }">
|
|
311
311
|
<div
|
|
312
|
-
class="
|
|
312
|
+
class="ptw-rounded ptw-h-[100px]"
|
|
313
313
|
:style="{
|
|
314
314
|
backgroundColor: color,
|
|
315
315
|
} as CSSProperties"
|
|
@@ -327,7 +327,7 @@ const colors = {
|
|
|
327
327
|
>
|
|
328
328
|
<template #default="{ color }">
|
|
329
329
|
<div
|
|
330
|
-
class="
|
|
330
|
+
class="ptw-rounded ptw-h-[100px] ptw-text-5xl ptw-flex ptw-items-end"
|
|
331
331
|
:style="{
|
|
332
332
|
color,
|
|
333
333
|
} as CSSProperties"
|
|
@@ -347,7 +347,7 @@ const colors = {
|
|
|
347
347
|
>
|
|
348
348
|
<template #default="{ color }">
|
|
349
349
|
<div
|
|
350
|
-
class="
|
|
350
|
+
class="ptw-rounded ptw-h-[100px] ptw-border-solid ptw-border-2"
|
|
351
351
|
:style="{
|
|
352
352
|
borderColor: color,
|
|
353
353
|
} as CSSProperties"
|
|
@@ -53,12 +53,12 @@ const hover = ref<string>(null)
|
|
|
53
53
|
<template>
|
|
54
54
|
<div
|
|
55
55
|
v-if="displayedShades.length"
|
|
56
|
-
class="poveste-color-shades
|
|
56
|
+
class="poveste-color-shades ptw-grid ptw-gap-4 ptw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] ptw-m-4"
|
|
57
57
|
>
|
|
58
58
|
<div
|
|
59
59
|
v-for="shade of displayedShades"
|
|
60
60
|
:key="shade.key"
|
|
61
|
-
class="
|
|
61
|
+
class="ptw-flex ptw-flex-col ptw-gap-2"
|
|
62
62
|
@mouseenter="hover = shade.key"
|
|
63
63
|
@mouseleave="hover = null"
|
|
64
64
|
>
|
|
@@ -66,33 +66,33 @@ const hover = ref<string>(null)
|
|
|
66
66
|
:color="shade.color"
|
|
67
67
|
>
|
|
68
68
|
<div
|
|
69
|
-
class="
|
|
69
|
+
class="ptw-rounded-full ptw-w-16 ptw-h-16"
|
|
70
70
|
:style="{
|
|
71
71
|
backgroundColor: shade.color,
|
|
72
72
|
} as CSSProperties"
|
|
73
73
|
/>
|
|
74
74
|
</slot>
|
|
75
75
|
<div>
|
|
76
|
-
<div class="
|
|
76
|
+
<div class="ptw-flex ptw-gap-1">
|
|
77
77
|
<pre
|
|
78
78
|
v-tooltip="shade.name.length > 23 ? shade.name : ''"
|
|
79
|
-
class="
|
|
79
|
+
class="ptw-my-0 ptw-truncate ptw-shrink"
|
|
80
80
|
>{{ shade.name }}</pre>
|
|
81
81
|
<HstCopyIcon
|
|
82
82
|
v-if="hover === shade.key"
|
|
83
83
|
:content="shade.name"
|
|
84
|
-
class="
|
|
84
|
+
class="ptw-flex-none"
|
|
85
85
|
/>
|
|
86
86
|
</div>
|
|
87
|
-
<div class="
|
|
87
|
+
<div class="ptw-flex ptw-gap-1">
|
|
88
88
|
<pre
|
|
89
89
|
v-tooltip="shade.color.length > 23 ? shade.color : ''"
|
|
90
|
-
class="
|
|
90
|
+
class="ptw-my-0 ptw-opacity-50 ptw-truncate ptw-shrink"
|
|
91
91
|
>{{ shade.color }}</pre>
|
|
92
92
|
<HstCopyIcon
|
|
93
93
|
v-if="hover === shade.key"
|
|
94
94
|
:content="shade.color"
|
|
95
|
-
class="
|
|
95
|
+
class="ptw-flex-none"
|
|
96
96
|
/>
|
|
97
97
|
</div>
|
|
98
98
|
</div>
|
|
@@ -26,7 +26,7 @@ const tokens = {
|
|
|
26
26
|
>
|
|
27
27
|
<template #default="{ token }">
|
|
28
28
|
<div
|
|
29
|
-
class="
|
|
29
|
+
class="ptw-w-32 ptw-h-32 ptw-bg-white dark:ptw-bg-black ptw-rounded ptw-mb-2"
|
|
30
30
|
:style="token.value"
|
|
31
31
|
/>
|
|
32
32
|
</template>
|
|
@@ -38,7 +38,7 @@ const hover = ref<string>(null)
|
|
|
38
38
|
|
|
39
39
|
<template>
|
|
40
40
|
<div
|
|
41
|
-
class="poveste-token-grid
|
|
41
|
+
class="poveste-token-grid ptw-bind-col-size ptw-grid ptw-gap-4 ptw-m-4"
|
|
42
42
|
:style="{
|
|
43
43
|
'--poveste-col-size': colSizePx,
|
|
44
44
|
}"
|
|
@@ -46,7 +46,7 @@ const hover = ref<string>(null)
|
|
|
46
46
|
<div
|
|
47
47
|
v-for="token of processedTokens"
|
|
48
48
|
:key="token.key"
|
|
49
|
-
class="
|
|
49
|
+
class="ptw-flex ptw-flex-col ptw-gap-2"
|
|
50
50
|
@mouseenter="hover = token.key"
|
|
51
51
|
@mouseleave="hover = null"
|
|
52
52
|
>
|
|
@@ -54,26 +54,26 @@ const hover = ref<string>(null)
|
|
|
54
54
|
:token="token"
|
|
55
55
|
/>
|
|
56
56
|
<div>
|
|
57
|
-
<div class="
|
|
57
|
+
<div class="ptw-flex ptw-gap-1">
|
|
58
58
|
<pre
|
|
59
59
|
v-tooltip="token.name.length > colSize / 8 ? token.name : ''"
|
|
60
|
-
class="
|
|
60
|
+
class="ptw-my-0 ptw-truncate ptw-shrink"
|
|
61
61
|
>{{ token.name }}</pre>
|
|
62
62
|
<HstCopyIcon
|
|
63
63
|
v-if="hover === token.key"
|
|
64
64
|
:content="token.name"
|
|
65
|
-
class="
|
|
65
|
+
class="ptw-flex-none"
|
|
66
66
|
/>
|
|
67
67
|
</div>
|
|
68
|
-
<div class="
|
|
68
|
+
<div class="ptw-flex ptw-gap-1">
|
|
69
69
|
<pre
|
|
70
70
|
v-tooltip="token.value.length > colSize / 8 ? token.value : ''"
|
|
71
|
-
class="
|
|
71
|
+
class="ptw-my-0 ptw-opacity-50 ptw-truncate ptw-shrink"
|
|
72
72
|
>{{ token.value }}</pre>
|
|
73
73
|
<HstCopyIcon
|
|
74
74
|
v-if="hover === token.key"
|
|
75
75
|
:content="typeof token.value === 'string' ? token.value : JSON.stringify(token.value)"
|
|
76
|
-
class="
|
|
76
|
+
class="ptw-flex-none"
|
|
77
77
|
/>
|
|
78
78
|
</div>
|
|
79
79
|
</div>
|
|
@@ -82,7 +82,7 @@ const hover = ref<string>(null)
|
|
|
82
82
|
</template>
|
|
83
83
|
|
|
84
84
|
<style>
|
|
85
|
-
.
|
|
85
|
+
.ptw-bind-col-size {
|
|
86
86
|
grid-template-columns: repeat(auto-fill, minmax(var(--poveste-col-size), 1fr));
|
|
87
87
|
}
|
|
88
88
|
</style>
|
|
@@ -66,9 +66,9 @@ const tokens = {
|
|
|
66
66
|
:get-name="key => `w-${key}`"
|
|
67
67
|
>
|
|
68
68
|
<template #default="{ token }">
|
|
69
|
-
<div class="
|
|
69
|
+
<div class="ptw-bg-gray-500/10">
|
|
70
70
|
<div
|
|
71
|
-
class="
|
|
71
|
+
class="ptw-h-20 ptw-bg-gray-500/50"
|
|
72
72
|
:style="{
|
|
73
73
|
width: token.value as string,
|
|
74
74
|
} as CSSProperties"
|
|
@@ -33,28 +33,28 @@ const hover = ref<string>(null)
|
|
|
33
33
|
<div
|
|
34
34
|
v-for="token of processedTokens"
|
|
35
35
|
:key="token.key"
|
|
36
|
-
class="poveste-token-list
|
|
36
|
+
class="poveste-token-list ptw-flex ptw-flex-col ptw-gap-2 ptw-my-8"
|
|
37
37
|
@mouseenter="hover = token.key"
|
|
38
38
|
@mouseleave="hover = null"
|
|
39
39
|
>
|
|
40
40
|
<slot
|
|
41
41
|
:token="token"
|
|
42
42
|
/>
|
|
43
|
-
<div class="
|
|
44
|
-
<div class="
|
|
45
|
-
<pre class="
|
|
43
|
+
<div class="ptw-mx-4">
|
|
44
|
+
<div class="ptw-flex ptw-gap-1">
|
|
45
|
+
<pre class="ptw-my-0 ptw-truncate ptw-shrink">{{ token.name }}</pre>
|
|
46
46
|
<HstCopyIcon
|
|
47
47
|
v-if="hover === token.key"
|
|
48
48
|
:content="token.name"
|
|
49
|
-
class="
|
|
49
|
+
class="ptw-flex-none"
|
|
50
50
|
/>
|
|
51
51
|
</div>
|
|
52
|
-
<div class="
|
|
53
|
-
<pre class="
|
|
52
|
+
<div class="ptw-flex ptw-gap-1">
|
|
53
|
+
<pre class="ptw-my-0 ptw-opacity-50 ptw-truncate ptw-shrink">{{ token.value }}</pre>
|
|
54
54
|
<HstCopyIcon
|
|
55
55
|
v-if="hover === token.key"
|
|
56
56
|
:content="typeof token.value === 'string' ? token.value : JSON.stringify(token.value)"
|
|
57
|
-
class="
|
|
57
|
+
class="ptw-flex-none"
|
|
58
58
|
/>
|
|
59
59
|
</div>
|
|
60
60
|
</div>
|
|
@@ -120,13 +120,13 @@ watch(() => internalValue.value, () => {
|
|
|
120
120
|
<template>
|
|
121
121
|
<HstWrapper
|
|
122
122
|
:title="title"
|
|
123
|
-
class="poveste-json
|
|
123
|
+
class="poveste-json ptw-cursor-text"
|
|
124
124
|
:class="$attrs.class"
|
|
125
125
|
:style="$attrs.style"
|
|
126
126
|
>
|
|
127
127
|
<div
|
|
128
128
|
ref="editorElement"
|
|
129
|
-
class="__poveste-json-code
|
|
129
|
+
class="__poveste-json-code ptw-w-full ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 focus-within:ptw-border-primary-500 dark:focus-within:ptw-border-primary-500 ptw-rounded-sm ptw-box-border ptw-overflow-auto ptw-resize-y ptw-min-h-32 ptw-h-48 ptw-relative"
|
|
130
130
|
v-bind="{ ...$attrs, class: null, style: null }"
|
|
131
131
|
/>
|
|
132
132
|
|
|
@@ -135,7 +135,7 @@ watch(() => internalValue.value, () => {
|
|
|
135
135
|
v-if="invalidValue"
|
|
136
136
|
v-tooltip="'JSON error'"
|
|
137
137
|
icon="carbon:warning-alt"
|
|
138
|
-
class="
|
|
138
|
+
class="ptw-text-orange-500"
|
|
139
139
|
/>
|
|
140
140
|
|
|
141
141
|
<slot name="actions" />
|
|
@@ -67,11 +67,11 @@ onUnmounted(() => {
|
|
|
67
67
|
|
|
68
68
|
<template>
|
|
69
69
|
<HstWrapper
|
|
70
|
-
class="poveste-number
|
|
70
|
+
class="poveste-number ptw-cursor-ew-resize ptw-items-center"
|
|
71
71
|
:title="title"
|
|
72
72
|
:class="[
|
|
73
73
|
$attrs.class,
|
|
74
|
-
{ '
|
|
74
|
+
{ 'ptw-select-none': isDragging },
|
|
75
75
|
]"
|
|
76
76
|
:style="$attrs.style"
|
|
77
77
|
@click="focusAndSelect"
|
|
@@ -83,9 +83,9 @@ onUnmounted(() => {
|
|
|
83
83
|
v-model.number="numberModel"
|
|
84
84
|
type="number"
|
|
85
85
|
:class="{
|
|
86
|
-
'
|
|
86
|
+
'ptw-select-none': isDragging,
|
|
87
87
|
}"
|
|
88
|
-
class="
|
|
88
|
+
class="ptw-text-inherit ptw-bg-transparent ptw-w-full ptw-outline-none ptw-pl-2 ptw-py-1 -ptw-my-1 ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 focus:ptw-border-primary-500 dark:focus:ptw-border-primary-500 ptw-rounded-sm ptw-cursor-ew-resize ptw-box-border"
|
|
89
89
|
>
|
|
90
90
|
|
|
91
91
|
<template #actions>
|
|
@@ -47,11 +47,11 @@ const animationEnabled = ref(false)
|
|
|
47
47
|
<HstWrapper
|
|
48
48
|
role="group"
|
|
49
49
|
:title="title"
|
|
50
|
-
class="poveste-radio
|
|
50
|
+
class="poveste-radio ptw-cursor-text"
|
|
51
51
|
:class="$attrs.class"
|
|
52
52
|
:style="$attrs.style"
|
|
53
53
|
>
|
|
54
|
-
<div class="-
|
|
54
|
+
<div class="-ptw-my-1">
|
|
55
55
|
<template
|
|
56
56
|
v-for="(label, value) in formattedOptions"
|
|
57
57
|
:key="value"
|
|
@@ -62,13 +62,13 @@ const animationEnabled = ref(false)
|
|
|
62
62
|
:name="`${value}-radio_${title}`"
|
|
63
63
|
:value="value"
|
|
64
64
|
:checked="value === modelValue"
|
|
65
|
-
class="!
|
|
65
|
+
class="!ptw-hidden"
|
|
66
66
|
@change="selectOption(value)"
|
|
67
67
|
>
|
|
68
68
|
<label
|
|
69
69
|
tabindex="0"
|
|
70
70
|
:for="`${value}-radio_${title}`"
|
|
71
|
-
class="
|
|
71
|
+
class="ptw-cursor-pointer ptw-flex ptw-items-center ptw-relative ptw-py-1 ptw-group"
|
|
72
72
|
@keydown.enter.prevent="selectOption(value)"
|
|
73
73
|
@keydown.space.prevent="selectOption(value)"
|
|
74
74
|
>
|
|
@@ -76,24 +76,24 @@ const animationEnabled = ref(false)
|
|
|
76
76
|
width="16"
|
|
77
77
|
height="16"
|
|
78
78
|
viewBox="-12 -12 24 24"
|
|
79
|
-
class="
|
|
79
|
+
class="ptw-relative ptw-z-10 ptw-border ptw-border-solid ptw-text-inherit ptw-rounded-full ptw-box-border ptw-inset-0 ptw-transition-border ptw-duration-150 ptw-ease-out ptw-mr-2 group-hover:ptw-border-primary-500"
|
|
80
80
|
:class="[
|
|
81
81
|
modelValue === value
|
|
82
|
-
? '
|
|
83
|
-
: '
|
|
82
|
+
? 'ptw-border-primary-500'
|
|
83
|
+
: 'ptw-border-black/25 dark:ptw-border-white/25',
|
|
84
84
|
]"
|
|
85
85
|
>
|
|
86
86
|
<circle
|
|
87
87
|
r="7"
|
|
88
|
-
class="
|
|
88
|
+
class="ptw-will-change-transform"
|
|
89
89
|
:class="[
|
|
90
|
-
animationEnabled ? '
|
|
90
|
+
animationEnabled ? 'ptw-transition-all' : 'ptw-transition-none',
|
|
91
91
|
{
|
|
92
|
-
'
|
|
92
|
+
'ptw-delay-150': modelValue === value,
|
|
93
93
|
},
|
|
94
94
|
modelValue === value
|
|
95
|
-
? '
|
|
96
|
-
: '
|
|
95
|
+
? 'ptw-fill-primary-500'
|
|
96
|
+
: 'ptw-fill-transparent ptw-scale-0',
|
|
97
97
|
]"
|
|
98
98
|
/>
|
|
99
99
|
</svg>
|
|
@@ -50,27 +50,27 @@ function selectValue(value: any, hide: () => void) {
|
|
|
50
50
|
auto-boundary-max-size
|
|
51
51
|
>
|
|
52
52
|
<div
|
|
53
|
-
class="
|
|
53
|
+
class="ptw-cursor-pointer ptw-w-full ptw-outline-none ptw-px-2 ptw-h-[27px] -ptw-my-1 ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 hover:ptw-border-primary-500 dark:hover:ptw-border-primary-500 ptw-rounded-sm ptw-flex ptw-gap-2 ptw-items-center ptw-leading-normal"
|
|
54
54
|
>
|
|
55
|
-
<div class="
|
|
55
|
+
<div class="ptw-flex-1 ptw-truncate">
|
|
56
56
|
<slot :label="selectedLabel">
|
|
57
57
|
{{ selectedLabel }}
|
|
58
58
|
</slot>
|
|
59
59
|
</div>
|
|
60
60
|
<Icon
|
|
61
61
|
icon="carbon:chevron-sort"
|
|
62
|
-
class="
|
|
62
|
+
class="ptw-w-4 ptw-h-4 ptw-flex-none ptw-ml-auto"
|
|
63
63
|
/>
|
|
64
64
|
</div>
|
|
65
65
|
<template #popper="{ hide }">
|
|
66
|
-
<div class="
|
|
66
|
+
<div class="ptw-flex ptw-flex-col ptw-bg-gray-50 dark:ptw-bg-gray-700">
|
|
67
67
|
<div
|
|
68
68
|
v-for="[value, label] of formattedOptions"
|
|
69
69
|
v-bind="{ ...$attrs, class: null, style: null }"
|
|
70
70
|
:key="label"
|
|
71
|
-
class="
|
|
71
|
+
class="ptw-px-2 ptw-py-1 ptw-cursor-pointer hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-700"
|
|
72
72
|
:class="{
|
|
73
|
-
'
|
|
73
|
+
'ptw-bg-primary-200 dark:ptw-bg-primary-800': props.modelValue === value,
|
|
74
74
|
}"
|
|
75
75
|
@click="selectValue(value, hide)"
|
|
76
76
|
>
|
|
@@ -89,17 +89,17 @@ function selectValue(value: any, hide: () => void) {
|
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
.v-popper--theme-dropdown {
|
|
92
|
-
.
|
|
92
|
+
.ptw-dark & {
|
|
93
93
|
.v-popper__inner {
|
|
94
|
-
@apply
|
|
94
|
+
@apply ptw-bg-gray-700 ptw-border-gray-850 ptw-text-gray-100;
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
.v-popper__arrow-inner {
|
|
98
|
-
@apply
|
|
98
|
+
@apply ptw-border-gray-700;
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
.v-popper__arrow-outer {
|
|
102
|
-
@apply
|
|
102
|
+
@apply ptw-border-gray-850;
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
|