srcdev-nuxt-forms 2.1.12 → 2.1.14

package/assets/styles/forms/themes/_error.css

@@ -26,6 +26,20 @@
     --theme-form-radio-symbol: var(--red-12);
 
     --theme-form-range-accent-color: light-dark(var(--red-12), var(--red-3));
+
+    /*
+    * Checkbox as button
+    **/
+
+    --theme-checkbox-radio-button-bg-default: light-dark(var(--red-4), var(--red-4));
+
+    --theme-checkbox-radio-button-border-default: light-dark(var(--red-12), var(--red-12));
+    --theme-checkbox-radio-button-border-width: 1px;
+
+    --theme-checkbox-radio-button-outline-default: light-dark(var(--red-5), var(--red-5));
+    --theme-checkbox-radio-button-outline-width: 1px;
+
+    --theme-checkbox-radio-button-label-default: light-dark(var(--red-12), var(--red-12));
   }
 
   [data-btn-theme='error'] {

package/assets/styles/forms/themes/_ghost.css

@@ -26,23 +26,37 @@
     --theme-form-radio-symbol: var(--gray-12);
 
     --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
+
+    /*
+    * Checkbox as button
+    **/
+
+    --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-4), var(--gray-4));
+
+    --theme-checkbox-radio-button-border-default: light-dark(var(--gray-12), var(--gray-12));
+    --theme-checkbox-radio-button-border-width: 1px;
+
+    --theme-checkbox-radio-button-outline-default: light-dark(var(--gray-5), var(--gray-5));
+    --theme-checkbox-radio-button-outline-width: 1px;
+
+    --theme-checkbox-radio-button-label-default: light-dark(var(--gray-12), var(--gray-12));
   }
 
   [data-btn-theme='ghost'] {
-    --theme-btn-bg: var(--gray-12);
+    --theme-btn-bg: transparent;
     --theme-btn-border: var(--gray-0);
     --theme-btn-outline: var(--gray-12);
-    --theme-btn-text: var(--gray-0);
+    --theme-btn-text: light-dark(var(--gray-12), var(--gray-0));
 
-    --theme-btn-bg-hover: var(--gray-0);
-    --theme-btn-border-hover: var(--gray-12);
-    --theme-btn-outline-hover: var(--gray-0);
-    --theme-btn-text-hover: var(--gray-12);
+    --theme-btn-bg-hover: light-dark(var(--gray-2), var(--gray-8));
+    --theme-btn-border-hover: light-dark(var(--gray-12), var(--gray-0));
+    --theme-btn-outline-hover: light-dark(var(--gray-12), var(--gray-0));
+    --theme-btn-text-hover: light-dark(var(--gray-12), var(--gray-0));
 
-    --theme-btn-bg-focus: var(--gray-0);
-    --theme-btn-border-focus: var(--gray-12);
-    --theme-btn-outline-focus: var(--gray-0);
-    --theme-btn-text-focus: var(--gray-12);
+    --theme-btn-bg-focus: light-dark(var(--gray-2), var(--gray-8));
+    --theme-btn-border-focus: light-dark(var(--gray-12), var(--gray-0));
+    --theme-btn-outline-focus: light-dark(var(--gray-12), var(--gray-0));
+    --theme-btn-text-focus: light-dark(var(--gray-12), var(--gray-0));
 
     --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
   }

package/assets/styles/forms/themes/_primary.css

@@ -25,7 +25,21 @@
     --theme-form-radio-shadow-focus: var(--blue-6);
     --theme-form-radio-symbol: var(--blue-12);
 
