inputotp: кастомная стилизация, сторисы, токены

src/plugins/prime/stories/Form/InputOtp/InputOtp.mdx

@@ -1,16 +1,30 @@
-import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Canvas, Title, Description, Controls } from '@storybook/addon-docs/blocks';
 import * as InputOtpStories from './InputOtp.stories';
 
-import { Template } from './InputOtp.template';
-
 <Meta of={InputOtpStories} />
 
-# InputOtp
+<Title />
 
-[PrimeVue InputOtp](https://primevue.org/inputotp), [Макет](https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-\(DS\)?node-id=484-6034\&node-type=section\&t=2PSg63p2UfJ4cUzB-0)
+<Description />
 
-```html dark
-<PrimeInputOtp v-model="value" />
+```javascript
+import { InputOtp } from 'primevue';
 ```
 
-<Story of={InputOtpStories.Primary} />
+## Варианты использования
+
+### Basic
+
+<Canvas of={InputOtpStories.Basic} />
+
+## Список параметров
+#### Полный список аргументов и событий компонента.
+<Controls of={InputOtpStories.Basic} />
+
+### Только цифры
+
+<Canvas of={InputOtpStories.IntegerOnly} />
+
+### Маскирование
+
+<Canvas of={InputOtpStories.Mask} />

src/plugins/prime/stories/Form/InputOtp/InputOtp.stories.js

@@ -1,9 +1,115 @@
-import { Template } from './InputOtp.template';
+import {
+  BasicTemplate,
+  IntegerTemplate,
+  MaskTemplate,
+} from './InputOtp.template';
 
 export default {
   title: 'Prime/Form/InputOtp',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Компонент для ввода одноразовых паролей (OTP). Поддерживает настройку длины, маскирование символов и ввод только цифр.',
+      },
+    },
+    designTokens: {
+      prefix: '--p-inputotp',
+    },
+  },
+  args: {
+    length: 4,
+    invalid: false,
+    disabled: false,
+    readonly: false,
+  },
+  argTypes: {
+    length: {
+      control: { type: 'number', min: 1, max: 12 },
+      description: 'Количество символов (полей ввода)',
+    },
+    integerOnly: {
+      control: 'boolean',
+      description: 'Разрешить ввод только цифр',
+    },
+    mask: {
+      control: 'boolean',
+      description: 'Скрывать вводимые символы',
+    },
+    invalid: {
+      control: 'boolean',
+      description: 'Состояние ошибки',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Отключенное состояние',
+    },
+    readonly: {
+      control: 'boolean',
+      description: 'Только для чтения',
+    },
+  },
 };
 
-export const Primary = {
-  render: Template.bind({}),
+export const Basic = {
+  render: BasicTemplate.bind({}),
+  parameters: {
+    docs: {
+      source: {
+        code: `<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+</script>
+
+<template>
+  <InputOtp v-model="value" />
+</template>`,
+      },
+    },
+  },
+};
+
+export const IntegerOnly = {
+  render: IntegerTemplate.bind({}),
+  args: {
+    integerOnly: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+</script>
+
+<template>
+  <InputOtp v-model="value" integerOnly />
+</template>`,
+      },
+    },
+  },
+};
+
+export const Mask = {
+  render: MaskTemplate.bind({}),
+  args: {
+    mask: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+</script>
+
+<template>
+  <InputOtp v-model="value" mask="*" />
+</template>`,
+      },
+    },
+  },
 };

src/plugins/prime/stories/Form/InputOtp/InputOtp.template.js

@@ -1,28 +1,29 @@
+import { InputOtp } from 'primevue';
 import { ref } from 'vue';
-import InputOtp from 'primevue/inputotp';
 
-export const Template = (args) => ({
+export const BasicTemplate = (args) => ({
   components: { InputOtp },
   setup() {
-    const value = ref('1234');
+    const value = ref(null);
     return { args, value };
   },
-  template: `
-<div :style="{ display: 'grid', gridTemplateColumns: 'repeat(4, max-content)', gap: '15px', alignItems: 'center', justifyItems: 'center' }">
-  <span></span>
-  <span></span>
-  <span><code>invalid</code></span>
-  <span><code>disabled</code></span>
+  template: `<InputOtp v-model="value" v-bind="args" />`,
+});
 
-  <span :style="{ justifySelf: 'flex-start' }"></span>
-  <InputOtp v-bind="args" />
-  <InputOtp invalid v-bind="args" />
-  <InputOtp disabled v-bind="args" />
+export const IntegerTemplate = (args) => ({
+  components: { InputOtp },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `<InputOtp v-model="value" integerOnly v-bind="args" />`,
+});
 
-  <span :style="{ justifySelf: 'flex-start' }"><code>v-model="1234"</code></span>
-  <InputOtp v-model="value" v-bind="args" />
-  <InputOtp v-model="value" invalid v-bind="args" />
-  <InputOtp v-model="value" disabled v-bind="args" />
-</div>
-`,
+export const MaskTemplate = (args) => ({
+  components: { InputOtp },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `<InputOtp v-model="value" mask="*" v-bind="args" />`,
 });

src/plugins/prime/theme3.0/components/css/inputotp.ts

@@ -0,0 +1,10 @@
+const css = ({ dt }: { dt: (token: string) => string }) => `
+/* Стили границы */
+.p-inputotp.p-component .p-inputtext {
+  border-width: ${dt('inputotp.extend.borderWidth')};
+  padding-block: 7.75px;
+  padding-inline: 0;
+}
+`;
+
+export default css;

src/plugins/prime/theme3.0/components/index.ts

@@ -1794,13 +1794,13 @@ export default {
       gap: '{form.gap.200}',
     },
     input: {
-      width: '{form.width.400}',
+      width: '{form.width.300}',
     },
     sm: {
-      width: '0rem',
+      width: '0',
     },
     lg: {
-      width: '0rem',
+      width: '0',
     },
   },
   inputtext: {

src/plugins/prime/theme3.0/css.ts

@@ -24,6 +24,7 @@ import tagCss from './components/css/tag';
 import toggleswitchCss from './components/css/toggleswitch';
 import tooltipCss from './components/css/tooltip';
 import progressspinnerCss from './components/css/progressspinner';
+import inputotpCss from './components/css/inputotp';
 
 const css = ({ dt }: { dt: (token: string) => string }) => `
    ${accordionCss({ dt })}
@@ -53,6 +54,7 @@ const css = ({ dt }: { dt: (token: string) => string }) => `
    ${toggleswitchCss({ dt })}
    ${tooltipCss({ dt })}
    ${progressspinnerCss({ dt })}
+   ${inputotpCss({ dt })}
 
   .p-disabled, .p-component:disabled {
     mix-blend-mode: luminosity;