big update
This commit is contained in:
parent
6179e53af7
commit
154cfcfae1
14
src/colors.ts
Normal file
14
src/colors.ts
Normal 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)
|
||||||
@ -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>
|
||||||
|
|||||||
@ -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
19
src/components/Card.vue
Normal 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>
|
||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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
28
src/components/IconVisibility.vue
Normal 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
50
src/components/PickerDays.vue
Normal 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
5
src/components/Table.vue
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<table class="ui-table">
|
||||||
|
<slot />
|
||||||
|
</table>
|
||||||
|
</template>
|
||||||
@ -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'
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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
86
src/icons.ts
Normal 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
|
||||||
@ -1 +1,3 @@
|
|||||||
export * from './components'
|
export * from './components'
|
||||||
|
export * from './icons'
|
||||||
|
export * from './colors'
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user