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

new

Browse Source
This commit is contained in:
AntoXa PRO 2023-10-18 12:03:56 +03:00
parent 2ae39a1bfb
commit 4fcaaf2803
16 changed files with 157 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -1,7 +1,7 @@
{
"name": "axp-ui",
"descriiption": "My helper ui lib",
"version": "1.9.0",
"version": "1.10.0",
"homepage": "https://antoxahub.ru/antoxa/axp-ui",
"repository": {
"type": "git",
@ -46,6 +46,7 @@
"@storybook/vue3": "^7.4.6",
"@storybook/vue3-vite": "^7.4.6",
"@vitejs/plugin-vue": "^4.4.0",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.31",
"prettier": "^2.8.8",
"react": "^18.2.0",

4
src/components/FieldCheckbox.vue
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { TUiFiledWrapperProps } from './FieldWrapper.vue'
import type { TUiFieldWrapperProps } from './FieldWrapper.vue'
export type TUiFieldCheckboxProps = TUiFiledWrapperProps & {
export type TUiFieldCheckboxProps = TUiFieldWrapperProps & {
modelValue?: boolean
}

4
src/components/FieldFile.vue
View File

@ -1,9 +1,9 @@
<script lang="ts">
import type { TUiFiledWrapperProps } from './FieldWrapper.vue'
import type { TUiFieldWrapperProps } from './FieldWrapper.vue'
type TModelValue = FileList
export type TUiFieldFileProps = TUiFiledWrapperProps & {
export type TUiFieldFileProps = TUiFieldWrapperProps & {
modelValue?: TModelValue
multiple?: boolean
accept?: string

4
src/components/FieldInput.vue
View File

@ -1,8 +1,8 @@
<script lang="ts">
import type { TUiFiledWrapperProps } from './FieldWrapper.vue'
import type { TUiFieldWrapperProps } from './FieldWrapper.vue'
export type TUiFieldInputProps<T extends string | number | Date> =
TUiFiledWrapperProps & {
TUiFieldWrapperProps & {
type?: 'text' | 'number' | 'password' | 'date' | 'checkbox'
modelValue?: T
placeholder?: string

37
src/components/FieldRange.vue Normal file
View File

@ -0,0 +1,37 @@
<script lang="ts">
import type { TUiFieldWrapperProps } from './FieldWrapper.vue'
export type TUiFieldRangeProps = TUiFieldWrapperProps & {
modelValue?: number,
min?: number
max?: number
step?: number
}
</script>
<script setup lang="ts">
import UiFieldWrapper from './FieldWrapper.vue'
// Props.
const props = defineProps<TUiFieldRangeProps>()
</script>
<template>
<UiFieldWrapper
:label="props.label"
:error="props.error"
:disabled="props.disabled"
:readonly="props.readonly"
:description="props.description"
class="ui-field-range"
>
<input
type="range"
:value="props.modelValue"
:min="props.min"
:max="props.max"
:step="props.step"
:disabled="props.disabled"
/>
</UiFieldWrapper>
</template>

4
src/components/FieldSelect.vue
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { TUiFiledWrapperProps } from './FieldWrapper.vue'
import type { TUiFieldWrapperProps } from './FieldWrapper.vue'
export type TUiFieldSelectProps = TUiFiledWrapperProps & {
export type TUiFieldSelectProps = TUiFieldWrapperProps & {
modelValue?: string | string[] | number | number[]
options?: { text: string; value: string | number }[]
multiple?: boolean

4
src/components/FieldTextArea.vue
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { TUiFiledWrapperProps } from './FieldWrapper.vue'
import type { TUiFieldWrapperProps } from './FieldWrapper.vue'
export type TUiFieldTextAreaProps = TUiFiledWrapperProps & {
export type TUiFieldTextAreaProps = TUiFieldWrapperProps & {
modelValue?: string
}

4
src/components/FieldWrapper.vue
View File

@ -1,5 +1,5 @@
<script lang="ts">
export type TUiFiledWrapperProps = {
export type TUiFieldWrapperProps = {
label?: string
error?: string
disabled?: boolean
@ -10,7 +10,7 @@ export type TUiFiledWrapperProps = {
<script setup lang="ts">
// Props.
const props = defineProps<TUiFiledWrapperProps>()
const props = defineProps<TUiFieldWrapperProps>()
</script>
<template>

3
src/components/index.ts
View File

@ -40,6 +40,9 @@ export * from './FieldPassword.vue'
export { default as UiFieldPhone } from './FieldPhone.vue'
export * from './FieldPhone.vue'
export { default as UiFieldRange } from './FieldRange.vue'
export * from './FieldRange.vue'
export { default as UiFieldDate } from './FieldDate.vue'
export * from './FieldDate.vue'

14
src/icons.ts
View File

@ -80,6 +80,20 @@ export const icons = {
`,
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" />
`,
star: `
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
`,
rub: `
<path d="M11 8V17" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 15H15" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11 8H13.5C16.5 8 16.5 12 13.5 12H9" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 12C3 4.5885 4.5885 3 12 3C19.4115 3 21 4.5885 21 12C21 19.4115 19.4115 21 12 21C4.5885 21 3 19.4115 3 12Z"/>
`,
payment: `
<rect x="3" y="6" width="18" height="13" rx="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 10H20.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 15H9" stroke-linecap="round" stroke-linejoin="round"/>
`
}

49
src/stories/Icons.stories.ts Normal file
View File

@ -0,0 +1,49 @@
import type { Meta, StoryObj } from '@storybook/vue3'
import { UiIcon, icons } from '..'
const iconList = Object.keys(icons)
// Meta.
const meta = {
title: 'Example/Icons',
component: UiIcon,
tags: ['autodocs'],
argTypes: {
name: { options: iconList }
}
} satisfies Meta<typeof UiIcon>
export default meta
type Story = StoryObj<typeof meta>
export const Default: Story = {
args: { name: 'star' }
}
export const All: Story = {
render: _ => ({
components: { UiIcon },
setup() {
return { iconList }
},
template: `
<div class="grid gap-4 grid-cols-4 sm:grid-cols-8 mb-8">
<div v-for="item in iconList" class="">
<div class="flex justify-center">
<UiIcon :name="item" />
</div>
<div class="text-center">{{ item }}</div>
</div>
</div>
<div class="grid gap-4 grid-cols-4 sm:grid-cols-8">
<div v-for="item in iconList" class="">
<div class="flex justify-center">
<UiIcon :name="item" fill />
</div>
<div class="text-center">{{ item }}</div>
</div>
</div>
`
})
}

22
src/stories/Range.stories.ts Normal file
View File

@ -0,0 +1,22 @@
import type { Meta, StoryObj } from '@storybook/vue3'
import { UiFieldRange } from '..'
// Meta.
const meta = {
title: 'Example/Range',
component: UiFieldRange,
tags: ['autodocs'],
argTypes: {
label: { }
}
} satisfies Meta<typeof UiFieldRange>
export default meta
type Story = StoryObj<typeof meta>
export const Default: Story = {
args: {
label: 'Range control (Not implemented!)'
}
}

8
src/style/common.sass
View File

@ -67,6 +67,14 @@
@apply min-h-[94px]
@apply leading-5
&-range
.input
@apply border-0
@apply flex flex-row items-center
input[type="range"]
@apply w-full cursor-pointer rounded
@apply h-2 outline-none appearance-none
&-alert
@apply relative border
&:not(:last-child)

9
src/style/theme.sass
View File

@ -33,8 +33,9 @@
@apply text-white bg-light border-light
&-field
.input > *
@apply bg-white dark:bg-white/10 text-dark dark:text-white
.input
& > *
@apply bg-white dark:bg-white/10 text-dark dark:text-white
.description
@apply text-dark/50
&.error
@ -48,6 +49,10 @@
> *
@apply bg-light
@apply text-dark/30
&-range
.input
input[type="range"]
@apply bg-dark/10 accent-primary
&-btn
@apply outline-none
&:hover:not(:active)

2
tailwind.config.ts
View File

@ -1,7 +1,7 @@
import type { Config } from 'tailwindcss'
const config: Config = {
content: ['./src/app/App.vue', './src/components/**/*.vue'],
content: ['./src/app/App.vue', './src/components/**/*.vue', './src/stories/*.ts'],
darkMode: 'class',
theme: {
extend: {

4
vite.config.ts
View File

@ -3,13 +3,13 @@ import vue from '@vitejs/plugin-vue'
import dts from 'vite-plugin-dts'
import postcss from 'postcss'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
export default defineConfig({
plugins: [vue(), dts()],
css: {
postcss: postcss([tailwindcss()])
postcss: postcss([tailwindcss(), autoprefixer()])
},
build: {
lib: {