orio-ui 1.1.0 → 1.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/module.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-bg:#fff;--color-surface:#f7f8fa;--color-text:#0e1116;--color-muted:#626a78;--color-border:#bfbfc2;--color-accent:#1f3a8a;--color-accent-ink:#fff;--color-accent-soft
|
|
1
|
+
:root{--color-bg:#fff;--color-surface:#f7f8fa;--color-text:#0e1116;--color-muted:#626a78;--color-border:#bfbfc2;--color-accent:#1f3a8a;--color-accent-ink:#fff;--color-accent-soft:color-mix(in srgb,var(--color-accent) 10%,#e3e3e3);--color-accent-border:color-mix(in srgb,var(--color-accent) 40%,#c7d2fe);--color-accent-hover:color-mix(in srgb,var(--color-accent) 85%,#000 15%);--color-accent-active:color-mix(in srgb,var(--color-accent) 35%,#000 65%)}:root[data-mode=light]{--color-bg:#fff;--color-surface:#f7f8fa;--color-text:#0e1116;--color-muted:#626a78;--color-border:#bfbfc2}:root[data-mode=dark]{--color-bg:#0e1116;--color-surface:#1a1d23;--color-text:#fff;--color-muted:#a2a9b6;--color-border:#2e333d;--color-accent-ink:#fff;--color-accent-soft:color-mix(in srgb,var(--color-accent) 12%,#0e1116);--color-accent-border:color-mix(in srgb,var(--color-accent) 40%,#0e1116);--color-accent-hover:color-mix(in srgb,var(--color-accent) 30%,#fff 70%);--color-accent-active:color-mix(in srgb,var(--color-accent) 80%,#fff 25%)}:root[data-theme=normal]{--color-accent:#7a7a7a}:root[data-theme=navy]{--color-accent:#5c80c1}:root[data-theme=teal]{--color-accent:#27b9ab}:root[data-theme=forest]{--color-accent:#5db18b}:root[data-theme=wine]{--color-accent:#862737}:root[data-theme=royal]{--color-accent:#293da3}:root{--color-red:#dc2626;--color-red-ink:#fff;--color-red-soft:#fef2f2;--color-red-border:#fecaca;--color-red-hover:color-mix(in srgb,var(--color-red) 85%,#000 15%);--color-red-active:color-mix(in srgb,var(--color-red) 75%,#000 25%);--color-orange:#ea580c;--color-orange-ink:#fff;--color-orange-soft:#fff7ed;--color-orange-border:#fed7aa;--color-orange-hover:color-mix(in srgb,var(--color-orange) 85%,#000 15%);--color-orange-active:color-mix(in srgb,var(--color-orange) 75%,#000 25%);--color-yellow:#ca8a04;--color-yellow-ink:#fff;--color-yellow-soft:#fefce8;--color-yellow-border:#fef08a;--color-yellow-hover:color-mix(in srgb,var(--color-yellow) 85%,#000 15%);--color-yellow-active:color-mix(in srgb,var(--color-yellow) 75%,#000 25%);--color-green:#15803d;--color-green-ink:#fff;--color-green-soft:#f0fdf4;--color-green-border:#bbf7d0;--color-green-hover:color-mix(in srgb,var(--color-green) 85%,#000 15%);--color-green-active:color-mix(in srgb,var(--color-green) 75%,#000 25%);--color-teal:#0d9488;--color-teal-ink:#fff;--color-teal-soft:#f0fdfa;--color-teal-border:#99f6e4;--color-teal-hover:color-mix(in srgb,var(--color-teal) 85%,#000 15%);--color-teal-active:color-mix(in srgb,var(--color-teal) 75%,#000 25%);--color-blue:#2563eb;--color-blue-ink:#fff;--color-blue-soft:#eff6ff;--color-blue-border:#bfdbfe;--color-blue-hover:color-mix(in srgb,var(--color-blue) 85%,#000 15%);--color-blue-active:color-mix(in srgb,var(--color-blue) 75%,#000 25%);--color-purple:#7e22ce;--color-purple-ink:#fff;--color-purple-soft:#faf5ff;--color-purple-border:#e9d5ff;--color-purple-hover:color-mix(in srgb,var(--color-purple) 85%,#000 15%);--color-purple-active:color-mix(in srgb,var(--color-purple) 75%,#000 25%);--color-pink:#db2777;--color-pink-ink:#fff;--color-pink-soft:#fdf2f8;--color-pink-border:#fbcfe8;--color-pink-hover:color-mix(in srgb,var(--color-pink) 85%,#000 15%);--color-pink-active:color-mix(in srgb,var(--color-pink) 75%,#000 25%)}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import { computed, toRefs, useAttrs, useSlots } from
|
|
2
|
+
import { computed, toRefs, useAttrs, useSlots } from "vue";
|
|
3
3
|
|
|
4
4
|
interface Props {
|
|
5
|
-
variant?:
|
|
5
|
+
variant?: "primary" | "secondary" | "subdued";
|
|
6
6
|
icon?: string;
|
|
7
7
|
loading?: boolean;
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
const props = withDefaults(defineProps<Props>(), {
|
|
12
|
-
variant:
|
|
12
|
+
variant: "primary",
|
|
13
13
|
});
|
|
14
14
|
|
|
15
15
|
const { loading, disabled } = toRefs(props);
|
|
@@ -24,12 +24,12 @@ const isIconOnly = computed(() => {
|
|
|
24
24
|
});
|
|
25
25
|
|
|
26
26
|
const emit = defineEmits<{
|
|
27
|
-
(e:
|
|
27
|
+
(e: "click", event: PointerEvent): void;
|
|
28
28
|
}>();
|
|
29
29
|
|
|
30
30
|
function click(event: PointerEvent) {
|
|
31
31
|
if (loading.value || disabled.value) return;
|
|
32
|
-
emit(
|
|
32
|
+
emit("click", event);
|
|
33
33
|
}
|
|
34
34
|
</script>
|
|
35
35
|
|
|
@@ -38,6 +38,7 @@ function click(event: PointerEvent) {
|
|
|
38
38
|
<button
|
|
39
39
|
v-bind="attrs"
|
|
40
40
|
:class="[variant, 'gradient-hover', { 'icon-only': isIconOnly }]"
|
|
41
|
+
:disabled
|
|
41
42
|
@click="click"
|
|
42
43
|
>
|
|
43
44
|
<orio-loading-spinner v-if="loading" />
|
|
@@ -68,11 +69,12 @@ button.icon-only {
|
|
|
68
69
|
padding: 0;
|
|
69
70
|
border-radius: 50%;
|
|
70
71
|
}
|
|
71
|
-
button:disabled {
|
|
72
|
+
button:disabled, button:disabled:hover {
|
|
72
73
|
background-color: var(--color-accent-soft);
|
|
73
74
|
color: var(--color-muted);
|
|
74
75
|
border-color: var(--color-accent-border);
|
|
75
76
|
cursor: not-allowed;
|
|
77
|
+
background-image: none;
|
|
76
78
|
}
|
|
77
79
|
button:active {
|
|
78
80
|
border: 1px solid var(--color-accent-border);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import { ref, nextTick, watch } from
|
|
3
|
-
import { useWindowSize, useTimeoutFn } from
|
|
2
|
+
import { ref, nextTick, watch } from "vue";
|
|
3
|
+
import { useWindowSize, useTimeoutFn } from "@vueuse/core";
|
|
4
4
|
|
|
5
5
|
export interface OriginRect {
|
|
6
6
|
x: number;
|
|
@@ -13,7 +13,7 @@ const props = defineProps<{
|
|
|
13
13
|
origin: OriginRect | null;
|
|
14
14
|
}>();
|
|
15
15
|
|
|
16
|
-
const show = defineModel<boolean>(
|
|
16
|
+
const show = defineModel<boolean>("show");
|
|
17
17
|
|
|
18
18
|
const wrapper = ref<HTMLDivElement | null>(null);
|
|
19
19
|
|
|
@@ -22,8 +22,8 @@ const { width: windowWidth, height: windowHeight } = useWindowSize();
|
|
|
22
22
|
function animateToCenter(el: HTMLDivElement) {
|
|
23
23
|
useTimeoutFn(() => {
|
|
24
24
|
requestAnimationFrame(() => {
|
|
25
|
-
el.style.transform =
|
|
26
|
-
el.style.opacity =
|
|
25
|
+
el.style.transform = "translate(0, 0) scale(1)";
|
|
26
|
+
el.style.opacity = "1";
|
|
27
27
|
});
|
|
28
28
|
}, 100);
|
|
29
29
|
}
|
|
@@ -44,7 +44,7 @@ async function animateOpen() {
|
|
|
44
44
|
translate(${x - windowWidth.value / 2}px, ${y - windowHeight.value / 2}px)
|
|
45
45
|
scale(${width / el.offsetWidth}, ${height / el.offsetHeight})
|
|
46
46
|
`;
|
|
47
|
-
el.style.opacity =
|
|
47
|
+
el.style.opacity = "0.5";
|
|
48
48
|
|
|
49
49
|
animateToCenter(el);
|
|
50
50
|
}
|
|
@@ -65,5 +65,5 @@ watch(show, (open) => {
|
|
|
65
65
|
</template>
|
|
66
66
|
|
|
67
67
|
<style scoped>
|
|
68
|
-
.overlay{align-items:center;backdrop-filter:blur(6px);background:rgba(0,0,0,.45);display:flex;inset:0;justify-content:center;position:fixed;transition:opacity .25s ease;z-index:99}.modal{background
|
|
68
|
+
.overlay{align-items:center;backdrop-filter:blur(6px);background:rgba(0,0,0,.45);display:flex;inset:0;justify-content:center;position:fixed;transition:opacity .25s ease;z-index:99}.modal{background:var(--color-surface);border-radius:var(--border-radius-lg);box-shadow:0 25px 60px rgba(0,0,0,.25);color:var(--color-text);max-height:90vh;max-width:90vw;padding:24px;position:absolute;transform-origin:top left;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s ease;width:380px;z-index:100}.modal,.overlay-fade-enter-from,.overlay-fade-leave-to{opacity:0}.overlay-fade-enter-active,.overlay-fade-leave-active{transition:opacity .25s ease}
|
|
69
69
|
</style>
|
|
@@ -48,15 +48,15 @@ function toggle() {
|
|
|
48
48
|
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
|
49
49
|
}
|
|
50
50
|
.switch-button:hover:not(.disabled) {
|
|
51
|
-
border-color: var(--color-
|
|
51
|
+
border-color: var(--color-border);
|
|
52
52
|
}
|
|
53
53
|
.switch-button:focus-visible {
|
|
54
54
|
outline: 2px solid var(--color-accent);
|
|
55
55
|
outline-offset: 2px;
|
|
56
56
|
}
|
|
57
57
|
.switch-button.active {
|
|
58
|
-
background-color: var(--color-accent-
|
|
59
|
-
color: var(--color-accent);
|
|
58
|
+
background-color: var(--color-accent-active);
|
|
59
|
+
color: var(--color-accent-soft);
|
|
60
60
|
border-color: var(--color-accent);
|
|
61
61
|
}
|
|
62
62
|
.switch-button.disabled {
|