srcdev-nuxt-forms 2.2.1 → 2.3.0

package/nuxt.config.ts

@@ -3,7 +3,7 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   css: ['modern-normalize', './assets/styles/main.css'],
-  modules: ['@nuxt/icon', '@nuxt/test-utils/module', '@nuxtjs/storybook'],
+  modules: ['@nuxt/icon', '@nuxt/test-utils/module'],
   typescript: {
     tsConfig: {
       compilerOptions: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -15,7 +15,6 @@
     "lint": "eslint .",
     "postinstall": "nuxt prepare .playground",
     "release": "release-it",
-    "storybook": "storybook dev --port 6006 --config-dir .storybook",
     "test": "vitest"
   },
   "files": [
@@ -45,12 +44,6 @@
     "@iconify-json/ph": "1.2.2",
     "@iconify-json/radix-icons": "1.2.2",
     "@iconify-json/ri": "1.2.5",
-    "@nuxtjs/storybook": "8.3.2",
-    "@storybook/addon-essentials": "8.4.7",
-    "@storybook/addon-interactions": "8.4.7",
-    "@storybook/addon-links": "8.4.7",
-    "@storybook/vue3": "8.4.7",
-    "http-proxy-middleware": "3.0.3",
     "modern-normalize": "3.0.1",
     "zod": "3.24.1"
   },

package/components/forms/form-errors/stories/InputError.stories.ts

@@ -1,36 +0,0 @@
-import type { Meta, StoryFn } from '@nuxtjs/storybook';
-// import { Suspense } from 'vue';
-import InputError from '../InputError.vue';
-
-export default {
-  title: 'Components/UI/InputError',
-  component: InputError,
-} as Meta<typeof InputError>;
-
-const Template: StoryFn<typeof InputError> = (args) => ({
-  components: { InputError },
-  setup() {
-    return { args };
-  },
-  template: `
-    <Suspense>
-      <template #default>
-        <InputError v-bind="args" />
-      </template>
-      <template #fallback>
-        <div>Loading...</div>
-      </template>
-    </Suspense>
-  `,
-});
-
-export const SingleErrorMessage = Template.bind({});
-SingleErrorMessage.args = {
-  dataTestid: 'inputError',
-  errorMessage: 'Hello World',
-  showError: true,
-  id: 'testId',
-  styleClassPassthrough: ['testClass'],
-  compact: false,
-  isDetached: true,
-};

package/components/forms/input-button/stories/InputButtonCore.mdx

@@ -1,8 +0,0 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import * as InputButtonCoreStories from './InputButtonCore.stories'
-
-<Meta of={InputButtonCoreStories} />
-
-<Canvas of={InputButtonCoreStories.Primary} />
-
-<Controls of={InputButtonCoreStories.Primary} />

package/components/forms/input-button/stories/InputButtonCore.stories.ts

@@ -1,65 +0,0 @@
-import type { Meta, StoryFn } from '@nuxtjs/storybook';
-import InputButtonCore from '../InputButtonCore.vue';
-import propValidators from '../../c12/prop-validators';
-
-export default {
-  title: 'Components/Forms/Buttons/Core',
-  component: InputButtonCore,
-  argTypes: {
-    size: {
-      options: propValidators.size,
-      control: { type: 'select' },
-    },
-    weight: {
-      options: propValidators.weight,
-      control: { type: 'select' },
-    },
-    theme: {
-      options: propValidators.theme,
-      control: { type: 'select' },
-      default: 'primary',
-    },
-    effect: {
-      options: ['fancy', 'pulse'],
-      control: { type: 'select' },
-    },
-  },
-} as Meta<typeof InputButtonCore>;
-
-const Template: StoryFn<typeof InputButtonCore> = (args) => ({
-  components: { InputButtonCore },
-  setup() {
-    return { args };
-  },
-  template: `
-    <Suspense>
-      <template #default>
-        <InputButtonCore v-bind="args">
-          <template v-if="${'left' in args}" v-slot:title>${args.left}</template>
-          <template v-if="${'right' in args}" v-slot:content>${args.right}</template>
-          <template v-if="${'iconOnly' in args}" v-slot:content>${args.iconOnly}</template>
-        </InputButtonCore>
-      </template>
-      <template #fallback>
-        <div>Loading...</div>
-      </template>
-    </Suspense>
-  `,
-  // template: '<InputButtonCore v-bind="args" />',
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  size: 'medium',
-  weight: 'wght-400',
-  theme: 'primary',
-  useEffect: false,
-  effect: 'pulse',
-  buttonText: 'Button text prop',
-  dataTestid: 'buttonTestId',
-  styleClassPassthrough: ['testClass', 'testClass2'],
-  isPending: false,
-  readonly: false,
-  left: 'Left',
-  right: 'Right',
-};

package/components/forms/input-radio/stories/MultipleRadioButtons.mdx

@@ -1,8 +0,0 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import * as MultipleRadiobuttonsStories from './MultipleRadiobuttons.stories'
-
-<Meta of={MultipleRadiobuttonsStories} />
-
-<Canvas of={MultipleRadiobuttonsStories.Primary} />
-
-<Controls of={MultipleRadiobuttonsStories.Primary} />

package/components/forms/input-radio/stories/MultipleRadiobuttons.stories.ts

@@ -1,71 +0,0 @@
-import type { Meta, StoryFn } from '@nuxtjs/storybook';
-import MultipleRadiobuttons from '../MultipleRadiobuttons.vue';
-import propValidators from '../../c12/prop-validators';
-import modelData from './data/tags.json';
-
-export default {
-  title: 'Components/Forms/MultipleRadiobuttons',
-  component: MultipleRadiobuttons,
-  argTypes: {
-    size: {
-      options: propValidators.size,
-      control: { type: 'select' },
-    },
-    weight: {
-      options: propValidators.weight,
-      control: { type: 'select' },
-    },
-    theme: {
-      options: propValidators.theme,
-      control: { type: 'select' },
-      default: 'primary',
-    },
-    optionsLayout: {
-      options: ['inline', 'equal-widths'],
-      control: { type: 'select' },
-    },
-    direction: {
-      options: ['row', 'row-reverse'],
-      control: { type: 'select' },
-    },
-  },
-} as Meta<typeof MultipleRadiobuttons>;
-
-const Template: StoryFn<typeof MultipleRadiobuttons> = (args) => ({
-  components: { MultipleRadiobuttons },
-  setup() {
-    return { args };
-  },
-  template: `
-    <Suspense>
-      <template #default>
-        <MultipleRadiobuttons v-bind="args">
-          <template v-if="${'description' in args}" v-slot:description>${args.description}</template>
-        </MultipleRadiobuttons>
-      </template>
-      <template #fallback>
-        <div>Loading...</div>
-      </template>
-    </Suspense>
-  `,
-  // template: '<MultipleRadiobuttons v-bind="args" />',
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  id: 'tagsRadio',
-  name: 'tagsRadio',
-  legend: 'Choose tags (as radiobuttons)',
-  required: true,
-  label: 'Check between 3 and 8 tags',
-  placeholder: 'eg. Type something here',
-  isButton: true,
-  errorMessage: 'Please select between 3 and 8 tags',
-  fieldHasError: false,
-  modelValue: [],
-  fieldData: modelData,
-  size: 'x-small',
-  optionsLayout: 'inline',
-  theme: 'primary',
-  direction: 'row',
-};

package/components/forms/input-radio/stories/data/tags.json

@@ -1,67 +0,0 @@
-{
-  "data": [
-    {
-      "id": "pizza",
-      "name": "tags",
-      "value": "pizza",
-      "label": "Pizza"
-    },
-    {
-      "id": "italian",
-      "name": "tags",
-      "value": "italian",
-      "label": "Italian"
-    },
-    {
-      "id": "vegetarian",
-      "name": "tags",
-      "value": "vegetarian",
-      "label": "Vegetarian"
-    },
-    {
-      "id": "stir-fry",
-      "name": "tags",
-      "value": "stir-fry",
-      "label": "Stir-fry"
-    },
-    {
-      "id": "asian",
-      "name": "tags",
-      "value": "asian",
-      "label": "Asian"
-    },
-    {
-      "id": "cookies",
-      "name": "tags",
-      "value": "cookies",
-      "label": "Cookies"
-    },
-    {
-      "id": "dessert",
-      "name": "tags",
-      "value": "dessert",
-      "label": "Dessert"
-    },
-    {
-      "id": "baking",
-      "name": "tags",
-      "value": "baking",
-      "label": "Baking"
-    },
-    {
-      "id": "pasta",
-      "name": "tags",
-      "value": "pasta",
-      "label": "Pasta"
-    },
-    {
-      "id": "chicken",
-      "name": "tags",
-      "value": "chicken",
-      "label": "Chicken"
-    }
-  ],
-  "total": 5,
-  "skip": 0,
-  "limit": 10
-}

package/components/forms/input-text/stories/InputTextCore.mdx

@@ -1,8 +0,0 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import * as InputTextCoreStories from './InputTextCore.stories'
-
-<Meta of={InputTextCoreStories} />
-
-<Canvas of={InputTextCoreStories.Primary} />
-
-<Controls of={InputTextCoreStories.Primary} />

package/components/forms/input-text/stories/InputTextCore.stories.ts

@@ -1,59 +0,0 @@
-import type { Meta, StoryFn } from '@nuxtjs/storybook';
-import InputTextCore from '../InputTextCore.vue';
-import propValidators from '../../c12/prop-validators';
-
-export default {
-  title: 'Components/Forms/Input/Text/Core',
-  component: InputTextCore,
-  argTypes: {
-    type: {
-      options: propValidators.inputTypesText,
-      control: { type: 'select' },
-    },
-    inputMode: {
-      options: propValidators.inputMode,
-      control: { type: 'select' },
-    },
-    theme: {
-      options: propValidators.theme,
-      control: { type: 'select' },
-      default: 'primary',
-    },
-  },
-} as Meta<typeof InputTextCore>;
-
-const Template: StoryFn<typeof InputTextCore> = (args) => ({
-  components: { InputTextCore },
-  setup() {
-    return { args };
-  },
-  template: `
-    <Suspense>
-      <template #default>
-        <InputTextCore v-bind="args">
-          <template v-if="${'left' in args}" v-slot:title>${args.left}</template>
-          <template v-if="${'right' in args}" v-slot:content>${args.right}</template>
-        </InputTextCore>
-      </template>
-      <template #fallback>
-        <div>Loading...</div>
-      </template>
-    </Suspense>
-  `,
-  // template: '<InputTextCore v-bind="args" />',
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  type: 'text',
-  inputmode: 'text',
-  maxlength: 255,
-  id: 'testId',
-  name: 'testName',
-  required: true,
-  placeholder: 'Input placeholder text',
-  fieldHasError: false,
-  styleClassPassthrough: ['testClass1', 'testClass2'],
-  theme: 'primary',
-  modelValue: 'This is the model value',
-};

package/components/forms/input-text/variants/stories/InputPasswordWithLabel.mdx

@@ -1,8 +0,0 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import * as InputPasswordWithLabelStories from './InputPasswordWithLabel.stories'
-
-<Meta of={InputPasswordWithLabelStories} />
-
-<Canvas of={InputPasswordWithLabelStories.Primary} />
-
-<Controls of={InputPasswordWithLabelStories.Primary} />

package/components/forms/input-text/variants/stories/InputPasswordWithLabel.stories.ts

@@ -1,60 +0,0 @@
-import type { Meta, StoryFn } from '@nuxtjs/storybook';
-import InputPasswordWithLabel from '../InputPasswordWithLabel.vue';
-import propValidators from '../../../c12/prop-validators';
-
-export default {
-  title: 'Components/Forms/Input/Text/InputPasswordWithLabel',
-  component: InputPasswordWithLabel,
-  argTypes: {
-    type: {
-      options: propValidators.inputTypesText,
-      control: { type: 'select' },
-    },
-    inputMode: {
-      options: propValidators.inputMode,
-      control: { type: 'select' },
-    },
-    theme: {
-      options: propValidators.theme,
-      control: { type: 'select' },
-      default: 'primary',
-    },
-  },
-} as Meta<typeof InputPasswordWithLabel>;
-
-const Template: StoryFn<typeof InputPasswordWithLabel> = (args) => ({
-  components: { InputPasswordWithLabel },
-  setup() {
-    return { args };
-  },
-  template: `
-    <Suspense>
-      <template #default>
-        <InputPasswordWithLabel v-bind="args">
-          <template v-if="${'iconOnly' in args}" v-slot:iconOnly>${args.iconOnly}</template>
-        </InputPasswordWithLabel>
-      </template>
-      <template #fallback>
-        <div>Loading...</div>
-      </template>
-    </Suspense>
-  `,
-  // template: '<InputPasswordWithLabel v-bind="args" />',
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  type: 'password',
-  maxlength: 255,
-  id: 'testId',
-  name: 'testName',
-  placeholder: 'Input placeholder text',
-  label: 'Input label text',
-  errorMessage: 'This is an error message',
-  fieldHasError: false,
-  required: true,
-  styleClassPassthrough: ['testClass1', 'testClass2'],
-  theme: 'primary',
-  modelValue: 'This is the model value',
-  iconOnly: `<Icon name="radix-icons:eye-none" class="icon" />`,
-};