antoxa/axp-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

big update

Browse Source
This commit is contained in:
AntoXa PRO 2023-07-27 15:36:52 +03:00
parent 6179e53af7
commit 154cfcfae1
17 changed files with 319 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/colors.ts Normal file
View File

@ -0,0 +1,14 @@
export enum ColorEnum {
primary = 'primary',
accent = 'accent',
info = 'info',
success = 'success',
warning = 'warning',
error = 'error',
dark = 'dark',
light = 'light'
}
export type TColor = keyof typeof ColorEnum
export const colors = Object.keys(ColorEnum)

17
src/components/Alert.vue
View File

@ -1,13 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import type { TColor } from '../colors'
// Props.
const props = defineProps<{ const props = defineProps<{
color?: 'primary' | 'accent' | 'info' | 'success' | 'warning' | 'error' color?: TColor
value?: string value?: string
close?: boolean
}>() }>()
const emit = defineEmits<{ (e: 'close'): void }>()
</script> </script>
<template> <template>
<div class="ui-alert" :class="props.color"> <div class="ui-alert" :class="props.color">
{{ props.value }} <div v-if="props.close" class="ui-alert-close">
<slot v-if="$slots.default" name="default" /> <ui-icon name="close" @click="emit('close')" />
</div>
<div v-if="props.value || $slots.default" class="ui-alert-content">
{{ props.value }}
<slot v-if="$slots.default" name="default" />
</div>
</div> </div>
</template> </template>

18
src/components/Btn.vue
View File

@ -1,19 +1,29 @@
<script setup lang="ts"> <script setup lang="ts">
import type { TColor } from '../colors'
import type { TUiIcon } from '../icons'
import UiIcon from './Icon.vue' import UiIcon from './Icon.vue'
// Props. // Props.
const props = defineProps<{ const props = defineProps<{
label?: string label?: string
type?: 'button' | 'submit' type?: 'button' | 'submit'
color?: string color?: TColor
icon?: any icon?: TUiIcon
to?: string
}>() }>()
</script> </script>
<template> <template>
<button class="ui-btn" :class="props.color" :type="props.type"> <component
class="ui-btn"
:is="props.to ? 'router-link' : 'button'"
:to="props.to"
:class="props.color"
:type="props.type"
>
<ui-icon v-if="props.icon" :name="props.icon" /> <ui-icon v-if="props.icon" :name="props.icon" />
<div v-if="props.label" class="label">{{ props.label }}</div> <div v-if="props.label" class="label">{{ props.label }}</div>
<slot v-if="$slots.default" name="default" /> <slot v-if="$slots.default" name="default" />
</button> </component>
</template> </template>

19
src/components/Card.vue Normal file
View File

@ -0,0 +1,19 @@
<script setup lang="ts">
const props = defineProps<{
title?: string
}>()
</script>
<template>
<div class="ui-card">
<div v-if="props.title" class="ui-card-head">
<h3 class="ui-card-title">{{ props.title }}</h3>
</div>
<div v-if="$slots.default" class="ui-card-body">
<slot name="default" />
</div>
<div v-if="$slots.actions" class="ui-card-actions">
<slot name="actions" />
</div>
</div>
</template>

17
src/components/Field.vue
View File