-    --theme-form-range-accent-color: light-dark(var(--blue-12), var(--blue-3));
+    --theme-form-range-accent-color: light-dark(var(--blue-12), var(--blue-));
+
+    /*
+    * Checkbox as button
+    **/
+
+    --theme-checkbox-radio-button-bg-default: light-dark(var(--blue-4), var(--blue-4));
+
+    --theme-checkbox-radio-button-border-default: light-dark(var(--blue-12), var(--blue-12));
+    --theme-checkbox-radio-button-border-width: 1px;
+
+    --theme-checkbox-radio-button-outline-default: light-dark(var(--blue-5), var(--blue-5));
+    --theme-checkbox-radio-button-outline-width: 1px;
+
+    --theme-checkbox-radio-button-label-default: light-dark(var(--blue-12), var(--blue-12));
   }
 
   [data-btn-theme='primary'] {

package/assets/styles/forms/themes/_secondary.css

@@ -26,6 +26,20 @@
     --theme-form-radio-symbol: var(--gray-12);
 
     --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
+
+    /*
+    * Checkbox as button
+    **/
+
+    --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-4), var(--gray-4));
+
+    --theme-checkbox-radio-button-border-default: light-dark(var(--gray-12), var(--gray-12));
+    --theme-checkbox-radio-button-border-width: 1px;
+
+    --theme-checkbox-radio-button-outline-default: light-dark(var(--gray-5), var(--gray-5));
+    --theme-checkbox-radio-button-outline-width: 1px;
+
+    --theme-checkbox-radio-button-label-default: light-dark(var(--gray-12), var(--gray-12));
   }
 
   [data-btn-theme='secondary'] {

package/assets/styles/forms/themes/_success.css

@@ -26,6 +26,20 @@
     --theme-form-radio-symbol: var(--green-12);
 
     --theme-form-range-accent-color: light-dark(var(--green-12), var(--green-3));
+
+    /*
+    * Checkbox as button
+    **/
+
+    --theme-checkbox-radio-button-bg-default: light-dark(var(--green-4), var(--green-4));
+
+    --theme-checkbox-radio-button-border-default: light-dark(var(--green-12), var(--green-12));
+    --theme-checkbox-radio-button-border-width: 1px;
+
+    --theme-checkbox-radio-button-outline-default: light-dark(var(--green-5), var(--green-5));
+    --theme-checkbox-radio-button-outline-width: 1px;
+
+    --theme-checkbox-radio-button-label-default: light-dark(var(--green-12), var(--green-12));
   }
 
   [data-btn-theme='success'] {

package/assets/styles/forms/themes/_tertiary.css

@@ -26,6 +26,20 @@
     --theme-form-radio-symbol: var(--gray-12);
 
     --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
+
+    /*
+    * Checkbox as button
+    **/
+
+    --theme-checkbox-radio-button-bg-default: light-dark(var(--green-4), var(--green-4));
+
+    --theme-checkbox-radio-button-border-default: light-dark(var(--green-12), var(--green-12));
+    --theme-checkbox-radio-button-border-width: 1px;
+
+    --theme-checkbox-radio-button-outline-default: light-dark(var(--green-5), var(--green-5));
+    --theme-checkbox-radio-button-outline-width: 1px;
+
+    --theme-checkbox-radio-button-label-default: light-dark(var(--green-12), var(--green-12));
   }
 
   [data-btn-theme='tertiary'] {

package/assets/styles/forms/themes/_warning.css

@@ -26,6 +26,20 @@
     --theme-form-radio-symbol: var(--orange-12);
 
     --theme-form-range-accent-color: light-dark(var(--orange-12), var(--orange-3));
+
+    /*
+    * Checkbox as button
+    **/
+
+    --theme-checkbox-radio-button-bg-default: light-dark(var(--orange-4), var(--orange-4));
+
+    --theme-checkbox-radio-button-border-default: light-dark(var(--orange-12), var(--orange-12));
+    --theme-checkbox-radio-button-border-width: 1px;
+
+    --theme-checkbox-radio-button-outline-default: light-dark(var(--orange-5), var(--orange-5));
+    --theme-checkbox-radio-button-outline-width: 1px;
+
+    --theme-checkbox-radio-button-label-default: light-dark(var(--orange-12), var(--orange-12));
   }
 
   [data-btn-theme='warning'] {

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

@@ -14,6 +14,9 @@
 
   --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
 
+  --theme-error-surface: var(--red-12);
+  --theme-error-text: var(--red-0);
+
   --theme-form-button-font-size-x-small: 14px;
   --theme-form-button-font-size-small: 14px;
   --theme-form-button-font-size-normal: 16px;

package/assets/styles/main.css

@@ -1,3 +1,4 @@
 @import './variables';
 @import './forms';
 @import './scaffolding';
+@import './typography';

package/assets/styles/typography/index.css

@@ -0,0 +1,2 @@
+@import './utils';
+@import './variables';

package/assets/styles/{variables/_typography.css → typography/utils/_classes.css}

@@ -1,18 +1,3 @@
-:root {
-  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
-  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
-  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
-  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
-  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
-  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
-  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
-  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
-}
-
-/* .typography { */
-/* font-family: 'Poppins', Sans-serif; */
-/* font-family: var(--font-family); */
-
 .heading-1 {
   font-size: var(--step-5);
   font-weight: bold;
@@ -173,4 +158,3 @@
     color: var(--theme-link-default);
   }
 }
-/* } */

package/assets/styles/typography/utils/_weights.css

