srcdev-nuxt-forms 2.2.1 → 2.4.0

package/components/forms/input-textarea/InputTextareaCore.vue

@@ -32,7 +32,7 @@
 
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
-const { maxlength, id, name, placeholder, fieldHasError, required, styleClassPassthrough, theme, size } = defineProps({
+const props = defineProps({
   maxlength: {
     type: Number,
     default: 255,
@@ -82,7 +82,7 @@ const hasLeftSlot = computed(() => slots.left !== undefined);
 const hasRightSlot = computed(() => slots.right !== undefined);
 
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
 const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
@@ -95,11 +95,7 @@ const updateFocus = (isFocused: boolean) => {
 
 const inputField = ref<HTMLInputElement | null>(null);
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
-
-onMounted(() => {
-  updateElementClasses(['deep-bristol', 'deep-london', 'deep-bath']);
-});
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css">

package/components/forms/input-textarea/variants/InputTextareaWithLabel.vue

@@ -16,15 +16,11 @@
 
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
-const { maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme, size } = defineProps({
+const props = defineProps({
   maxlength: {
     type: Number,
     default: 255,
   },
-  id: {
-    type: String,
-    required: true,
-  },
   name: {
     type: String,
     required: true,
@@ -73,15 +69,16 @@ const slots = useSlots();
 const hasLeftSlot = computed(() => slots.left !== undefined);
 const hasRightSlot = computed(() => slots.right !== undefined);
 
+const id = useId();
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
 const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
 const isActive = ref<boolean>(false);
 const isDirty = ref<boolean>(false);
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const testDirty = () => {
   const watchValue = modelValue.value ?? '';

package/components/forms/toggle-switch/ToggleSwitchCore.vue

@@ -20,7 +20,7 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { id, name, required, fieldHasError, trueValue, falseValue, styleClassPassthrough, theme, round, size, ariaDescribedby } = defineProps({
+const props = defineProps({
   id: {
     type: String,
     required: true,
@@ -78,16 +78,16 @@ const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
 const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
 
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
 const modelValue = defineModel();
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-const inputId = computed(() => `toggle-sitch-${id}`);
+const inputId = computed(() => `toggle-sitch-${props.id}`);
 
 const toggleSwitchValue = () => {
-  modelValue.value = modelValue.value === trueValue ? falseValue : trueValue;
+  modelValue.value = modelValue.value === props.trueValue ? props.falseValue : props.trueValue;
 };
 </script>
 

package/components/forms/toggle-switch/variants/ToggleSwitchWithLabel.vue

@@ -13,18 +13,14 @@
         <slot name="iconOff"></slot>
       </template>
     </ToggleSwitchCore>
-    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="true" />
+    <InputError :errorMessage :showError="fieldHasError" :id="errorId" :isDetached="true" />
   </div>
 </template>
 
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
 
-const { id, name, label, required, errorMessage, fieldHasError, trueValue, falseValue, styleClassPassthrough, theme, round, size } = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
+const props = defineProps({
   name: {
     type: String,
     required: true,
@@ -84,17 +80,18 @@ const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
 const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
 
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
+  return props.fieldHasError ? 'error' : props.theme;
 });
 
+const id = useId();
 const errorId = `${id}-error-message`;
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : null;
-  return fieldHasError ? errorId : ariaDescribedbyId;
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : undefined;
+  return props.fieldHasError ? errorId : ariaDescribedbyId;
 });
 
 const modelValue = defineModel();
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css">

package/components/forms/toggle-switch/variants/ToggleSwitchWithLabelInline.vue

@@ -16,11 +16,7 @@
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
 
-const { id, name, label, labelWeight, trueValue, falseValue, styleClassPassthrough, theme, round, size } = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
+const props = defineProps({
   name: {
     type: String,
     required: true,
@@ -72,8 +68,10 @@ const slots = useSlots();
 const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
 const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
 
+const id = useId();
+
 const labelWeightClass = computed(() => {
-  switch (labelWeight) {
+  switch (props.labelWeight) {
     case 'bold':
       return 'body-normal-bold';
     case 'semi-bold':
@@ -86,7 +84,7 @@ const labelWeightClass = computed(() => {
 });
 
 const modelValue = defineModel();
-const { elementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css">

package/components/utils/dark-mode-switcher/DarkModeSwitcher.vue

@@ -1,5 +1,5 @@
 <template>
-  <ToggleSwitchWithLabelInline v-model="displayMode" :id :name :label labelWeight="normal" :size trueValue="dark" falseValue="light" :style-class-passthrough>
+  <ToggleSwitchWithLabelInline v-model="displayMode" :name :label labelWeight="normal" :size trueValue="dark" falseValue="light" :style-class-passthrough>
     <template #iconOn>
       <Icon name="radix-icons:moon" class="icon" />
     </template>
@@ -12,11 +12,7 @@
 <script setup lang="ts">
 import propValidators from '../../forms/c12/prop-validators';
 
-const { styleClassPassthrough } = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
+defineProps({
   name: {
     type: String,
     required: true,

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.4.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": [
@@ -27,14 +26,14 @@
   "devDependencies": {
     "@nuxt/eslint-config": "0.7.5",
     "@nuxt/icon": "1.10.3",
-    "@nuxt/test-utils": "3.15.1",
+    "@nuxt/test-utils": "3.15.4",
     "@vue/test-utils": "2.4.6",
     "eslint": "9.18.0",
-    "happy-dom": "15.11.7",
+    "happy-dom": "16.6.0",
     "nuxt": "3.15.0",
     "release-it": "18.1.1",
     "typescript": "5.7.3",
-    "vitest": "2.1.8",
+    "vitest": "3.0.2",
     "vue": "3.5.13"
   },
   "dependencies": {
@@ -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" />`,
-};