@ -6,8 +6,10 @@ const props = defineProps<{
error?: string error?: string
readonly?: boolean readonly?: boolean
disabled?: boolean disabled?: boolean
checked?: boolean placeholder?: string
tag?: 'input' | 'textarea' | 'select' tag?: 'input' | 'textarea' | 'select'
checked?: boolean
options?: { text: string, value: any }[]
}>() }>()
// Emits. // Emits.
@ -57,29 +59,34 @@ const inputHandler = (val: any) => {
v-if="!tag || tag === 'input'" v-if="!tag || tag === 'input'"
:type="props.type" :type="props.type"
:value="props.modelValue" :value="props.modelValue"
:reatonly="props.readonly" :readonly="props.readonly"
:disabled="props.disabled" :disabled="props.disabled"
:checked="checked" :checked="checked"
:placeholder="props.placeholder"
@input="inputHandler" @input="inputHandler"
class="input" class="input"
/> />
<textarea <textarea
v-if="tag === 'textarea'" v-if="tag === 'textarea'"
:value="props.modelValue" :value="props.modelValue"
:reatonly="props.readonly" :readonly="props.readonly"
:disabled="props.disabled" :disabled="props.disabled"
:placeholder="props.placeholder"
@input="inputHandler" @input="inputHandler"
class="input" class="input"
/> />
<select <select
v-if="tag === 'select'" v-if="tag === 'select'"
:value="props.modelValue" :value="props.modelValue"
:reatonly="props.readonly" :readonly="props.readonly"
:disabled="props.disabled" :disabled="props.disabled"
:placeholder="props.placeholder"
@input="inputHandler" @input="inputHandler"
class="input" class="input"
> >
<!-- <slot v-if="$slots.default" name="default" /> --> <option v-for="item in props.options" :value="item.value">
{{ item.text }}
</option>
</select> </select>
<div v-if="props.error" class="message">{{ props.error }}</div> <div v-if="props.error" class="message">{{ props.error }}</div>
</div> </div>

4
src/components/FieldCheckbox.vue
View File

@ -5,6 +5,8 @@ import { computed } from 'vue'
// Props. // Props.
const props = defineProps<{ const props = defineProps<{
modelValue?: boolean modelValue?: boolean
disabled?: boolean
readonly?: boolean
}>() }>()
// Emits. // Emits.
@ -22,6 +24,8 @@ const updateHandler = () => emit('update:modelValue', !props.modelValue)
type="checkbox" type="checkbox"
class="ui-field-checkbox" class="ui-field-checkbox"
:checked="value" :checked="value"
:disabled="props.disabled"
:readonly="props.readonly"
@input="updateHandler" @input="updateHandler"
/> />
</template> </template>

13
src/components/FieldSelect.vue
View File

@ -4,7 +4,7 @@ import UiField from './Field.vue'
const props = defineProps<{ const props = defineProps<{
modelValue?: string | number, modelValue?: string | number,
options: { value: string, text: string }[] options: { text: string, value: any }[]
}>() }>()
const emit = defineEmits<{ (e: 'update:modelValue', v?: any): void }>() const emit = defineEmits<{ (e: 'update:modelValue', v?: any): void }>()
@ -16,9 +16,10 @@ const displayValue = computed({
</script> </script>
<template> <template>
<ui-field tag="select" class="ui-field-select"> <ui-field
<option v-for="opt in props.options" :value="opt.value"> tag="select"
{{opt.text}} class="ui-field-select"
</option> :options="props.options"
</ui-field> v-model="displayValue"
/>
</template> </template>

7
src/components/FieldSelectGender.vue
View File

@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { GenderEnum } from 'axp-ts' import { GenderEnum, TGender } from 'axp-ts'
import UiFieldSelect from './FieldSelect.vue' import UiFieldSelect from './FieldSelect.vue'
const options: any[] = [ const options: { text: string, value: TGender }[] = [
{ {
text: 'Мужской', text: 'Мужской',
value: GenderEnum.man value: GenderEnum.man
@ -15,6 +15,5 @@ const options: any[] = [
</script> </script>
<template> <template>
<p>Select gender</p> <ui-field-select class="ui-field-select-gender" :options="options" />
<ui-field-select :options="options" class="ui-field-select-gender" />
</template> </template>

83
src/components/Icon.vue
View File

@ -1,87 +1,12 @@
<script lang="ts">
export const icons = {
account: `
<circle cx="12" cy="7" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
`,
doc: `
<path d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
`,
vk: `
<path d="M21.579 6.855c.14-.465 0-.806-.662-.806h-2.193c-.558 0-.813.295-.953.619 0 0-1.115 2.719-2.695 4.482-.51.513-.743.675-1.021.675-.139 0-.341-.162-.341-.627V6.855c0-.558-.161-.806-.626-.806H9.642c-.348 0-.558.258-.558.504 0 .528.79.65.871 2.138v3.228c0 .707-.127.836-.407.836-.743 0-2.551-2.729-3.624-5.853-.209-.607-.42-.852-.98-.852H2.752c-.627 0-.752.295-.752.619 0 .582.743 3.462 3.461 7.271 1.812 2.601 4.363 4.011 6.687 4.011 1.393 0 1.565-.313 1.565-.853v-1.966c0-.626.133-.752.574-.752.324 0 .882.164 2.183 1.417 1.486 1.486 1.732 2.153 2.567 2.153h2.192c.626 0 .939-.313.759-.931-.197-.615-.907-1.51-1.849-2.569-.512-.604-1.277-1.254-1.51-1.579-.325-.419-.231-.604 0-.976.001.001 2.672-3.761 2.95-5.04z"/>
`,
youtube: `
<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" />
<polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" />
`,
video: `
<polygon points="23 7 16 12 23 17 23 7" />
<rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
`,
yandex: `
<path d="m10 24v-7.786l-5.2-13.964h2.616l3.834 10.767 4.41-13.018h2.405l-5.658 16.303v7.697z"/>
`,
menu: `
<path stroke="none" d="M0 0h24v24H0z"/>
<line x1="4" y1="6" x2="20" y2="6" />
<line x1="4" y1="12" x2="20" y2="12" />
<line x1="4" y1="18" x2="20" y2="18" />
`,
close: `
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
`,
'arrow-down': `
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="6 9 12 15 18 9" />
`,
car: `
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="7" cy="17" r="2" />
<circle cx="17" cy="17" r="2" />
<path d="M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" />
`,
review: `
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
`,
phone: `
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
`,
circle: `
<circle cx="12" cy="12" r="10"></circle>
<path d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
`,
dzen: `
<path d="M 11.659994,0.01953125 C 5.2952996,0.20519926 0.20563242,5.2947457 0.01953125,11.659552 4.8820049,11.598767 7.6163326,11.265345 9.4411321,9.4406121 11.265931,7.6159232 11.59921,4.8819566 11.659994,0.01953125 Z m 0.719931,0 c 0.06078,4.86242535 0.393207,7.59634815 2.218006,9.42108085 1.824686,1.8245759 4.559692,2.1581249 9.4216,2.2189399 C 23.83343,5.2948697 18.744448,0.20538037 12.379925,0.01953125 Z M 0.01953125,12.37951 C 0.20581298,18.744149 5.2954188,23.833867 11.659994,24.019531 11.59921,19.156885 11.265931,16.422327 9.4411321,14.597594 7.6163326,12.772905 4.8820049,12.440295 0.01953125,12.37951 Z m 23.99999975,0 c -4.861908,0.06081 -7.596914,0.393508 -9.4216,2.218084 -1.8248,1.824733 -2.157222,4.559291 -2.218006,9.421937 6.364403,-0.185846 11.453324,-5.275505 11.639606,-11.640021 z" />
`,
instagram: `
<path d="m 18.374816,4.4184098 c -0.80327,0 -1.405723,0.6025075 -1.405723,1.4058562 0,0.8033487 0.602453,1.4058562 1.405723,1.4058562 0.803271,0 1.405724,-0.6025075 1.405724,-1.4058562 0,-0.8033487 -0.602453,-1.4058562 -1.405724,-1.4058562 z" />
<path d="m 12.049062,6.2259403 c -3.3134909,0 -5.9241249,2.7112998 -5.9241249,5.9246867 0,3.213387 2.7110426,5.924686 5.9241249,5.924686 3.213082,0 5.924119,-2.711299 5.924119,-5.924686 0,-3.2133869 -2.610629,-5.9246867 -5.924119,-5.9246867 z m 0,9.7405887 c -2.1085854,0 -3.815535,-1.707118 -3.815535,-3.815902 0,-2.108784 1.7069496,-3.8159024 3.815535,-3.8159024 2.108585,0 3.815534,1.7071184 3.815534,3.8159024 0,2.108784 -1.706949,3.815902 -3.815534,3.815902 z" />
<path d="M 16.868685,0 H 7.3298474 C 3.2130851,0 0,3.2133868 0,7.2301222 V 16.769878 C 0,20.786613 3.2130851,24 7.2294388,24 h 9.5388362 c 4.016353,0 7.229434,-3.213387 7.229434,-7.230122 V 7.2301222 C 24.098119,3.2133868 20.885037,0 16.868685,0 Z m 4.92003,16.87029 c 0,2.7113 -2.208993,5.020926 -5.02044,5.020926 H 7.2294388 c -2.711045,0 -5.0204482,-2.209205 -5.0204482,-5.020926 V 7.3305428 c 0,-2.7112998 2.2089985,-5.0209173 5.0204482,-5.0209173 h 9.5388362 c 2.711038,0 5.02044,2.2092048 5.02044,5.0209173 z" />
`,
moon: `
<path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
`,
sun: `
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
`
}
</script>
<script setup lang="ts"> <script setup lang="ts">
import type { TUiIcon } from '../icons'
import { computed } from 'vue' import { computed } from 'vue'
import { icons } from '../icons'
// Props. // Props.
const props = defineProps<{ const props = defineProps<{
name: keyof typeof icons name: TUiIcon
fill?: boolean fill?: boolean
}>() }>()

28
src/components/IconVisibility.vue Normal file
View File

@ -0,0 +1,28 @@
<script setup lang="ts">
import UiIcon from './Icon.vue'
// Props.
const props = defineProps<{
modelValue?: boolean,
color?: boolean,
cursor?: boolean
}>()
// Emits.
const emit = defineEmits<{ (e: 'update:modelValue', v: boolean): void }>()
</script>
<template>
<ui-icon
v-if="props.modelValue"
name="visibility"
:class="{ 'text-success': props.color, 'cursor-pointer': props.cursor }"
@click="emit('update:modelValue', false)"
/>
<ui-icon
v-else
name="visibility_off"
:class="{ 'cursor-pointer': props.cursor }"
@click="emit('update:modelValue', true)"
/>
</template>

50
src/components/PickerDays.vue Normal file
View File

@ -0,0 +1,50 @@
<script setup lang="ts">
import UiFieldCheckbox from './FieldCheckbox.vue'
// Props.
const props = defineProps<{
modelValue?: number[]
label?: string
error?: string
readonly?: boolean
disabled?: boolean
}>()
// Emits.
const emit = defineEmits<{ (e: 'update:modelValue', v: number[]): void }>()
// Init data.
const days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
// Handlers.
const inputHandler = (index: number) => {
const number = index + 1
let result: number[] = props.modelValue || []
if (result.includes(number)) {
result = result.filter(e => e !== number)
} else {
result.push(number)
}
emit('update:modelValue', result.sort())
}
</script>
<template>
<div class="ui-picker-days">
<div v-if="props.label" class="label mb-2">
<span>{{props.label}}:</span>
</div>
<div class="flex items-center">
<ui-field-checkbox
v-for="(item, index) in days"
class="mr-4"
:modelValue="props.modelValue?.includes(index + 1)"
:label="item"
:disabled="props.disabled"
:readonly="props.readonly"
@input="inputHandler(index)"
/>
</div>
<div v-if="error" class="mt-2 text-error">{{ error }}</div>
</div>
</template>

5
src/components/Table.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<table class="ui-table">
<slot />
</table>
</template>

4
src/components/index.ts
View File

@ -10,5 +10,9 @@ export { default as UiFieldDate } from './FieldDate.vue'
export { default as UiFieldCheckbox } from './FieldCheckbox.vue' export { default as UiFieldCheckbox } from './FieldCheckbox.vue'
export { default as UiFieldSelect } from './FieldSelect.vue' export { default as UiFieldSelect } from './FieldSelect.vue'
export { default as UiFieldSelectGender } from './FieldSelectGender.vue' export { default as UiFieldSelectGender } from './FieldSelectGender.vue'
export { default as UiPickerDays } from './PickerDays.vue'
export { default as UiIcon } from './Icon.vue' export { default as UiIcon } from './Icon.vue'
export { default as UiIconVisibility } from './IconVisibility.vue'
export { default as UiForm } from './Form.vue' export { default as UiForm } from './Form.vue'
export { default as UiCard } from './Card.vue'
export { default as UiTable } from './Table.vue'

52
src/css/common.sass
View File

@ -28,38 +28,58 @@ p
&-btn &-btn
@apply px-4 border @apply px-4 border
@apply flex justify-center items-center @apply flex justify-center items-center
> *:not(:last-child) // > *:not(:last-child)
@apply mr-1 // @apply mr-1
> .ui-icon:first-child // > .ui-icon:first-child
@apply ml-[-5px] // @apply ml-[-5px]
&-field &-field
.label .label
@apply mb-1 @apply mb-1
.input .input
@apply block w-full border px-2 py-2 @apply block w-full border px-2 py-2
outline: none
.message .message
@apply mt-1 text-sm @apply mt-1 text-sm
&-checkbox &-checkbox
@apply flex items-center justify-start @apply flex items-center justify-start
.label
@apply mb-0
.input .input
@apply w-max order-first mr-4 @apply w-max order-first mr-2
@apply w-[24px] h-[24px] border rounded @apply w-[24px] h-[24px] min-w-[24px] min-h-[24px]
@apply border rounded
&-textarea &-textarea
.input .input
@apply min-h-[80px] @apply min-h-[80px]
&-alert &-alert
@apply border p-2 @apply relative border
&:not(:last-child) &:not(:last-child)
@apply mb-2 @apply mb-2
&-close
@apply absolute top-0 right-0 p-2
.ui-icon
@apply cursor-pointer
&-content
@apply p-3
&-icon &-icon
@apply block w-[24px] @apply block w-[24px]
&-card
@apply flex flex-col
@apply border bg-white
&-head
@apply pt-3 px-3
&-body
@apply p-3
@apply flex-1
&-actions
@apply pb-3 px-3
@apply flex gap-2
&-form &-form
&-header &-header
@apply pb-4 @apply pb-4
@ -74,3 +94,19 @@ p
@apply flex items-center pt-4 @apply flex items-center pt-4
> *:not(:last-child) > *:not(:last-child)
@apply mr-2 @apply mr-2
&-table
@apply w-full
thead
tr
th
@apply py-2 px-3
@apply text-sm text-left
tbody
tr
&:hover
@apply bg-light
&:not(:first-child)
@apply border-t
td
@apply p-2

19
src/css/theme.sass
View File

@ -1,9 +1,4 @@
.ui .ui
&-btn
@apply outline-none
&:hover:not(:active)
@apply bg-opacity-80
&-btn, &-btn,
&-alert &-alert
@apply bg-white @apply bg-white
@ -27,19 +22,23 @@
@apply text-white bg-light border-light @apply text-white bg-light border-light
&-field &-field
.input
@apply bg-white text-dark
&.error &.error
.label, .label,
.input, .input,
.message .message
@apply text-error border-error @apply text-error border-error
&.disabled &:disabled
.input .input
@apply bg-light/10 text-dark/60 @apply bg-light/10 text-dark/60
&-field .input &-btn
@apply bg-white dark:bg-white/10 @apply outline-none
&:hover:not(:active)
@apply bg-opacity-80
&-btn, &-btn,
&-alert, &-alert,
&-field .input &-field .input,
&-card
@apply rounded @apply rounded

86
src/icons.ts Normal file
View File

@ -0,0 +1,86 @@
export const icons = {
account: `
<circle cx="12" cy="7" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
`,
doc: `
<path d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
`,
vk: `
<path d="M21.579 6.855c.14-.465 0-.806-.662-.806h-2.193c-.558 0-.813.295-.953.619 0 0-1.115 2.719-2.695 4.482-.51.513-.743.675-1.021.675-.139 0-.341-.162-.341-.627V6.855c0-.558-.161-.806-.626-.806H9.642c-.348 0-.558.258-.558.504 0 .528.79.65.871 2.138v3.228c0 .707-.127.836-.407.836-.743 0-2.551-2.729-3.624-5.853-.209-.607-.42-.852-.98-.852H2.752c-.627 0-.752.295-.752.619 0 .582.743 3.462 3.461 7.271 1.812 2.601 4.363 4.011 6.687 4.011 1.393 0 1.565-.313 1.565-.853v-1.966c0-.626.133-.752.574-.752.324 0 .882.164 2.183 1.417 1.486 1.486 1.732 2.153 2.567 2.153h2.192c.626 0 .939-.313.759-.931-.197-.615-.907-1.51-1.849-2.569-.512-.604-1.277-1.254-1.51-1.579-.325-.419-.231-.604 0-.976.001.001 2.672-3.761 2.95-5.04z"/>
`,
youtube: `
<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" />
<polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" />
`,
video: `
<polygon points="23 7 16 12 23 17 23 7" />
<rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
`,
yandex: `
<path d="m10 24v-7.786l-5.2-13.964h2.616l3.834 10.767 4.41-13.018h2.405l-5.658 16.303v7.697z"/>
`,
menu: `
<path stroke="none" d="M0 0h24v24H0z"/>
<line x1="4" y1="6" x2="20" y2="6" />
<line x1="4" y1="12" x2="20" y2="12" />
<line x1="4" y1="18" x2="20" y2="18" />
`,
close: `
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
`,
'arrow-down': `
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="6 9 12 15 18 9" />
`,
car: `
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="7" cy="17" r="2" />
<circle cx="17" cy="17" r="2" />
<path d="M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" />
`,
review: `
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
`,
phone: `
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
`,
circle: `
<circle cx="12" cy="12" r="10"></circle>
`,
dzen: `
<path d="M 11.659994,0.01953125 C 5.2952996,0.20519926 0.20563242,5.2947457 0.01953125,11.659552 4.8820049,11.598767 7.6163326,11.265345 9.4411321,9.4406121 11.265931,7.6159232 11.59921,4.8819566 11.659994,0.01953125 Z m 0.719931,0 c 0.06078,4.86242535 0.393207,7.59634815 2.218006,9.42108085 1.824686,1.8245759 4.559692,2.1581249 9.4216,2.2189399 C 23.83343,5.2948697 18.744448,0.20538037 12.379925,0.01953125 Z M 0.01953125,12.37951 C 0.20581298,18.744149 5.2954188,23.833867 11.659994,24.019531 11.59921,19.156885 11.265931,16.422327 9.4411321,14.597594 7.6163326,12.772905 4.8820049,12.440295 0.01953125,12.37951 Z m 23.99999975,0 c -4.861908,0.06081 -7.596914,0.393508 -9.4216,2.218084 -1.8248,1.824733 -2.157222,4.559291 -2.218006,9.421937 6.364403,-0.185846 11.453324,-5.275505 11.639606,-11.640021 z" />
`,
instagram: `
<path d="m 18.374816,4.4184098 c -0.80327,0 -1.405723,0.6025075 -1.405723,1.4058562 0,0.8033487 0.602453,1.4058562 1.405723,1.4058562 0.803271,0 1.405724,-0.6025075 1.405724,-1.4058562 0,-0.8033487 -0.602453,-1.4058562 -1.405724,-1.4058562 z" />
<path d="m 12.049062,6.2259403 c -3.3134909,0 -5.9241249,2.7112998 -5.9241249,5.9246867 0,3.213387 2.7110426,5.924686 5.9241249,5.924686 3.213082,0 5.924119,-2.711299 5.924119,-5.924686 0,-3.2133869 -2.610629,-5.9246867 -5.924119,-5.9246867 z m 0,9.7405887 c -2.1085854,0 -3.815535,-1.707118 -3.815535,-3.815902 0,-2.108784 1.7069496,-3.8159024 3.815535,-3.8159024 2.108585,0 3.815534,1.7071184 3.815534,3.8159024 0,2.108784 -1.706949,3.815902 -3.815534,3.815902 z" />
<path d="M 16.868685,0 H 7.3298474 C 3.2130851,0 0,3.2133868 0,7.2301222 V 16.769878 C 0,20.786613 3.2130851,24 7.2294388,24 h 9.5388362 c 4.016353,0 7.229434,-3.213387 7.229434,-7.230122 V 7.2301222 C 24.098119,3.2133868 20.885037,0 16.868685,0 Z m 4.92003,16.87029 c 0,2.7113 -2.208993,5.020926 -5.02044,5.020926 H 7.2294388 c -2.711045,0 -5.0204482,-2.209205 -5.0204482,-5.020926 V 7.3305428 c 0,-2.7112998 2.2089985,-5.0209173 5.0204482,-5.0209173 h 9.5388362 c 2.711038,0 5.02044,2.2092048 5.02044,5.0209173 z" />
`,
moon: `
<path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
`,
sun: `
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
`,
edit: `
<path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
`,
visibility: `
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
<circle cx="12" cy="12" r="3" />
`,
visibility_off: `
<path d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
`
}
export type TUiIcon = keyof typeof icons

2
src/index.ts
View File

@ -1 +1,3 @@
export * from './components' export * from './components'
export * from './icons'
export * from './colors'