orio-ui 1.2.0 → 1.4.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
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { computed, toRefs, useAttrs, useSlots } from "vue";
|
|
3
|
+
|
|
4
|
+
interface Props {
|
|
5
|
+
icon?: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
active?: boolean;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
11
|
+
active: false,
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
const { disabled, active } = toRefs(props);
|
|
15
|
+
|
|
16
|
+
const attrs = useAttrs();
|
|
17
|
+
const slots = useSlots();
|
|
18
|
+
|
|
19
|
+
const isIconOnly = computed(() => {
|
|
20
|
+
const hasIcon = !!props.icon || !!slots.icon;
|
|
21
|
+
const hasDefault = !!slots.default;
|
|
22
|
+
return hasIcon && !hasDefault;
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
const emit = defineEmits<{
|
|
26
|
+
(e: "click", event: PointerEvent): void;
|
|
27
|
+
}>();
|
|
28
|
+
|
|
29
|
+
function click(event: PointerEvent) {
|
|
30
|
+
if (disabled.value) return;
|
|
31
|
+
emit("click", event);
|
|
32
|
+
}
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<template>
|
|
36
|
+
<orio-control-element>
|
|
37
|
+
<button
|
|
38
|
+
v-bind="attrs"
|
|
39
|
+
:class="{ 'icon-only': isIconOnly, active }"
|
|
40
|
+
:disabled
|
|
41
|
+
:aria-current="active ? 'page' : undefined"
|
|
42
|
+
@click="click"
|
|
43
|
+
>
|
|
44
|
+
<slot name="icon">
|
|
45
|
+
<orio-icon v-if="icon" :name="icon" />
|
|
46
|
+
</slot>
|
|
47
|
+
<slot />
|
|
48
|
+
</button>
|
|
49
|
+
</orio-control-element>
|
|
50
|
+
</template>
|
|
51
|
+
|
|
52
|
+
<style scoped>
|
|
53
|
+
button {
|
|
54
|
+
background-color: transparent;
|
|
55
|
+
color: var(--color-text);
|
|
56
|
+
border: none;
|
|
57
|
+
border-radius: var(--border-radius-md);
|
|
58
|
+
padding: 8px 16px;
|
|
59
|
+
font-size: 1rem;
|
|
60
|
+
line-height: 1.5;
|
|
61
|
+
cursor: pointer;
|
|
62
|
+
display: inline-flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
gap: 0.5rem;
|
|
65
|
+
user-select: none;
|
|
66
|
+
transition: color 0.2s ease;
|
|
67
|
+
}
|
|
68
|
+
button.icon-only {
|
|
69
|
+
padding: 8px;
|
|
70
|
+
border-radius: 50%;
|
|
71
|
+
aspect-ratio: 1;
|
|
72
|
+
justify-content: center;
|
|
73
|
+
}
|
|
74
|
+
button:hover:not(:disabled) {
|
|
75
|
+
color: var(--color-accent);
|
|
76
|
+
}
|
|
77
|
+
button.active {
|
|
78
|
+
color: var(--color-accent);
|
|
79
|
+
font-weight: 600;
|
|
80
|
+
}
|
|
81
|
+
button:disabled {
|
|
82
|
+
opacity: 0.5;
|
|
83
|
+
cursor: not-allowed;
|
|
84
|
+
}
|
|
85
|
+
button:focus-visible {
|
|
86
|
+
outline: 2px solid var(--color-accent);
|
|
87
|
+
outline-offset: 2px;
|
|
88
|
+
}
|
|
89
|
+
</style>
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { ref, computed, nextTick } from "vue";
|
|
3
|
+
import { useEventListener } from "@vueuse/core";
|
|
4
|
+
|
|
5
|
+
export interface TooltipProps {
|
|
6
|
+
text?: string;
|
|
7
|
+
placement?: "top" | "bottom" | "left" | "right";
|
|
8
|
+
delay?: number;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
offset?: number;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const props = withDefaults(defineProps<TooltipProps>(), {
|
|
14
|
+
text: undefined,
|
|
15
|
+
placement: "top",
|
|
16
|
+
delay: 500,
|
|
17
|
+
disabled: false,
|
|
18
|
+
offset: 8,
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
const isVisible = ref(false);
|
|
22
|
+
const trigger = ref<HTMLElement | null>(null);
|
|
23
|
+
const tooltip = ref<HTMLElement | null>(null);
|
|
24
|
+
const position = ref({ top: 0, left: 0 });
|
|
25
|
+
let showTimeout: ReturnType<typeof setTimeout> | null = null;
|
|
26
|
+
|
|
27
|
+
function calculatePosition() {
|
|
28
|
+
if (!trigger.value || !tooltip.value) return;
|
|
29
|
+
|
|
30
|
+
const triggerRect = trigger.value.getBoundingClientRect();
|
|
31
|
+
const tooltipRect = tooltip.value.getBoundingClientRect();
|
|
32
|
+
const scrollX = window.scrollX || window.pageXOffset;
|
|
33
|
+
const scrollY = window.scrollY || window.pageYOffset;
|
|
34
|
+
|
|
35
|
+
let top = 0;
|
|
36
|
+
let left = 0;
|
|
37
|
+
|
|
38
|
+
switch (props.placement) {
|
|
39
|
+
case "top":
|
|
40
|
+
top = triggerRect.top + scrollY - tooltipRect.height - props.offset;
|
|
41
|
+
left =
|
|
42
|
+
triggerRect.left +
|
|
43
|
+
scrollX +
|
|
44
|
+
(triggerRect.width - tooltipRect.width) / 2;
|
|
45
|
+
break;
|
|
46
|
+
case "bottom":
|
|
47
|
+
top = triggerRect.bottom + scrollY + props.offset;
|
|
48
|
+
left =
|
|
49
|
+
triggerRect.left +
|
|
50
|
+
scrollX +
|
|
51
|
+
(triggerRect.width - tooltipRect.width) / 2;
|
|
52
|
+
break;
|
|
53
|
+
case "left":
|
|
54
|
+
top =
|
|
55
|
+
triggerRect.top +
|
|
56
|
+
scrollY +
|
|
57
|
+
(triggerRect.height - tooltipRect.height) / 2;
|
|
58
|
+
left = triggerRect.left + scrollX - tooltipRect.width - props.offset;
|
|
59
|
+
break;
|
|
60
|
+
case "right":
|
|
61
|
+
top =
|
|
62
|
+
triggerRect.top +
|
|
63
|
+
scrollY +
|
|
64
|
+
(triggerRect.height - tooltipRect.height) / 2;
|
|
65
|
+
left = triggerRect.right + scrollX + props.offset;
|
|
66
|
+
break;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
position.value = { top, left };
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
function showTooltip() {
|
|
73
|
+
if (props.disabled) return;
|
|
74
|
+
|
|
75
|
+
if (props.delay > 0) {
|
|
76
|
+
showTimeout = setTimeout(() => {
|
|
77
|
+
isVisible.value = true;
|
|
78
|
+
nextTick(calculatePosition);
|
|
79
|
+
}, props.delay);
|
|
80
|
+
} else {
|
|
81
|
+
isVisible.value = true;
|
|
82
|
+
nextTick(calculatePosition);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
function hideTooltip() {
|
|
87
|
+
if (showTimeout) {
|
|
88
|
+
clearTimeout(showTimeout);
|
|
89
|
+
showTimeout = null;
|
|
90
|
+
}
|
|
91
|
+
isVisible.value = false;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// Update position on scroll
|
|
95
|
+
useEventListener(
|
|
96
|
+
window,
|
|
97
|
+
"scroll",
|
|
98
|
+
() => {
|
|
99
|
+
if (isVisible.value) calculatePosition();
|
|
100
|
+
},
|
|
101
|
+
{ capture: true },
|
|
102
|
+
);
|
|
103
|
+
|
|
104
|
+
// Update position on resize
|
|
105
|
+
useEventListener(window, "resize", () => {
|
|
106
|
+
if (isVisible.value) calculatePosition();
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
const tooltipStyle = computed(() => ({
|
|
110
|
+
top: `${position.value.top}px`,
|
|
111
|
+
left: `${position.value.left}px`,
|
|
112
|
+
}));
|
|
113
|
+
|
|
114
|
+
const arrowClass = computed(() => `arrow-${props.placement}`);
|
|
115
|
+
</script>
|
|
116
|
+
|
|
117
|
+
<template>
|
|
118
|
+
<div
|
|
119
|
+
ref="trigger"
|
|
120
|
+
class="trigger"
|
|
121
|
+
@mouseenter="showTooltip"
|
|
122
|
+
@mouseleave="hideTooltip"
|
|
123
|
+
@focus="showTooltip"
|
|
124
|
+
@blur="hideTooltip"
|
|
125
|
+
>
|
|
126
|
+
<slot />
|
|
127
|
+
<Teleport v-if="isVisible" to="body">
|
|
128
|
+
<div
|
|
129
|
+
ref="tooltip"
|
|
130
|
+
class="tooltip"
|
|
131
|
+
:style="tooltipStyle"
|
|
132
|
+
role="tooltip"
|
|
133
|
+
:aria-hidden="!isVisible"
|
|
134
|
+
>
|
|
135
|
+
<div class="content">
|
|
136
|
+
<slot name="content">
|
|
137
|
+
{{ text }}
|
|
138
|
+
</slot>
|
|
139
|
+
</div>
|
|
140
|
+
<div :class="['arrow', arrowClass]" />
|
|
141
|
+
</div>
|
|
142
|
+
</Teleport>
|
|
143
|
+
</div>
|
|
144
|
+
</template>
|
|
145
|
+
|
|
146
|
+
<style scoped>
|
|
147
|
+
.trigger{align-items:center;display:inline-flex;justify-content:center}.tooltip{pointer-events:none;position:absolute;z-index:9999}.content{background-color:rgba(0,0,0,.9);border-radius:var(--border-radius-sm,4px);box-shadow:0 2px 8px rgba(0,0,0,.15);color:#fff;font-size:.875rem;line-height:1.4;padding:.5rem .75rem;white-space:nowrap}.arrow{border-style:solid;height:0;position:absolute;width:0}.arrow-top{border-color:rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 0;bottom:-4px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%)}.arrow-bottom{border-color:transparent transparent rgba(0,0,0,.9);border-width:0 4px 4px;top:-4px}.arrow-left{border-color:transparent transparent transparent rgba(0,0,0,.9);border-width:4px 0 4px 4px;right:-4px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-right{border-color:transparent rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 4px 0;left:-4px}
|
|
148
|
+
</style>
|
package/dist/runtime/index.d.ts
CHANGED
|
@@ -1,21 +1,23 @@
|
|
|
1
|
-
export { default as Button } from
|
|
2
|
-
export { default as
|
|
3
|
-
export { default as
|
|
4
|
-
export { default as
|
|
5
|
-
export { default as
|
|
6
|
-
export { default as
|
|
7
|
-
export { default as
|
|
8
|
-
export { default as
|
|
9
|
-
export { default as
|
|
10
|
-
export { default as
|
|
11
|
-
export { default as
|
|
12
|
-
export { default as
|
|
13
|
-
export { default as
|
|
14
|
-
export { default as
|
|
15
|
-
export { default as
|
|
16
|
-
export { default as
|
|
17
|
-
export { default as
|
|
18
|
-
export { default as
|
|
19
|
-
export { default as
|
|
20
|
-
export
|
|
21
|
-
export {
|
|
1
|
+
export { default as Button } from "./components/Button.vue.js";
|
|
2
|
+
export { default as NavButton } from "./components/NavButton.vue.js";
|
|
3
|
+
export { default as Input } from "./components/Input.vue.js";
|
|
4
|
+
export { default as Textarea } from "./components/Textarea.vue.js";
|
|
5
|
+
export { default as CheckBox } from "./components/CheckBox.vue.js";
|
|
6
|
+
export { default as SwitchButton } from "./components/SwitchButton.vue.js";
|
|
7
|
+
export { default as DatePicker } from "./components/DatePicker.vue.js";
|
|
8
|
+
export { default as DateRangePicker } from "./components/DateRangePicker.vue.js";
|
|
9
|
+
export { default as Selector } from "./components/Selector.vue.js";
|
|
10
|
+
export { default as Tag } from "./components/Tag.vue.js";
|
|
11
|
+
export { default as Icon } from "./components/Icon.vue.js";
|
|
12
|
+
export { default as LoadingSpinner } from "./components/LoadingSpinner.vue.js";
|
|
13
|
+
export { default as Modal } from "./components/Modal.vue.js";
|
|
14
|
+
export { default as Popover } from "./components/Popover.vue.js";
|
|
15
|
+
export { default as Tooltip } from "./components/Tooltip.vue.js";
|
|
16
|
+
export { default as EmptyState } from "./components/EmptyState.vue.js";
|
|
17
|
+
export { default as DashedContainer } from "./components/DashedContainer.vue.js";
|
|
18
|
+
export { default as ControlElement } from "./components/ControlElement.vue.js";
|
|
19
|
+
export { default as ViewText } from "./components/view/Text.vue.js";
|
|
20
|
+
export { default as ViewDates } from "./components/view/Dates.vue.js";
|
|
21
|
+
export { default as ViewSeparator } from "./components/view/Separator.vue.js";
|
|
22
|
+
export * from "./composables/index.js";
|
|
23
|
+
export { iconRegistry, type IconName } from "./utils/icon-registry.js";
|
package/dist/runtime/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as Button } from "./components/Button.vue";
|
|
2
|
+
export { default as NavButton } from "./components/NavButton.vue";
|
|
2
3
|
export { default as Input } from "./components/Input.vue";
|
|
3
4
|
export { default as Textarea } from "./components/Textarea.vue";
|
|
4
5
|
export { default as CheckBox } from "./components/CheckBox.vue";
|
|
@@ -11,6 +12,7 @@ export { default as Icon } from "./components/Icon.vue";
|
|
|
11
12
|
export { default as LoadingSpinner } from "./components/LoadingSpinner.vue";
|
|
12
13
|
export { default as Modal } from "./components/Modal.vue";
|
|
13
14
|
export { default as Popover } from "./components/Popover.vue";
|
|
15
|
+
export { default as Tooltip } from "./components/Tooltip.vue";
|
|
14
16
|
export { default as EmptyState } from "./components/EmptyState.vue";
|
|
15
17
|
export { default as DashedContainer } from "./components/DashedContainer.vue";
|
|
16
18
|
export { default as ControlElement } from "./components/ControlElement.vue";
|
|
@@ -22,5 +22,51 @@ export const iconRegistry = {
|
|
|
22
22
|
// Download
|
|
23
23
|
download: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7zM5 18v2h14v-2z"/></svg>`,
|
|
24
24
|
// Delete / Trash
|
|
25
|
-
delete: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12l1.41 1.41L13.41 14l2.12 2.12l-1.41 1.41L12 15.41l-2.12 2.12l-1.41-1.41L10.59 14zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"/></svg
|
|
25
|
+
delete: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12l1.41 1.41L13.41 14l2.12 2.12l-1.41 1.41L12 15.41l-2.12 2.12l-1.41-1.41L10.59 14zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"/></svg>`,
|
|
26
|
+
// E-COMMERCE ICONS
|
|
27
|
+
// Shopping & Cart
|
|
28
|
+
"shopping-cart": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2s-.9-2-2-2M1 2v2h2l3.6 7.59l-1.35 2.45c-.16.28-.25.61-.25.96c0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12l.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2s2-.9 2-2s-.9-2-2-2"/></svg>`,
|
|
29
|
+
"shopping-bag": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M18 6h-2c0-2.21-1.79-4-4-4S8 3.79 8 6H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2m-6-2c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2m6 16H6V8h2v2c0 .55.45 1 1 1s1-.45 1-1V8h4v2c0 .55.45 1 1 1s1-.45 1-1V8h2z"/></svg>`,
|
|
30
|
+
"cart-plus": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2s-.9-2-2-2M1 2v2h2l3.6 7.59l-1.35 2.45c-.16.28-.25.61-.25.96c0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12l.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2s2-.9 2-2s-.9-2-2-2"/></svg>`,
|
|
31
|
+
"cart-remove": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2s-.9-2-2-2M1 2v2h2l3.6 7.59l-1.35 2.45c-.16.28-.25.61-.25.96c0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12l.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2s2-.9 2-2s-.9-2-2-2M8 6h8v2H8z"/></svg>`,
|
|
32
|
+
// Products & Inventory
|
|
33
|
+
tag: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42M5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4S7 4.67 7 5.5S6.33 7 5.5 7"/></svg>`,
|
|
34
|
+
barcode: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M2 6h2v12H2zm3 0h1v12H5zm2 0h3v12H7zm4 0h1v12h-1zm2 0h1v12h-1zm2 0h3v12h-3zm4 0h2v12h-2z"/></svg>`,
|
|
35
|
+
package: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m20 8l-6-4.7L12 2L2 8v13h20zm-8 10H4v-7.1l8-6.2l8 6.2V18h-8zm0-8l-6-4.5l6-4.7l6 4.7z"/></svg>`,
|
|
36
|
+
gift: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 0 0-5.5-1.65l-.5.67l-.5-.68C10.96 2.54 10.05 2 9 2C7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2m-5-2c.55 0 1 .45 1 1s-.45 1-1 1s-1-.45-1-1s.45-1 1-1M9 4c.55 0 1 .45 1 1s-.45 1-1 1s-1-.45-1-1s.45-1 1-1m11 15H4v-2h16zm0-5H4V8h5.08L7 10.83L8.62 12L11 8.76l1-1.36l1 1.36L15.38 12L17 10.83L14.92 8H20z"/></svg>`,
|
|
37
|
+
// User & Account
|
|
38
|
+
user: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"/></svg>`,
|
|
39
|
+
heart: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"/></svg>`,
|
|
40
|
+
"heart-outline": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5C22 5.42 19.58 3 16.5 3m-4.4 15.55l-.1.1l-.1-.1C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5c0 2.89-3.14 5.74-7.9 10.05"/></svg>`,
|
|
41
|
+
star: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21z"/></svg>`,
|
|
42
|
+
"star-outline": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m22 9.24l-7.19-.62L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21L12 17.27L18.18 21l-1.63-7.03zM12 15.4l-3.76 2.27l1-4.28l-3.32-2.88l4.38-.38L12 6.1l1.71 4.04l4.38.38l-3.32 2.88l1 4.28z"/></svg>`,
|
|
43
|
+
// Payment
|
|
44
|
+
"credit-card": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2m0 14H4v-6h16zm0-10H4V6h16z"/></svg>`,
|
|
45
|
+
wallet: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21 18v1c0 1.1-.9 2-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14c1.1 0 2 .9 2 2v1h-9a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2zm-9-2h10V8H12zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5s1.5.67 1.5 1.5s-.67 1.5-1.5 1.5"/></svg>`,
|
|
46
|
+
receipt: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M18 17H6v-2h12zm0-4H6v-2h12zm0-4H6V7h12zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2L7.5 3.5L6 2L4.5 3.5L3 2z"/></svg>`,
|
|
47
|
+
// Navigation
|
|
48
|
+
home: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z"/></svg>`,
|
|
49
|
+
menu: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"/></svg>`,
|
|
50
|
+
filter: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z"/></svg>`,
|
|
51
|
+
"grid-view": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 3v8h8V3zm6 6H5V5h4zm-6 4v8h8v-8zm6 6H5v-4h4zm4-16v8h8V3zm6 6h-4V5h4zm-6 4v8h8v-8zm6 6h-4v-4h4z"/></svg>`,
|
|
52
|
+
"list-view": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 14h4v-4H3zm0 5h4v-4H3zM3 9h4V5H3zm5 5h13v-4H8zm0 5h13v-4H8zM8 5v4h13V5z"/></svg>`,
|
|
53
|
+
// Actions
|
|
54
|
+
share: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81c1.66 0 3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65c0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92"/></svg>`,
|
|
55
|
+
refresh: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M17.65 6.35A7.96 7.96 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z"/></svg>`,
|
|
56
|
+
settings: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19.14 12.94c.04-.3.06-.61.06-.94c0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6s3.6 1.62 3.6 3.6s-1.62 3.6-3.6 3.6"/></svg>`,
|
|
57
|
+
bell: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2m6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1z"/></svg>`,
|
|
58
|
+
// Status & Info
|
|
59
|
+
info: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"/></svg>`,
|
|
60
|
+
warning: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z"/></svg>`,
|
|
61
|
+
"check-circle": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8z"/></svg>`,
|
|
62
|
+
"error-circle": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z"/></svg>`,
|
|
63
|
+
help: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41c0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"/></svg>`,
|
|
64
|
+
// Shipping & Delivery
|
|
65
|
+
truck: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M18 18.5a1.5 1.5 0 0 1-1.5-1.5a1.5 1.5 0 0 1 1.5-1.5a1.5 1.5 0 0 1 1.5 1.5a1.5 1.5 0 0 1-1.5 1.5m1.5-9l1.96 2.5H17V9.5M6 18.5A1.5 1.5 0 0 1 4.5 17A1.5 1.5 0 0 1 6 15.5A1.5 1.5 0 0 1 7.5 17A1.5 1.5 0 0 1 6 18.5M20 8h-3V4H3c-1.11 0-2 .89-2 2v11h2a3 3 0 0 0 3 3a3 3 0 0 0 3-3h6a3 3 0 0 0 3 3a3 3 0 0 0 3-3h2v-5z"/></svg>`,
|
|
66
|
+
location: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7m0 9.5a2.5 2.5 0 0 1 0-5a2.5 2.5 0 0 1 0 5"/></svg>`,
|
|
67
|
+
"map-pin": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7m0 9.5a2.5 2.5 0 0 1 0-5a2.5 2.5 0 0 1 0 5"/></svg>`,
|
|
68
|
+
// More e-commerce actions
|
|
69
|
+
compare: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h5v2h2V1h-2zm0 15H5l5-6zm9-15h-5v2h5v13l-5-6v9h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2"/></svg>`,
|
|
70
|
+
discount: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m12.79 21l-.16-.16L2.38 10.59a2.04 2.04 0 0 1-.38-.62a2 2 0 0 1 0-1.54c.08-.23.2-.45.38-.62l1.67-1.67a2.04 2.04 0 0 1 .62-.38c.24-.09.49-.13.75-.13s.51.04.75.13c.23.08.44.2.62.38l1.26 1.25V3c0-.55.2-1.02.59-1.41C9.03 1.2 9.5 1 10.04 1h3.92c.54 0 1.01.2 1.41.59c.39.39.59.86.59 1.41v4.39l1.26-1.25c.18-.18.39-.3.62-.38c.24-.09.49-.13.75-.13s.51.04.75.13c.23.08.44.2.62.38l1.67 1.67c.18.17.3.38.38.62c.09.24.13.49.13.76c0 .26-.04.51-.13.75s-.2.45-.38.63L11.38 20.83l-.17.16c-.39.39-.86.59-1.41.59s-1.02-.2-1.41-.59zM14 8V3h-4v5zm-6.8 4.2c.26.26.57.39.93.39c.36 0 .67-.13.93-.39c.26-.26.39-.57.39-.93c0-.36-.13-.67-.39-.93a1.28 1.28 0 0 0-.93-.39c-.36 0-.67.13-.93.39c-.26.26-.39.57-.39.93c0 .36.13.67.39.93m9.6 4.6c.26.26.57.39.93.39c.36 0 .67-.13.93-.39c.26-.26.39-.57.39-.93c0-.36-.13-.67-.39-.93a1.28 1.28 0 0 0-.93-.39c-.36 0-.67.13-.93.39c-.26.26-.39.57-.39.93c0 .36.13.67.39.93m-8.4 1.1l9.5-9.5l-1.4-1.4l-9.5 9.5z"/></svg>`,
|
|
71
|
+
box: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5v-3h14zm0-5H5V5h14z"/></svg>`
|
|
26
72
|
};
|