srcdev-nuxt-forms 2.2.0 → 2.3.0

package/README.md

@@ -40,12 +40,23 @@ defineNuxtConfig({
 
 ## Development Server
 
-Start the development server on <http://localhost:3000>
+Start the development server on <https://localhost:3000>
 
 ```bash
 npm dev
 ```
 
+## Browser https error
+
+If you do not get a proceed to site ssl error, then you need to reset HSTS settings in browser
+
+- Clearing all data for the site
+- Click on the button to the left of the address bar
+- Site settings
+- Delete data
+- Go to chrome://net-internals/#hsts and enter localhost into Delete domain security policies (or whichever domain you're having trouble with)
+- Restart your browser
+
 ## Production
 
 Build the application for production:

package/assets/styles/forms/variables/_sizes.css

@@ -4,14 +4,14 @@
   --form-element-border-width: 0.2rem;
   --form-element-outline-width: 0.1rem;
 
+  --form-text-padding-inline: 0.5em;
+  --form-button-padding-inline: 1.25em;
+  --form-button-icon-gap: 1em;
+
   [data-size='x-small'] {
     --form-element-font-size: var(--step-0);
     --form-placeholder-font-size: calc(var(--step-0) * 0.65);
     --form-element-line-height: var(--step-0);
-    --form-icon-size: var(--step-0);
-    --form-button-padding-inline: calc(var(--step-0) * 1.65);
-    --form-text-padding-inline: calc(var(--step-0) * 0.25);
-    --form-button-icon-gap: calc(var(--step-0) * 0.65);
     --form-input-border-radius: 0.4rem;
     --form-icon-only-button-size: calc(var(--step-1) * 2 + 1px);
     --form-toggle-symbol-size: calc(var(--step-0) * 1.55);
@@ -24,9 +24,6 @@
     --form-placeholder-font-size: calc(var(--step-1) * 0.65);
     --form-element-line-height: var(--step-1);
     --form-icon-size: var(--step-1);
-    --form-button-padding-inline: calc(var(--step-0) * 1.65);
-    --form-text-padding-inline: calc(var(--step-1) * 0.25);
-    --form-button-icon-gap: calc(var(--step-0) * 0.65);
     --form-input-border-radius: 0.4rem;
     --form-icon-only-button-size: calc(var(--step-1) * 2.25 + 1px);
     --form-toggle-symbol-size: calc(var(--step-1) * 1.635);
@@ -39,9 +36,6 @@
     --form-placeholder-font-size: calc(var(--step-2) * 0.65);
     --form-element-line-height: var(--step-2);
     --form-icon-size: var(--step-2);
-    --form-button-padding-inline: calc(var(--step-0) * 1.65);
-    --form-text-padding-inline: calc(var(--step-2) * 0.25);
-    --form-button-icon-gap: calc(var(--step-0) * 0.65);
     --form-input-border-radius: 0.4rem;
     --form-icon-only-button-size: calc(var(--step-1) * 2.5 + 1px);
     --form-toggle-symbol-size: calc(var(--step-2) * 1.72);
@@ -54,9 +48,6 @@
     --form-placeholder-font-size: calc(var(--step-3) * 0.65);
     --form-element-line-height: var(--step-3);
     --form-icon-size: var(--step-3);
-    --form-button-padding-inline: calc(var(--step-0) * 1.65);
-    --form-text-padding-inline: calc(var(--step-3) * 0.25);
-    --form-button-icon-gap: calc(var(--step-0) * 0.65);
     --form-input-border-radius: 0.4rem;
     --form-icon-only-button-size: calc(var(--step-1) * 2.75 + 1px);
     --form-toggle-symbol-size: calc(var(--step-3) * 1.78);
@@ -69,9 +60,6 @@
     --form-placeholder-font-size: calc(var(--step-4) * 0.65);
     --form-element-line-height: var(--step-4);
     --form-icon-size: var(--step-4);
-    --form-button-padding-inline: calc(var(--step-0) * 1.75);
-    --form-text-padding-inline: calc(var(--step-4) * 0.25);
-    --form-button-icon-gap: calc(var(--step-0) * 0.75);
     --form-input-border-radius: 0.4rem;
     --form-icon-only-button-size: calc(var(--step-1) * 3 + 1px);
     --form-toggle-symbol-size: calc(var(--step-4) * 1.816);

package/components/forms/input-text/InputTextCore.vue

@@ -165,7 +165,6 @@ onMounted(() => {
   &:not(:has(.input-button-core)) {
     .slot {
       display: inline-block;
-      padding-inline: 0.8rem;
 
       .icon {
         color: var(--theme-form-input-text);
@@ -178,17 +177,11 @@ onMounted(() => {
     }
   }
 
-  /* &:has(.input-button-core) {
-    .input-button-core {
-      margin-inline: 0.6rem;
-    }
-  } */
-
   &.has-left-slot {
     .left-slot {
       display: flex;
       align-items: center;
-      margin-inline: 0.6rem;
+      margin-inline-start: 1rem;
     }
   }
 
@@ -196,19 +189,13 @@ onMounted(() => {
     .right-slot {
       display: flex;
       align-items: center;
-      margin-inline: 0.6rem;
+      margin-inline-end: 1rem;
     }
   }
 
-  &:not(.has-left-slot) {
-    padding-inline-start: var(--form-text-padding-inline);
-  }
-
   &:focus-within {
     box-shadow: var(--box-shadow-on);
-    /* --_theme-form-input-outline-focus: hsl(from var(--_theme-form-input-outline-focus) h s 50%); */
     outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
-    /* outline: var(--form-element-outline-width) solid white; */
   }
 
   .input-text-core {

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.0",
+  "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": [
@@ -25,15 +24,15 @@
     "types/"
   ],
   "devDependencies": {
-    "@nuxt/eslint-config": "0.7.3",
-    "@nuxt/icon": "1.10.2",
+    "@nuxt/eslint-config": "0.7.5",
+    "@nuxt/icon": "1.10.3",
     "@nuxt/test-utils": "3.15.1",
     "@vue/test-utils": "2.4.6",
-    "eslint": "9.17.0",
+    "eslint": "9.18.0",
     "happy-dom": "15.11.7",
-    "nuxt": "3.14.1592",
-    "release-it": "17.10.0",
-    "typescript": "5.7.2",
+    "nuxt": "3.15.0",
+    "release-it": "18.1.1",
+    "typescript": "5.7.3",
     "vitest": "2.1.8",
     "vue": "3.5.13"
   },
@@ -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" />`,
-};