@@ -0,0 +1,69 @@
+/* By numeric step */
+.wght-100 {
+  font-weight: 100;
+}
+.wght-200 {
+  font-weight: 200;
+}
+.wght-300 {
+  font-weight: 300;
+}
+.wght-400 {
+  font-weight: 400;
+}
+.wght-500 {
+  font-weight: 500;
+}
+.wght-600 {
+  font-weight: 600;
+}
+.wght-700 {
+  font-weight: 700;
+}
+.wght-800 {
+  font-weight: 800;
+}
+.wght-900 {
+  font-weight: 900;
+}
+
+/* By named weight */
+.light {
+  font-weight: light;
+}
+.normal {
+  font-weight: normal;
+}
+.bold {
+  font-weight: bold;
+}
+
+/* Using the font-variation-settings property. */
+
+.fvs-wght-100 {
+  font-variation-settings: 'wght' 100;
+}
+.fvs-wght-200 {
+  font-variation-settings: 'wght' 200;
+}
+.fvs-wght-300 {
+  font-variation-settings: 'wght' 300;
+}
+.fvs-wght-400 {
+  font-variation-settings: 'wght' 400;
+}
+.fvs-wght-500 {
+  font-variation-settings: 'wght' 500;
+}
+.fvs-wght-600 {
+  font-variation-settings: 'wght' 600;
+}
+.fvs-wght-700 {
+  font-variation-settings: 'wght' 700;
+}
+.fvs-wght-800 {
+  font-variation-settings: 'wght' 800;
+}
+.fvs-wght-900 {
+  font-variation-settings: 'wght' 900;
+}

package/assets/styles/typography/utils/index.css

@@ -0,0 +1,2 @@
+@import './_classes.css';
+@import './_weights.css';

package/assets/styles/typography/variables/_reponsive-font-size.css

@@ -0,0 +1,10 @@
+:root {
+  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
+  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
+  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
+  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
+  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
+  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
+  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
+  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
+}

package/assets/styles/typography/variables/index.css

@@ -0,0 +1,2 @@
+@import './_colors.css';
+@import './_reponsive-font-size.css';

package/assets/styles/variables/index.css

@@ -1,3 +1 @@
-@import './colors/index.css';
-@import './_default.css';
-@import './_typography.css';
+@import './colors/colors.css';

package/components/forms/c12/prop-validators/index.ts

