urkit-ui 0.1.5
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/README.md +322 -0
- package/dist/module.cjs +75 -0
- package/dist/module.d.cts +46 -0
- package/dist/module.d.mts +46 -0
- package/dist/module.d.ts +46 -0
- package/dist/module.json +12 -0
- package/dist/module.mjs +72 -0
- package/dist/runtime/assets/css/buttons.css +1 -0
- package/dist/runtime/assets/css/colors.css +1 -0
- package/dist/runtime/assets/css/form-fields.css +1 -0
- package/dist/runtime/assets/css/global.css +1 -0
- package/dist/runtime/components/Button.d.vue.ts +87 -0
- package/dist/runtime/components/Button.vue +147 -0
- package/dist/runtime/components/Button.vue.d.ts +87 -0
- package/dist/runtime/components/Icon.d.vue.ts +9 -0
- package/dist/runtime/components/Icon.vue +71 -0
- package/dist/runtime/components/Icon.vue.d.ts +9 -0
- package/dist/runtime/components/Input.d.vue.ts +129 -0
- package/dist/runtime/components/Input.vue +342 -0
- package/dist/runtime/components/Input.vue.d.ts +129 -0
- package/dist/runtime/composables/useIcon.d.ts +5 -0
- package/dist/runtime/composables/useIcon.js +71 -0
- package/dist/runtime/plugin.d.ts +2 -0
- package/dist/runtime/plugin.js +4 -0
- package/dist/runtime/public/assets/icons/arrow-down.svg +10 -0
- package/dist/runtime/public/assets/icons/collapse.svg +6 -0
- package/dist/runtime/public/assets/icons/color.svg +1 -0
- package/dist/runtime/public/assets/icons/copied.svg +3 -0
- package/dist/runtime/public/assets/icons/copy.svg +10 -0
- package/dist/runtime/public/assets/icons/figma.svg +1 -0
- package/dist/runtime/public/assets/icons/heart.svg +3 -0
- package/dist/runtime/public/assets/icons/hide.svg +8 -0
- package/dist/runtime/public/assets/icons/icons-icon.svg +10 -0
- package/dist/runtime/public/assets/icons/installation.svg +1 -0
- package/dist/runtime/public/assets/icons/introduction.svg +1 -0
- package/dist/runtime/public/assets/icons/loader-icon.svg +6 -0
- package/dist/runtime/public/assets/icons/profile.svg +1 -0
- package/dist/runtime/public/assets/icons/radiuss.svg +4 -0
- package/dist/runtime/public/assets/icons/search.svg +1 -0
- package/dist/runtime/public/assets/icons/show.svg +4 -0
- package/dist/runtime/public/assets/icons/star.svg +3 -0
- package/dist/runtime/public/assets/icons/toast-close.svg +3 -0
- package/dist/runtime/public/assets/icons/toast-error.svg +4 -0
- package/dist/runtime/public/assets/icons/toast-info.svg +5 -0
- package/dist/runtime/public/assets/icons/toast-success.svg +4 -0
- package/dist/runtime/public/assets/icons/toast-warning.svg +5 -0
- package/dist/runtime/public/assets/icons/typo.svg +1 -0
- package/dist/runtime/public/assets/logos/urkit-logo-blue.svg +53 -0
- package/dist/runtime/public/assets/logos/urkit-logo-cyan.svg +53 -0
- package/dist/runtime/public/assets/logos/urkit-logo-green.svg +53 -0
- package/dist/runtime/public/assets/logos/urkit-logo-purple.svg +53 -0
- package/dist/runtime/public/assets/logos/urkit-logo.svg +19 -0
- package/dist/runtime/server/tsconfig.json +3 -0
- package/dist/types.d.mts +3 -0
- package/package.json +70 -0
- package/src/runtime/public/assets/icons/arrow-down.svg +10 -0
- package/src/runtime/public/assets/icons/collapse.svg +6 -0
- package/src/runtime/public/assets/icons/color.svg +1 -0
- package/src/runtime/public/assets/icons/copied.svg +3 -0
- package/src/runtime/public/assets/icons/copy.svg +10 -0
- package/src/runtime/public/assets/icons/figma.svg +1 -0
- package/src/runtime/public/assets/icons/heart.svg +3 -0
- package/src/runtime/public/assets/icons/hide.svg +8 -0
- package/src/runtime/public/assets/icons/icons-icon.svg +10 -0
- package/src/runtime/public/assets/icons/installation.svg +1 -0
- package/src/runtime/public/assets/icons/introduction.svg +1 -0
- package/src/runtime/public/assets/icons/loader-icon.svg +6 -0
- package/src/runtime/public/assets/icons/profile.svg +1 -0
- package/src/runtime/public/assets/icons/radiuss.svg +4 -0
- package/src/runtime/public/assets/icons/search.svg +1 -0
- package/src/runtime/public/assets/icons/show.svg +4 -0
- package/src/runtime/public/assets/icons/star.svg +3 -0
- package/src/runtime/public/assets/icons/toast-close.svg +3 -0
- package/src/runtime/public/assets/icons/toast-error.svg +4 -0
- package/src/runtime/public/assets/icons/toast-info.svg +5 -0
- package/src/runtime/public/assets/icons/toast-success.svg +4 -0
- package/src/runtime/public/assets/icons/toast-warning.svg +5 -0
- package/src/runtime/public/assets/icons/typo.svg +1 -0
- package/src/runtime/public/assets/logos/urkit-logo-blue.svg +53 -0
- package/src/runtime/public/assets/logos/urkit-logo-cyan.svg +53 -0
- package/src/runtime/public/assets/logos/urkit-logo-green.svg +53 -0
- package/src/runtime/public/assets/logos/urkit-logo-purple.svg +53 -0
- package/src/runtime/public/assets/logos/urkit-logo.svg +19 -0
|
@@ -0,0 +1,342 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="field-wrapper" :class="{ 'has-error': hasError, 'is-disabled': disabled }">
|
|
3
|
+
<!-- Label -->
|
|
4
|
+
<label v-if="label" class="field-label" :for="inputId">
|
|
5
|
+
{{ label }}
|
|
6
|
+
</label>
|
|
7
|
+
|
|
8
|
+
<!-- Input Container -->
|
|
9
|
+
<div class="field-container" :class="inputContainerClasses">
|
|
10
|
+
<!-- Left Icon -->
|
|
11
|
+
<span v-if="icon && iconPosition === 'left'" class="field-icon field-icon--left" aria-hidden="true">
|
|
12
|
+
<Icon :name="iconName" :size="iconSize" />
|
|
13
|
+
</span>
|
|
14
|
+
|
|
15
|
+
<!-- Left Affix (outside input) -->
|
|
16
|
+
<span v-if="affix && affixPosition === 'left'" class="field-affix field-affix--left">
|
|
17
|
+
{{ affix }}
|
|
18
|
+
</span>
|
|
19
|
+
|
|
20
|
+
<!-- Inline Left Affix (inside input) -->
|
|
21
|
+
<span v-if="inlineAffix && inlineAffixPosition === 'left'" class="field-inline-affix field-inline-affix--left">
|
|
22
|
+
{{ inlineAffix }}
|
|
23
|
+
</span>
|
|
24
|
+
|
|
25
|
+
<!-- Input Field -->
|
|
26
|
+
<input
|
|
27
|
+
:id="inputId"
|
|
28
|
+
:type="inputType"
|
|
29
|
+
:placeholder="placeholder"
|
|
30
|
+
:disabled="disabled"
|
|
31
|
+
:readonly="readonly"
|
|
32
|
+
:required="required"
|
|
33
|
+
:value="modelValue"
|
|
34
|
+
:class="inputClasses"
|
|
35
|
+
:aria-describedby="ariaDescribedBy"
|
|
36
|
+
:aria-invalid="hasError"
|
|
37
|
+
@input="handleInput"
|
|
38
|
+
@focus="handleFocus"
|
|
39
|
+
@blur="handleBlur"
|
|
40
|
+
@keydown="handleKeydown"
|
|
41
|
+
/>
|
|
42
|
+
|
|
43
|
+
<!-- Inline Right Affix (inside input) -->
|
|
44
|
+
<span v-if="inlineAffix && inlineAffixPosition === 'right'" class="field-inline-affix field-inline-affix--right">
|
|
45
|
+
{{ inlineAffix }}
|
|
46
|
+
</span>
|
|
47
|
+
|
|
48
|
+
<!-- Right Icon / Password Toggle -->
|
|
49
|
+
<span v-if="showRightIcon" class="field-icon field-icon--right" aria-hidden="true">
|
|
50
|
+
<Icon
|
|
51
|
+
v-if="password && !customRightIcon"
|
|
52
|
+
:name="passwordVisible ? 'icons:hide' : 'icons:show'"
|
|
53
|
+
:size="iconSize"
|
|
54
|
+
class="password-toggle"
|
|
55
|
+
@click="togglePasswordVisibility"
|
|
56
|
+
alt=""
|
|
57
|
+
/>
|
|
58
|
+
<Icon v-else-if="icon && iconPosition === 'right'" :name="iconName" :size="iconSize" />
|
|
59
|
+
</span>
|
|
60
|
+
|
|
61
|
+
<!-- Right Affix (outside input) -->
|
|
62
|
+
<span v-if="affix && affixPosition === 'right'" class="field-affix field-affix--right">
|
|
63
|
+
{{ affix }}
|
|
64
|
+
</span>
|
|
65
|
+
|
|
66
|
+
<!-- Select Dropdown -->
|
|
67
|
+
<div v-if="withSelect" class="field-select-container">
|
|
68
|
+
<button
|
|
69
|
+
type="button"
|
|
70
|
+
class="field-select-trigger"
|
|
71
|
+
:class="{ 'field-select-trigger--open': selectOpen }"
|
|
72
|
+
@click="toggleSelect"
|
|
73
|
+
>
|
|
74
|
+
<div class="field-select-value">
|
|
75
|
+
<img
|
|
76
|
+
v-if="selectedOptionData?.flag"
|
|
77
|
+
:src="selectedOptionData.flag"
|
|
78
|
+
:alt="selectedOptionData.label"
|
|
79
|
+
class="select-option-flag"
|
|
80
|
+
/>
|
|
81
|
+
<Icon
|
|
82
|
+
v-else-if="selectedOptionData?.icon"
|
|
83
|
+
:name="selectedOptionData.icon"
|
|
84
|
+
size="16"
|
|
85
|
+
class="select-option-icon"
|
|
86
|
+
/>
|
|
87
|
+
<span>{{ selectedOptionData?.label || selectPlaceholder }}</span>
|
|
88
|
+
</div>
|
|
89
|
+
<Icon name="icons:arrow-down" size="14" mode="svg" class="field-select-chevron" />
|
|
90
|
+
</button>
|
|
91
|
+
|
|
92
|
+
<div v-if="selectOpen" class="field-select-dropdown">
|
|
93
|
+
<div
|
|
94
|
+
v-for="option in selectOptions"
|
|
95
|
+
:key="option.value"
|
|
96
|
+
class="field-select-option"
|
|
97
|
+
:class="{
|
|
98
|
+
'field-select-option--selected': option.value === selectedOption
|
|
99
|
+
}"
|
|
100
|
+
@click="selectOption(option)"
|
|
101
|
+
>
|
|
102
|
+
<img v-if="option.flag" :src="option.flag" :alt="option.label" class="select-option-flag" />
|
|
103
|
+
<Icon v-else-if="option.icon" :name="option.icon" size="16" class="select-option-icon" />
|
|
104
|
+
<span>{{ option.label }}</span>
|
|
105
|
+
<!-- <Icon v-if="option.value === selectedOption" name="heroicons:check" size="16" class="select-option-check" /> -->
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<!-- Button -->
|
|
111
|
+
<Button
|
|
112
|
+
v-if="withButton"
|
|
113
|
+
:label="buttonLabel"
|
|
114
|
+
:variant="buttonVariant"
|
|
115
|
+
:size="buttonSize"
|
|
116
|
+
:disabled="buttonDisabled"
|
|
117
|
+
:loading="buttonLoading"
|
|
118
|
+
:radiusType="props.radiusType"
|
|
119
|
+
class="field-button"
|
|
120
|
+
@click="handleButtonClick"
|
|
121
|
+
/>
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<!-- Hint -->
|
|
125
|
+
<p v-if="hint && !hasError" class="field-hint">
|
|
126
|
+
{{ hint }}
|
|
127
|
+
</p>
|
|
128
|
+
|
|
129
|
+
<!-- Password Requirements -->
|
|
130
|
+
<div v-if="password && showPasswordRequirements" class="password-requirements">
|
|
131
|
+
<!-- Progress Indicators -->
|
|
132
|
+
<div class="password-progress">
|
|
133
|
+
<div class="progress-bar" :class="getProgressBarColor(0)"></div>
|
|
134
|
+
<div class="progress-bar" :class="getProgressBarColor(1)"></div>
|
|
135
|
+
<div class="progress-bar" :class="getProgressBarColor(2)"></div>
|
|
136
|
+
</div>
|
|
137
|
+
<p class="requirements-title">Must contain at least;</p>
|
|
138
|
+
<div class="requirements-list">
|
|
139
|
+
<div class="requirement-item" :class="{ 'requirement-met': hasUppercase }">
|
|
140
|
+
<Icon
|
|
141
|
+
:name="hasUppercase ? 'icons:show' : 'icons:hide'"
|
|
142
|
+
size="16"
|
|
143
|
+
:class="hasUppercase ? 'requirement-icon--success' : 'requirement-icon--error'"
|
|
144
|
+
/>
|
|
145
|
+
<span>At least 1 uppercase</span>
|
|
146
|
+
</div>
|
|
147
|
+
<div class="requirement-item" :class="{ 'requirement-met': hasNumber }">
|
|
148
|
+
<Icon
|
|
149
|
+
:name="hasNumber ? 'icons:show' : 'icons:hide'"
|
|
150
|
+
size="16"
|
|
151
|
+
:class="hasNumber ? 'requirement-icon--success' : 'requirement-icon--error'"
|
|
152
|
+
/>
|
|
153
|
+
<span>At least 1 number</span>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="requirement-item" :class="{ 'requirement-met': hasMinLength }">
|
|
156
|
+
<Icon
|
|
157
|
+
:name="hasMinLength ? 'icons:show' : 'icons:show'"
|
|
158
|
+
size="16"
|
|
159
|
+
:class="hasMinLength ? 'icons:show' : 'icons:hide'"
|
|
160
|
+
/>
|
|
161
|
+
<span>At least 8 characters</span>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<!-- Error Messages -->
|
|
167
|
+
<div v-if="hasError" class="field-errors">
|
|
168
|
+
<p v-for="error in errorMessages" :key="error" class="field-error">
|
|
169
|
+
{{ error }}
|
|
170
|
+
</p>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
</template>
|
|
174
|
+
|
|
175
|
+
<script setup>
|
|
176
|
+
import { ref, computed, useId } from "vue";
|
|
177
|
+
import Button from "./Button.vue";
|
|
178
|
+
import Icon from "./Icon.vue";
|
|
179
|
+
const props = defineProps({
|
|
180
|
+
modelValue: { type: [String, Number], required: false },
|
|
181
|
+
type: { type: String, required: false, default: "text" },
|
|
182
|
+
placeholder: { type: String, required: false, default: "" },
|
|
183
|
+
label: { type: String, required: false },
|
|
184
|
+
size: { type: String, required: false, default: "lg" },
|
|
185
|
+
icon: { type: String, required: false },
|
|
186
|
+
iconPosition: { type: String, required: false, default: "left" },
|
|
187
|
+
affix: { type: String, required: false },
|
|
188
|
+
affixPosition: { type: String, required: false, default: "left" },
|
|
189
|
+
inlineAffix: { type: String, required: false },
|
|
190
|
+
inlineAffixPosition: { type: String, required: false, default: "left" },
|
|
191
|
+
password: { type: Boolean, required: false, default: false },
|
|
192
|
+
disabled: { type: Boolean, required: false, default: false },
|
|
193
|
+
readonly: { type: Boolean, required: false, default: false },
|
|
194
|
+
required: { type: Boolean, required: false, default: false },
|
|
195
|
+
errors: { type: [String, Array], required: false, default: () => [] },
|
|
196
|
+
hint: { type: String, required: false },
|
|
197
|
+
withButton: { type: Boolean, required: false },
|
|
198
|
+
buttonLabel: { type: String, required: false },
|
|
199
|
+
buttonVariant: { type: String, required: false, default: "primary" },
|
|
200
|
+
buttonSize: { type: String, required: false, default: "md" },
|
|
201
|
+
buttonDisabled: { type: Boolean, required: false, default: false },
|
|
202
|
+
buttonLoading: { type: Boolean, required: false, default: false },
|
|
203
|
+
showPasswordRequirements: { type: Boolean, required: false, default: false },
|
|
204
|
+
withSelect: { type: Boolean, required: false, default: false },
|
|
205
|
+
selectOptions: { type: Array, required: false, default: () => [] },
|
|
206
|
+
selectedOption: { type: [String, Number], required: false },
|
|
207
|
+
selectPlaceholder: { type: String, required: false, default: "Select..." },
|
|
208
|
+
radiusType: { type: String, required: false, default: "soft" }
|
|
209
|
+
});
|
|
210
|
+
const emit = defineEmits(["update:modelValue", "focus", "blur", "keydown", "button-click", "update:selectedOption"]);
|
|
211
|
+
const passwordVisible = ref(false);
|
|
212
|
+
const isFocused = ref(false);
|
|
213
|
+
const selectOpen = ref(false);
|
|
214
|
+
const inputId = useId();
|
|
215
|
+
const inputType = computed(() => {
|
|
216
|
+
if (props.password) {
|
|
217
|
+
return passwordVisible.value ? "text" : "password";
|
|
218
|
+
}
|
|
219
|
+
return props.type;
|
|
220
|
+
});
|
|
221
|
+
const errorMessages = computed(() => {
|
|
222
|
+
if (!props.errors) return [];
|
|
223
|
+
return Array.isArray(props.errors) ? props.errors : [props.errors];
|
|
224
|
+
});
|
|
225
|
+
const hasError = computed(() => {
|
|
226
|
+
return errorMessages.value.length > 0;
|
|
227
|
+
});
|
|
228
|
+
const iconName = computed(() => {
|
|
229
|
+
if (!props.icon) return "";
|
|
230
|
+
return `icons:apex`;
|
|
231
|
+
});
|
|
232
|
+
const iconSize = computed(() => {
|
|
233
|
+
const sizeMap = {
|
|
234
|
+
sm: "18",
|
|
235
|
+
md: "18",
|
|
236
|
+
lg: "18"
|
|
237
|
+
};
|
|
238
|
+
return sizeMap[props.size];
|
|
239
|
+
});
|
|
240
|
+
const showRightIcon = computed(() => {
|
|
241
|
+
return Boolean(props.password || props.icon && props.iconPosition === "right");
|
|
242
|
+
});
|
|
243
|
+
const customRightIcon = computed(() => {
|
|
244
|
+
return Boolean(!props.password && props.icon && props.iconPosition === "right");
|
|
245
|
+
});
|
|
246
|
+
const inputContainerClasses = computed(() => {
|
|
247
|
+
return [
|
|
248
|
+
"field-container--base",
|
|
249
|
+
`field-container--${props.size}`,
|
|
250
|
+
`field-container--radius-${props.radiusType}`,
|
|
251
|
+
{
|
|
252
|
+
"field-container--error": hasError.value,
|
|
253
|
+
"field-container--disabled": props.disabled,
|
|
254
|
+
"field-container--focused": isFocused.value,
|
|
255
|
+
"field-container--with-left-icon": props.icon && props.iconPosition === "left",
|
|
256
|
+
"field-container--with-right-icon": showRightIcon.value,
|
|
257
|
+
"field-container--with-left-affix": props.affix && props.affixPosition === "left",
|
|
258
|
+
"field-container--with-right-affix": props.affix && props.affixPosition === "right",
|
|
259
|
+
"field-container--with-button": props.withButton
|
|
260
|
+
}
|
|
261
|
+
];
|
|
262
|
+
});
|
|
263
|
+
const inputClasses = computed(() => {
|
|
264
|
+
return [
|
|
265
|
+
"field-input",
|
|
266
|
+
`field-input--${props.size}`,
|
|
267
|
+
{
|
|
268
|
+
"field-input--with-inline-left-affix": props.inlineAffix && props.inlineAffixPosition === "left",
|
|
269
|
+
"field-input--with-inline-right-affix": props.inlineAffix && props.inlineAffixPosition === "right"
|
|
270
|
+
}
|
|
271
|
+
];
|
|
272
|
+
});
|
|
273
|
+
const ariaDescribedBy = computed(() => {
|
|
274
|
+
const ids = [];
|
|
275
|
+
if (props.hint && !hasError.value) ids.push(`${inputId}-hint`);
|
|
276
|
+
if (hasError.value) ids.push(`${inputId}-error`);
|
|
277
|
+
return ids.join(" ");
|
|
278
|
+
});
|
|
279
|
+
const hasUppercase = computed(() => {
|
|
280
|
+
if (!props.password || !props.modelValue) return false;
|
|
281
|
+
return /[A-Z]/.test(String(props.modelValue));
|
|
282
|
+
});
|
|
283
|
+
const hasNumber = computed(() => {
|
|
284
|
+
if (!props.password || !props.modelValue) return false;
|
|
285
|
+
return /[0-9]/.test(String(props.modelValue));
|
|
286
|
+
});
|
|
287
|
+
const hasMinLength = computed(() => {
|
|
288
|
+
if (!props.password || !props.modelValue) return false;
|
|
289
|
+
return String(props.modelValue).length >= 8;
|
|
290
|
+
});
|
|
291
|
+
const requirementsMet = computed(() => {
|
|
292
|
+
let count = 0;
|
|
293
|
+
if (hasMinLength.value) count++;
|
|
294
|
+
if (hasNumber.value) count++;
|
|
295
|
+
if (hasUppercase.value) count++;
|
|
296
|
+
return count;
|
|
297
|
+
});
|
|
298
|
+
const getProgressBarColor = (index) => {
|
|
299
|
+
if (index >= requirementsMet.value) return "progress-bar--inactive";
|
|
300
|
+
switch (requirementsMet.value) {
|
|
301
|
+
case 1:
|
|
302
|
+
return "progress-bar--weak";
|
|
303
|
+
case 2:
|
|
304
|
+
return "progress-bar--medium";
|
|
305
|
+
case 3:
|
|
306
|
+
return "progress-bar--strong";
|
|
307
|
+
default:
|
|
308
|
+
return "progress-bar--inactive";
|
|
309
|
+
}
|
|
310
|
+
};
|
|
311
|
+
const selectedOptionData = computed(() => {
|
|
312
|
+
return props.selectOptions?.find((option) => option.value === props.selectedOption);
|
|
313
|
+
});
|
|
314
|
+
const handleInput = (event) => {
|
|
315
|
+
const target = event.target;
|
|
316
|
+
emit("update:modelValue", target.value);
|
|
317
|
+
};
|
|
318
|
+
const handleFocus = (event) => {
|
|
319
|
+
isFocused.value = true;
|
|
320
|
+
emit("focus", event);
|
|
321
|
+
};
|
|
322
|
+
const handleBlur = (event) => {
|
|
323
|
+
isFocused.value = false;
|
|
324
|
+
emit("blur", event);
|
|
325
|
+
};
|
|
326
|
+
const handleKeydown = (event) => {
|
|
327
|
+
emit("keydown", event);
|
|
328
|
+
};
|
|
329
|
+
const togglePasswordVisibility = () => {
|
|
330
|
+
passwordVisible.value = !passwordVisible.value;
|
|
331
|
+
};
|
|
332
|
+
const handleButtonClick = (event) => {
|
|
333
|
+
emit("button-click", event);
|
|
334
|
+
};
|
|
335
|
+
const toggleSelect = () => {
|
|
336
|
+
selectOpen.value = !selectOpen.value;
|
|
337
|
+
};
|
|
338
|
+
const selectOption = (option) => {
|
|
339
|
+
emit("update:selectedOption", option.value);
|
|
340
|
+
selectOpen.value = false;
|
|
341
|
+
};
|
|
342
|
+
</script>
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Input size types
|
|
3
|
+
*/
|
|
4
|
+
type InputSize = 'sm' | 'md' | 'lg';
|
|
5
|
+
/**
|
|
6
|
+
* Icon position types
|
|
7
|
+
*/
|
|
8
|
+
type IconPosition = 'left' | 'right';
|
|
9
|
+
/**
|
|
10
|
+
* Affix position types
|
|
11
|
+
*/
|
|
12
|
+
type AffixPosition = 'left' | 'right';
|
|
13
|
+
/**
|
|
14
|
+
* Button variant types
|
|
15
|
+
*/
|
|
16
|
+
type ButtonVariant = 'primary' | 'error' | 'success' | 'neutral';
|
|
17
|
+
/**
|
|
18
|
+
* Button size types
|
|
19
|
+
*/
|
|
20
|
+
type ButtonSize = 'sm' | 'md' | 'lg' | 'xlg';
|
|
21
|
+
/**
|
|
22
|
+
* Select option interface
|
|
23
|
+
*/
|
|
24
|
+
interface SelectOption {
|
|
25
|
+
value: string | number;
|
|
26
|
+
label: string;
|
|
27
|
+
icon?: string;
|
|
28
|
+
flag?: string;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Input component props interface
|
|
32
|
+
*/
|
|
33
|
+
interface InputProps {
|
|
34
|
+
/** Input value (v-model) */
|
|
35
|
+
modelValue?: string | number;
|
|
36
|
+
/** Input type */
|
|
37
|
+
type?: string;
|
|
38
|
+
/** Placeholder text */
|
|
39
|
+
placeholder?: string;
|
|
40
|
+
/** Input label */
|
|
41
|
+
label?: string;
|
|
42
|
+
/** Input size */
|
|
43
|
+
size?: InputSize;
|
|
44
|
+
/** Icon name */
|
|
45
|
+
icon?: string;
|
|
46
|
+
/** Icon position */
|
|
47
|
+
iconPosition?: IconPosition;
|
|
48
|
+
/** External affix text */
|
|
49
|
+
affix?: string;
|
|
50
|
+
/** Affix position */
|
|
51
|
+
affixPosition?: AffixPosition;
|
|
52
|
+
/** Inline affix text (inside input) */
|
|
53
|
+
inlineAffix?: string;
|
|
54
|
+
/** Inline affix position */
|
|
55
|
+
inlineAffixPosition?: AffixPosition;
|
|
56
|
+
/** Whether input is password type */
|
|
57
|
+
password?: boolean;
|
|
58
|
+
/** Whether input is disabled */
|
|
59
|
+
disabled?: boolean;
|
|
60
|
+
/** Whether input is readonly */
|
|
61
|
+
readonly?: boolean;
|
|
62
|
+
/** Whether input is required */
|
|
63
|
+
required?: boolean;
|
|
64
|
+
/** Error messages */
|
|
65
|
+
errors?: string | string[];
|
|
66
|
+
/** Hint text */
|
|
67
|
+
hint?: string;
|
|
68
|
+
/** Whether to show button */
|
|
69
|
+
withButton?: boolean;
|
|
70
|
+
/** Button label */
|
|
71
|
+
buttonLabel?: string;
|
|
72
|
+
/** Button variant */
|
|
73
|
+
buttonVariant?: ButtonVariant;
|
|
74
|
+
/** Button size */
|
|
75
|
+
buttonSize?: ButtonSize;
|
|
76
|
+
/** Button disabled state */
|
|
77
|
+
buttonDisabled?: boolean;
|
|
78
|
+
/** Button loading state */
|
|
79
|
+
buttonLoading?: boolean;
|
|
80
|
+
/** Show password requirements validation */
|
|
81
|
+
showPasswordRequirements?: boolean;
|
|
82
|
+
/** Whether to show select dropdown */
|
|
83
|
+
withSelect?: boolean;
|
|
84
|
+
/** Select options */
|
|
85
|
+
selectOptions?: SelectOption[];
|
|
86
|
+
/** Selected option value */
|
|
87
|
+
selectedOption?: string | number;
|
|
88
|
+
/** Select placeholder */
|
|
89
|
+
selectPlaceholder?: string;
|
|
90
|
+
/** Radius type with standard values */
|
|
91
|
+
radiusType?: 'none' | 'soft' | 'medium' | 'pill';
|
|
92
|
+
}
|
|
93
|
+
declare const _default: import("vue").DefineComponent<InputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
94
|
+
"update:modelValue": (value: string | number) => any;
|
|
95
|
+
focus: (event: FocusEvent) => any;
|
|
96
|
+
blur: (event: FocusEvent) => any;
|
|
97
|
+
keydown: (event: KeyboardEvent) => any;
|
|
98
|
+
"button-click": (event: MouseEvent) => any;
|
|
99
|
+
"update:selectedOption": (value: string | number) => any;
|
|
100
|
+
}, string, import("vue").PublicProps, Readonly<InputProps> & Readonly<{
|
|
101
|
+
"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
|
|
102
|
+
onFocus?: ((event: FocusEvent) => any) | undefined;
|
|
103
|
+
onBlur?: ((event: FocusEvent) => any) | undefined;
|
|
104
|
+
onKeydown?: ((event: KeyboardEvent) => any) | undefined;
|
|
105
|
+
"onButton-click"?: ((event: MouseEvent) => any) | undefined;
|
|
106
|
+
"onUpdate:selectedOption"?: ((value: string | number) => any) | undefined;
|
|
107
|
+
}>, {
|
|
108
|
+
size: InputSize;
|
|
109
|
+
type: string;
|
|
110
|
+
required: boolean;
|
|
111
|
+
iconPosition: IconPosition;
|
|
112
|
+
disabled: boolean;
|
|
113
|
+
radiusType: "none" | "soft" | "medium" | "pill";
|
|
114
|
+
placeholder: string;
|
|
115
|
+
affixPosition: AffixPosition;
|
|
116
|
+
inlineAffixPosition: AffixPosition;
|
|
117
|
+
password: boolean;
|
|
118
|
+
readonly: boolean;
|
|
119
|
+
errors: string | string[];
|
|
120
|
+
buttonVariant: ButtonVariant;
|
|
121
|
+
buttonSize: ButtonSize;
|
|
122
|
+
buttonDisabled: boolean;
|
|
123
|
+
buttonLoading: boolean;
|
|
124
|
+
showPasswordRequirements: boolean;
|
|
125
|
+
withSelect: boolean;
|
|
126
|
+
selectOptions: SelectOption[];
|
|
127
|
+
selectPlaceholder: string;
|
|
128
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
129
|
+
export default _default;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
const iconCache = /* @__PURE__ */ new Map();
|
|
2
|
+
const DEFAULT_NAMESPACES = {
|
|
3
|
+
icons: "/assets/icons",
|
|
4
|
+
logos: "/assets/logos",
|
|
5
|
+
"wl-pbo": "/assets/wl-pbo"
|
|
6
|
+
};
|
|
7
|
+
export const useIcon = () => {
|
|
8
|
+
const getIconNamespaces = () => {
|
|
9
|
+
if (typeof window !== "undefined" && window.__NUXT__?.config?.public?.urkit?.iconNamespaces) {
|
|
10
|
+
return window.__NUXT__.config.public.urkit.iconNamespaces;
|
|
11
|
+
}
|
|
12
|
+
return DEFAULT_NAMESPACES;
|
|
13
|
+
};
|
|
14
|
+
const loadIcon = async (name) => {
|
|
15
|
+
if (iconCache.has(name)) {
|
|
16
|
+
return iconCache.get(name);
|
|
17
|
+
}
|
|
18
|
+
const [namespace, iconName] = name.split(":");
|
|
19
|
+
const namespaces = getIconNamespaces();
|
|
20
|
+
const namespacePath = namespaces[namespace];
|
|
21
|
+
if (!namespacePath) {
|
|
22
|
+
console.warn(`Icon namespace "${namespace}" not configured`);
|
|
23
|
+
return getFallbackIcon();
|
|
24
|
+
}
|
|
25
|
+
const fullPath = `${namespacePath}/${iconName}.svg`;
|
|
26
|
+
try {
|
|
27
|
+
const response = await fetch(fullPath);
|
|
28
|
+
if (!response.ok) {
|
|
29
|
+
console.warn(`Icon "${name}" not found at path: ${fullPath}`);
|
|
30
|
+
return getFallbackIcon();
|
|
31
|
+
}
|
|
32
|
+
const svgContent = await response.text();
|
|
33
|
+
const svgMatch = svgContent.match(/<svg[^>]*>(.*?)<\/svg>/s);
|
|
34
|
+
const innerContent = svgMatch ? svgMatch[1].trim() : svgContent;
|
|
35
|
+
const viewBoxMatch = svgContent.match(/viewBox="([^"]*)"/);
|
|
36
|
+
const originalViewBox = viewBoxMatch ? viewBoxMatch[1] : getDefaultViewBox(namespace);
|
|
37
|
+
iconCache.set(name, innerContent);
|
|
38
|
+
iconCache.set(`${name}:viewBox`, originalViewBox);
|
|
39
|
+
return innerContent;
|
|
40
|
+
} catch (error) {
|
|
41
|
+
console.warn(`Failed to load icon "${name}":`, error);
|
|
42
|
+
return getFallbackIcon();
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
const getFallbackIcon = () => {
|
|
46
|
+
return "";
|
|
47
|
+
};
|
|
48
|
+
const getDefaultViewBox = (namespace) => {
|
|
49
|
+
const viewBoxMap = {
|
|
50
|
+
icons: "0 0 24 24",
|
|
51
|
+
logos: "0 0 60 60",
|
|
52
|
+
"wl-pbo": "0 0 24 24"
|
|
53
|
+
};
|
|
54
|
+
return viewBoxMap[namespace] || "0 0 24 24";
|
|
55
|
+
};
|
|
56
|
+
const getViewBox = (namespace, iconName) => {
|
|
57
|
+
if (iconName) {
|
|
58
|
+
const fullName = `${namespace}:${iconName}`;
|
|
59
|
+
const cachedViewBox = iconCache.get(`${fullName}:viewBox`);
|
|
60
|
+
if (cachedViewBox) {
|
|
61
|
+
return cachedViewBox;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
return getDefaultViewBox(namespace);
|
|
65
|
+
};
|
|
66
|
+
return {
|
|
67
|
+
loadIcon,
|
|
68
|
+
getFallbackIcon,
|
|
69
|
+
getViewBox
|
|
70
|
+
};
|
|
71
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_361_331)">
|
|
3
|
+
<path d="M7.11157 9.55579L12 14.4442L16.8884 9.55579" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
|
|
4
|
+
</g>
|
|
5
|
+
<defs>
|
|
6
|
+
<clipPath id="clip0_361_331">
|
|
7
|
+
<rect width="24" height="24"/>
|
|
8
|
+
</clipPath>
|
|
9
|
+
</defs>
|
|
10
|
+
</svg>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M20 4L15 9M15 9L20 9M15 9L15 4" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M4 20L9 15M9 15H4M9 15V20" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M4 4L9 9M9 9L4 9M9 9L9 4" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path d="M20 20L15 15M15 15L20 15M15 15L15 20" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="size-5 shrink-0 text-ln-gray-400 transition ease-linear"><path stroke="currentColor" stroke-width="1.25" d="M6.085 8.324a4.3 4.3 0 0 1-.368-1.743 4.286 4.286 0 0 1 4.282-4.29 4.286 4.286 0 0 1 4.283 4.29c0 .62-.132 1.21-.369 1.743m-7.828 0a4.287 4.287 0 0 0-3.794 4.262 4.286 4.286 0 0 0 4.282 4.289 4.28 4.28 0 0 0 3.426-1.715M6.085 8.324a4.29 4.29 0 0 0 3.426 2.519m4.402-2.519A4.27 4.27 0 0 0 10 10.012m3.914-1.688a4.287 4.287 0 0 1 3.795 4.262 4.286 4.286 0 0 1-4.283 4.289c-1.4 0-2.644-.674-3.426-1.715m0 0a4.27 4.27 0 0 0 .857-2.574c0-.62-.132-1.21-.369-1.743m-.976 0q.199-.446.488-.831m-.488.83a4.3 4.3 0 0 0 .976 0m-.488-.83q.29.385.488.83"></path></svg>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_9752_129859)">
|
|
3
|
+
<path d="M5.33203 5.33203V3.46536C5.33203 2.71863 5.33203 2.34526 5.47736 2.06004C5.60519 1.80916 5.80916 1.60519 6.06004 1.47736C6.34526 1.33203 6.71863 1.33203 7.46537 1.33203H12.532C13.2788 1.33203 13.6521 1.33203 13.9374 1.47736C14.1882 1.60519 14.3922 1.80916 14.52 2.06004C14.6654 2.34526 14.6654 2.71863 14.6654 3.46536V8.53203C14.6654 9.27877 14.6654 9.65214 14.52 9.93735C14.3922 10.1882 14.1882 10.3922 13.9374 10.52C13.6521 10.6654 13.2788 10.6654 12.532 10.6654H10.6654M3.46536 14.6654H8.53203C9.27877 14.6654 9.65214 14.6654 9.93735 14.52C10.1882 14.3922 10.3922 14.1882 10.52 13.9374C10.6654 13.6521 10.6654 13.2788 10.6654 12.532V7.46537C10.6654 6.71863 10.6654 6.34526 10.52 6.06004C10.3922 5.80916 10.1882 5.60519 9.93735 5.47736C9.65214 5.33203 9.27877 5.33203 8.53203 5.33203H3.46536C2.71863 5.33203 2.34526 5.33203 2.06004 5.47736C1.80916 5.60519 1.60519 5.80916 1.47736 6.06004C1.33203 6.34526 1.33203 6.71863 1.33203 7.46537V12.532C1.33203 13.2788 1.33203 13.6521 1.47736 13.9374C1.60519 14.1882 1.80916 14.3922 2.06004 14.52C2.34526 14.6654 2.71863 14.6654 3.46536 14.6654Z" stroke="#6C737F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
</g>
|
|
5
|
+
<defs>
|
|
6
|
+
<clipPath id="clip0_9752_129859">
|
|
7
|
+
<rect width="16" height="16" fill="white"/>
|
|
8
|
+
</clipPath>
|
|
9
|
+
</defs>
|
|
10
|
+
</svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="size-5 shrink-0 text-ln-gray-400 transition ease-linear"><path stroke="currentColor" stroke-width="1.25" d="M9.99 2H7.32a2.67 2.67 0 0 0-2.67 2.667 2.67 2.67 0 0 0 2.67 2.666M9.99 2v5.333M9.99 2h2.67a2.67 2.67 0 0 1 2.67 2.667 2.67 2.67 0 0 1-2.67 2.666m-2.67 0H7.32m2.67 0v5.334m0-5.334h2.67m-5.34 0A2.67 2.67 0 0 0 4.65 10a2.67 2.67 0 0 0 2.67 2.667m2.67 0H7.32m2.67 0v2.666A2.67 2.67 0 0 1 7.32 18a2.67 2.67 0 0 1-2.67-2.667 2.67 2.67 0 0 1 2.67-2.666m5.34-5.334A2.67 2.67 0 0 0 9.99 10a2.67 2.67 0 0 0 2.67 2.667A2.67 2.67 0 0 0 15.33 10a2.67 2.67 0 0 0-2.67-2.667Z"></path></svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M20.84 4.61C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 2.99817C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.61L12 5.67L10.94 4.61C9.9083 3.5783 8.50903 2.9987 7.05 2.9987C5.59096 2.9987 4.19169 3.5783 3.16 4.61C2.1283 5.6417 1.54871 7.04097 1.54871 8.5C1.54871 9.95903 2.1283 11.3583 3.16 12.39L12 21.23L20.84 12.39C21.351 11.8792 21.7563 11.2728 22.0329 10.6053C22.3095 9.93789 22.4518 9.22248 22.4518 8.5C22.4518 7.77752 22.3095 7.06211 22.0329 6.39467C21.7563 5.72723 21.351 5.1208 20.84 4.61Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M12 18.9999C11.158 18.9999 10.315 18.8219 9.49597 18.5049" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M20.882 12.468C18.99 15.967 15.495 19 12 19" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M19.079 8.92102C19.77 9.73002 20.384 10.612 20.882 11.533C21.039 11.824 21.039 12.177 20.882 12.468" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path d="M5 19L19 5" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
<path d="M9.77302 14.227C8.54302 12.997 8.54302 11.002 9.77302 9.77199C11.003 8.54199 12.998 8.54199 14.228 9.77199" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
7
|
+
<path d="M17.044 6.956C15.497 5.759 13.748 5 12 5C8.50499 5 5.00999 8.033 3.11799 11.533C2.96099 11.824 2.96099 12.177 3.11799 12.468C4.06399 14.217 5.40999 15.849 6.95599 17.045" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M5 7V17" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M19 17V7" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 21H18C17.448 21 17 20.552 17 20V18C17 17.448 17.448 17 18 17H20C20.552 17 21 17.448 21 18V20C21 20.552 20.552 21 20 21Z" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 21H4C3.448 21 3 20.552 3 20V18C3 17.448 3.448 17 4 17H6C6.552 17 7 17.448 7 18V20C7 20.552 6.552 21 6 21Z" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 7H18C17.448 7 17 6.552 17 6V4C17 3.448 17.448 3 18 3H20C20.552 3 21 3.448 21 4V6C21 6.552 20.552 7 20 7Z" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
7
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7H4C3.448 7 3 6.552 3 6V4C3 3.448 3.448 3 4 3H6C6.552 3 7 3.448 7 4V6C7 6.552 6.552 7 6 7Z" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
8
|
+
<path d="M7 19H17" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
9
|
+
<path d="M17 5H7" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
10
|
+
</svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="size-5 shrink-0 text-ln-gray-400 transition ease-linear"><path stroke="currentColor" stroke-linejoin="round" stroke-width="1.25" d="M12.14 13.426a5.567 5.567 0 0 0 5.26-7.4l-2.262 2.261a2.422 2.422 0 1 1-3.425-3.426l2.26-2.26A5.567 5.567 0 0 0 7 10l-4.173 4.237c-.643.652-.639 1.7.009 2.348l.577.578a1.667 1.667 0 0 0 2.348.008L9.998 13a5.6 5.6 0 0 0 2.143.427Z"></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" class="size-5 shrink-0 text-ln-gray-400 transition ease-linear"><path stroke="currentColor" stroke-linejoin="round" stroke-width="1.25" d="M16.498 7.292h-5.04a.417.417 0 0 1-.417-.417V1.963a.417.417 0 0 0-.76-.236L3.158 12.055a.417.417 0 0 0 .343.653h5.04c.23 0 .417.187.417.417v4.912c0 .409.527.573.76.236L16.84 7.945a.417.417 0 0 0-.343-.653Z"></path></svg>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="currentColor" opacity="0.3"/>
|
|
3
|
+
<path d="M12 2C6.48 2 2 6.48 2 12h2c0-4.41 3.59-8 8-8V2z" fill="currentColor">
|
|
4
|
+
<animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/>
|
|
5
|
+
</path>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon flex size-5 shrink-0 select-none items-center justify-center transition duration-200 ease-out group-has-[:placeholder-shown]:text-text-soft-400 text-text-sub-600 group-has-[:placeholder-shown]:group-hover/input-wrapper:text-text-sub-600 group-has-[:placeholder-shown]:group-has-[input:focus]/input-wrapper:text-text-sub-600 group-has-[input:disabled]/input-wrapper:text-text-disabled-300"><path d="M11.9999 17C15.6623 17 18.8649 18.5751 20.607 20.9247L18.765 21.796C17.3473 20.1157 14.8473 19 11.9999 19C9.15248 19 6.65252 20.1157 5.23479 21.796L3.39355 20.9238C5.13576 18.5747 8.33796 17 11.9999 17ZM11.9999 2C14.7613 2 16.9999 4.23858 16.9999 7V10C16.9999 12.6888 14.8776 14.8818 12.2168 14.9954L11.9999 15C9.23847 15 6.9999 12.7614 6.9999 10V7C6.9999 4.31125 9.1222 2.11818 11.783 2.00462L11.9999 2ZM11.9999 4C10.4022 4 9.09623 5.24892 9.00499 6.82373L8.9999 7V10C8.9999 11.6569 10.343 13 11.9999 13C13.5976 13 14.9036 11.7511 14.9948 10.1763L14.9999 10V7C14.9999 5.34315 13.6567 4 11.9999 4Z"></path></svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M6.03191 8.96074C6.03191 7.39538 7.30089 6.1264 8.86626 6.1264H17.9907L18.0744 13.9119C18.0744 15.0172 16.8438 17.4134 14.719 17.8153C13.3394 18.0763 10.647 18.0295 10.647 18.0295H6.03191V8.96074Z" stroke="currentColor" stroke-width="0.9" stroke-linecap="square" stroke-dasharray="1.95 1.95"/>
|
|
3
|
+
<path d="M6.49696 1.99696H13.5028C15.9881 1.99696 18.0028 4.01168 18.0028 6.49696V13.5028C18.0028 15.9881 15.9881 18.0028 13.5028 18.0028H6.49696C4.01168 18.0028 1.99696 15.9881 1.99696 13.5028V6.49696C1.99696 4.01168 4.01168 1.99696 6.49696 1.99696Z" stroke="currentColor"/>
|
|
4
|
+
</svg>
|