new

package.json

@@ -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",

src/components/FieldCheckbox.vue

@@ -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
 }
 

src/components/FieldFile.vue

@@ -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

src/components/FieldInput.vue

@@ -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

src/components/FieldRange.vue

@@ -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>

src/components/FieldSelect.vue

@@ -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

src/components/FieldTextArea.vue

@@ -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
 }
 

src/components/FieldWrapper.vue

@@ -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>

src/components/index.ts

@@ -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'
 

src/icons.ts

@@ -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"/>
 	`
 }
 

src/stories/Icons.stories.ts

@@ -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>
+		`
+	})
+}

src/stories/Range.stories.ts

@@ -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!)'
+	}
+}

src/style/common.sass

@@ -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)

src/style/theme.sass

@@ -33,8 +33,9 @@
       @apply text-white bg-light border-light
 
   &-field
-    .input > *
+    .input 
-      @apply bg-white dark:bg-white/10 text-dark dark:text-white
+      & > *
+        @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)

tailwind.config.ts

@@ -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: {

vite.config.ts

@@ -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: {