@@ -1,6 +1,28 @@
 export const propValidators = {
   size: ['x-small', 'small', 'normal', 'medium', 'large'],
-  weight: ['wght-100', 'wght-200', 'wght-300', 'wght-400', 'wght-500', 'wght-600', 'wght-700', 'wght-800', 'wght-900'],
+  weight: [
+    'wght-100',
+    'wght-200',
+    'wght-300',
+    'wght-400',
+    'wght-500',
+    'wght-600',
+    'wght-700',
+    'wght-800',
+    'wght-900',
+    'light',
+    'normal',
+    'bold',
+    'fvs-wght-100',
+    'fvs-wght-200',
+    'fvs-wght-300',
+    'fvs-wght-400',
+    'fvs-wght-500',
+    'fvs-wght-600',
+    'fvs-wght-700',
+    'fvs-wght-800',
+    'fvs-wght-900',
+  ],
   theme: ['primary', 'secondary', 'tertiary', 'ghost', 'error', 'success', 'warning'],
   checkboxAppearance: [null, 'with-decorator'],
   checkboxStyle: ['check', 'cross'],
@@ -8,6 +30,7 @@ export const propValidators = {
   optionsLayout: ['block', 'inline', 'equal-widths'],
   inputTypesButton: ['button', 'cancel', 'reset', 'submit'],
   inputTypesText: ['text', 'email', 'password', 'number', 'tel', 'url'],
+  inputMode: ['text', 'email', 'tel', 'url', 'search', 'numeric', 'none', 'decimal'],
 };
 
 export default propValidators;

package/components/forms/form-errors/InputError.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="input-error-message" :class="[elementClasses, { show: fieldHasError }, { detached: isDetached }, { hide: !fieldHasError }]">
-    <div class="inner" :class="[{ show: fieldHasError }]">
+  <div class="input-error-message" :class="[elementClasses, { show: showError }, { detached: isDetached }, { hide: !showError }]" :data-Testid>
+    <div class="inner" :class="[{ show: showError }]">
       <div class="inner-content">
         <div class="inner-icon">
           <Icon name="radix-icons:circle-backslash" class="icon" />
@@ -20,11 +20,15 @@
 
 <script setup lang="ts">
 const props = defineProps({
+  dataTestid: {
+    type: String,
+    default: 'inputError',
+  },
   errorMessage: {
     type: [Array, Object, String],
     required: true,
   },
-  fieldHasError: {
+  showError: {
     type: Boolean,
     required: true,
   },

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

@@ -0,0 +1,36 @@
+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/form-errors/tests/InputError.spec.ts

@@ -0,0 +1,67 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import { describe, it, expect } from 'vitest';
+import { VueWrapper } from '@vue/test-utils';
+import { mountSuspended } from '@nuxt/test-utils/runtime';
+import ComponentUnderTest from '../InputError.vue';
+
+let initialPropsData = {
+  dataTestid: 'inputError',
+  errorMessage: 'Hello World',
+  fieldHasError: true,
+  id: 'testId',
+  styleClassPassthrough: ['testClass'],
+  compact: false,
+  isDetached: true,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    props: mockPropsData,
+  });
+};
+
+describe('InputError Component', () => {
+  it('renders properly', async () => {
+    wrapper = await wrapperFactory();
+
+    // Check the value of the data-testid attribute
+    const dataTestIdValue = wrapper.attributes('data-testid');
+    expect(dataTestIdValue).toBe('inputError');
+
+    expect(wrapper.find('[data-testid]').classes()).toContain('testClass');
+    expect(wrapper.find('[data-testid]').classes()).toContain('show');
+  });
+
+  it('is not displayed by default', async () => {
+    const propData = {
+      fieldHasError: false,
+    };
+    wrapper = await wrapperFactory(propData);
+
+    expect(wrapper.find('[data-testid]').classes()).not.toContain('show');
+  });
+
+  it('is displays a single error message', async () => {
+    const propData = {
+      fieldHasError: true,
+    };
+    wrapper = await wrapperFactory(propData);
+
+    expect(wrapper.find('.message-list').exists()).toBe(false);
+    expect(wrapper.find('.message-single').text()).toContain('Hello World');
+  });
+
+  it('is displays a single error message', async () => {
+    const propData = {
+      errorMessage: ['Hello World', 'Hello World 2'],
+    };
+    wrapper = await wrapperFactory(propData);
+
+    expect(wrapper.find('.message-single').exists()).toBe(false);
+    expect(wrapper.find('.message-list .message-list-item:first-child').text()).toEqual('Hello World');
+    expect(wrapper.find('.message-list .message-list-item:last-child').text()).toEqual('Hello World 2');
+  });
+});

package/components/forms/input-button/InputButtonCore.vue

@@ -3,10 +3,10 @@
     :type
     :readonly
     :aria-disabled="readonly"
-    :data-test-id="dataTestId"
+    :data-testid="dataTestid"
     :data-btn-theme="theme"
     class="input-button-core btn"
-    :class="[`btn-${type}`, size, effectClass, styleClassPassthrough, { 'icon-only': isIconOnly }]"
+    :class="[`btn-${type}`, size, effectClass, elementClasses, { 'icon-only': isIconOnly }]"
   >
     <span v-if="useEffect && effect == 'fancy'" class="fancy"></span>
     <template v-if="hasLeftContent && !isIconOnly">
@@ -64,13 +64,13 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  dataTestId: {
+  dataTestid: {
     type: String,
     default: '',
   },
   styleClassPassthrough: {
-    type: String,
-    default: '',
+    type: Array as PropType<string[]>,
+    default: () => [],
   },
   useEffect: {
     type: Boolean,
@@ -106,6 +106,8 @@ const slots = useSlots();
 const hasLeftContent = computed(() => slots.left !== undefined);
 const hasRightContent = computed(() => slots.right !== undefined);
 const isIconOnly = computed(() => slots.iconOnly !== undefined);
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css">

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,65 @@
+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-button/variants/InputButtonConfirm.vue

@@ -5,11 +5,11 @@
     :isPending="isPending"
     :readonly
     :effect="effect"
-    :data-test-id="dataTestId"
+    :data-testid="dataTestid"
     :size
     :weight
     :button-text="buttonText"
-    :style-class-passthrough="styleClassPassthrough"
+    :style-class-passthrough
     :theme
   >
     <template #left>
@@ -58,13 +58,13 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  dataTestId: {
+  dataTestid: {
     type: String,
     default: '',
   },
   styleClassPassthrough: {
-    type: String,
-    default: '',
+    type: Array as PropType<string[]>,
+    default: () => [],
   },
   isPending: {
     type: Boolean,

package/components/forms/input-button/variants/InputButtonSubmit.vue

@@ -1,17 +1,5 @@
 <template>
-  <InputButtonCore
-    type="button"
-    :use-effect="useEffect"
-    :isPending="isPending"
-    :readonly
-    :effect="effect"
-    :data-test-id="dataTestId"
-    :size
-    :weight
-    :button-text="buttonText"
-    :style-class-passthrough="styleClassPassthrough"
-    :theme
-  />
+  <InputButtonCore type="button" :use-effect="useEffect" :isPending="isPending" :readonly :effect="effect" :data-testid :size :weight :button-text :style-class-passthrough :theme />
 </template>
 
 <script setup lang="ts">
@@ -54,13 +42,13 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  dataTestId: {
+  dataTestid: {
     type: String,
     default: '',
   },
   styleClassPassthrough: {
-    type: String,
-    default: '',
+    type: Array as PropType<string[]>,
+    default: () => [],
   },
   isPending: {
     type: Boolean,