srcdev-nuxt-forms 0.0.23 → 0.1.0

package/.prettierrc

@@ -1,4 +1,5 @@
 {
   "semi": true,
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 200
 }

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

@@ -1,3 +1,12 @@
 :where(html) {
   --theme-error: var(--red-7);
+  --theme-form-error: var(--red-8);
+  --theme-form-error-border: var(--red-2);
+  --theme-form-error-border-hover: var(--red-0);
+  --theme-form-error-outline: var(--red-9);
+  --theme-form-error-outline-hover: var(--red-9);
+  --theme-form-error-bg: var(--red-9);
+  --theme-form-error-bg-hover: var(--red-2);
+  --theme-form-error-color: var(--red-1);
+  --theme-form-error-color-hover: var(--red-9);
 }

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

@@ -0,0 +1,11 @@
+:where(html) {
+  --theme-form-ghost: var(--gray-8);
+  --theme-form-ghost-border: transparent;
+  --theme-form-ghost-border-hover: var(--gray-0);
+  --theme-form-ghost-outline: transparent;
+  --theme-form-ghost-outline-hover: var(--gray-11);
+  --theme-form-ghost-bg: transparent;
+  --theme-form-ghost-bg-hover: var(--gray-2);
+  --theme-form-ghost-color: var(--gray-11);
+  --theme-form-ghost-color-hover: var(--gray-11);
+}

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

@@ -1,3 +1,11 @@
 :where(html) {
-  --theme-primary: var(--blue-8);
+  --theme-form-primary: var(--blue-8);
+  --theme-form-primary-border: var(--blue-2);
+  --theme-form-primary-border-hover: var(--blue-0);
+  --theme-form-primary-outline: var(--blue-11);
+  --theme-form-primary-outline-hover: var(--blue-11);
+  --theme-form-primary-bg: var(--blue-6);
+  --theme-form-primary-bg-hover: var(--blue-2);
+  --theme-form-primary-color: var(--blue-1);
+  --theme-form-primary-color-hover: var(--blue-11);
 }

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

@@ -0,0 +1,11 @@
+:where(html) {
+  --theme-form-secondary: var(--gray-8);
+  --theme-form-secondary-border: var(--gray-2);
+  --theme-form-secondary-border-hover: var(--gray-0);
+  --theme-form-secondary-outline: var(--gray-8);
+  --theme-form-secondary-outline-hover: var(--gray-8);
+  --theme-form-secondary-bg: var(--gray-11);
+  --theme-form-secondary-bg-hover: var(--gray-2);
+  --theme-form-secondary-color: var(--gray-1);
+  --theme-form-secondary-color-hover: var(--gray-11);
+}

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

@@ -0,0 +1,12 @@
+:where(html) {
+  --theme-success: var(--green-7);
+  --theme-form-success: var(--green-8);
+  --theme-form-success-border: var(--green-2);
+  --theme-form-success-border-hover: var(--green-0);
+  --theme-form-success-outline: var(--green-9);
+  --theme-form-success-outline-hover: var(--green-9);
+  --theme-form-success-bg: var(--green-9);
+  --theme-form-success-bg-hover: var(--green-2);
+  --theme-form-success-color: var(--green-1);
+  --theme-form-success-color-hover: var(--green-9);
+}

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

@@ -0,0 +1,11 @@
+:where(html) {
+  --theme-form-tertiary: var(--gray-8);
+  --theme-form-tertiary-border: var(--gray-2);
+  --theme-form-tertiary-border-hover: var(--gray-2);
+  --theme-form-tertiary-outline: var(--gray-8);
+  --theme-form-tertiary-outline-hover: var(--gray-8);
+  --theme-form-tertiary-bg: var(--gray-1);
+  --theme-form-tertiary-bg-hover: var(--gray-11);
+  --theme-form-tertiary-color: var(--gray-9);
+  --theme-form-tertiary-color-hover: var(--gray-2);
+}

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

@@ -0,0 +1,11 @@
+:where(html) {
+  --theme-form-warning: var(--orange-8);
+  --theme-form-warning-border: var(--orange-2);
+  --theme-form-warning-border-hover: var(--orange-0);
+  --theme-form-warning-outline: var(--orange-11);
+  --theme-form-warning-outline-hover: var(--orange-11);
+  --theme-form-warning-bg: var(--orange-6);
+  --theme-form-warning-bg-hover: var(--orange-2);
+  --theme-form-warning-color: var(--orange-1);
+  --theme-form-warning-color-hover: var(--orange-11);
+}

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

@@ -1,2 +1,7 @@
 @import './_primary.css';
+@import './_secondary.css';
+@import './_tertiary.css';
+@import './_ghost.css';
 @import './_error.css';
+@import './_success.css';
+@import './_warning.css';

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

@@ -9,4 +9,64 @@
 
   --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri,
     'DejaVu Sans', source-sans-pro, sans-serif;
+
+  --theme-form-button-font-size-x-small: 14px;
+  --theme-form-button-font-size-small: 14px;
+  --theme-form-button-font-size-normal: 16px;
+  --theme-form-button-font-size-medium: 18px;
+  --theme-form-button-font-size-large: 20px;
+
+  /*
+  * Button Padding
+  */
+
+  --theme-form-button-padding-block-x-small: 6px;
+  --theme-form-button-padding-block-small: 8px;
+  --theme-form-button-padding-block-normal: 10px;
+  --theme-form-button-padding-block-medium: 12px;
+  --theme-form-button-padding-block-large: 12px;
+
+  --theme-form-button-padding-inline-x-small: 12px;
+  --theme-form-button-padding-inline-small: 16px;
+  --theme-form-button-padding-inline-normal: 20px;
+  --theme-form-button-padding-inline-medium: 22px;
+  --theme-form-button-padding-inline-large: 24px;
+
+  /*
+  * Button Icon Sizes and Gap
+  */
+
+  --theme-form-button-padding-inline-icon-only-x-small: 4px;
+  --theme-form-button-padding-inline-icon-only-small: 6px;
+  --theme-form-button-padding-inline-icon-only-normal: 8px;
+  --theme-form-button-padding-inline-icon-only-medium: 10px;
+  --theme-form-button-padding-inline-icon-only-large: 12px;
+
+  --theme-form-button-padding-block-icon-only-x-small: 4px;
+  --theme-form-button-padding-block-icon-only-small: 4px;
+  --theme-form-button-padding-block-icon-only-normal: 6px;
+  --theme-form-button-padding-block-icon-only-medium: 8px;
+  --theme-form-button-padding-block-icon-only-large: 10px;
+
+  --theme-form-button-icon-size-x-small: 18px;
+  --theme-form-button-icon-size-small: 18px;
+  --theme-form-button-icon-size-normal: 18px;
+  --theme-form-button-icon-size-medium: 20px;
+  --theme-form-button-icon-size-large: 22px;
+
+  --theme-form-button-icon-gap-x-small: var(
+    --theme-form-button-padding-inline-x-small
+  );
+  --theme-form-button-icon-gap-small: var(
+    --theme-form-button-padding-inline-small
+  );
+  --theme-form-button-icon-gap-normal: var(
+    --theme-form-button-padding-inline-normal
+  );
+  --theme-form-button-icon-gap-medium: var(
+    --theme-form-button-padding-inline-medium
+  );
+  --theme-form-button-icon-gap-large: var(
+    --theme-form-button-padding-inline-large
+  );
 }

package/assets/styles/variables/colors/_orange.css

@@ -5,7 +5,7 @@
   --orange-3: #ffc078;
   --orange-4: #ffa94d;
   --orange-5: #ff922b;
-  --orange-6: #fd7e14;
+  --orange-6: #ff7400;
   --orange-7: #f76707;
   --orange-8: #e8590c;
   --orange-9: #d9480f;

package/assets/styles/variables/colors/_red.css

@@ -8,7 +8,7 @@
   --red-6: #fa5252;
   --red-7: #f03e3e;
   --red-8: #e03131;
-  --red-9: #c92a2a;
+  --red-9: #ff0b0b;
   --red-10: #b02525;
   --red-11: #962020;
   --red-12: #7d1a1a;

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

@@ -0,0 +1,25 @@
+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',
+  ],
+  theme: [
+    'primary',
+    'secondary',
+    'tertiary',
+    'ghost',
+    'error',
+    'success',
+    'warning',
+  ],
+};
+
+export default propValidators;

package/components/forms/c12/validation-patterns/en.json

@@ -24,7 +24,7 @@
     "hint": "password"
   },
   "emailaddress": {
-    "pattern": "^(?!@)((?!([\\.]))([\\w\\.\\-\\+']{1,}))?((@)([\\w\\-]{2,})+((\\.)([\\w]{2,}))+)$",
+    "pattern": "^(?!@)((?!([\\.]))([\\w\\.\\-\\+']{1,}))?((@)([\\w\\-]{1,})+((\\.)([\\w]{2,}))+)$",
     "minlength": 7,
     "maxlength": 255,
     "hint": "you@your-email.com"

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

@@ -0,0 +1,367 @@
+<template>
+  <button
+    :type="type"
+    :readonly
+    :aria-disabled="readonly"
+    :data-test-id="dataTestId"
+    class="btn"
+    :class="[`btn-${type}`, `theme-${theme}`, size, effectClass, styleClassPassthrough, { 'icon-only': isIconOnly }]"
+  >
+    <span v-if="useEffect && effect == 'fancy'" class="fancy"></span>
+    <template v-if="hasLeftContent && !isIconOnly">
+      <span class="btn-icon left" :class="[size]">
+        <slot name="left"></slot>
+      </span>
+    </template>
+    <span class="btn-text" :class="[size, weight, { 'sr-only': isIconOnly }]">{{ buttonText }}</span>
+    <template v-if="hasRightContent && !isIconOnly">
+      <span class="btn-icon right">
+        <slot name="right"></slot>
+      </span>
+    </template>
+    <template v-if="isIconOnly">
+      <span class="btn-icon icon-only" :class="[size]">
+        <slot name="iconOnly"></slot>
+      </span>
+    </template>
+  </button>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
+const props = defineProps({
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  weight: {
+    type: String as PropType<string>,
+    default: 'wght-400',
+    validator(value: string) {
+      return propValidators.weight.includes(value);
+    },
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  type: {
+    type: String as PropType<'submit' | 'button' | 'reset'>,
+    default: 'submit',
+    validator(value: string) {
+      return ['button', 'cancel', 'reset', 'submit'].includes(value);
+    },
+  },
+  buttonText: {
+    type: String,
+    required: true,
+  },
+  dataTestId: {
+    type: String,
+    default: '',
+  },
+  styleClassPassthrough: {
+    type: String,
+    default: '',
+  },
+  useEffect: {
+    type: Boolean,
+    default: false,
+  },
+  effect: {
+    type: String as PropType<string>,
+    default: 'fancy',
+    validator(value: string) {
+      return ['fancy', 'pulse'].includes(value);
+    },
+  },
+  isPending: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const type = toRef(() => props.type);
+const effectClass = computed(() => {
+  if (props.useEffect) {
+    return props.effect === 'fancy' ? '' : props.effect;
+  } else {
+    return '';
+  }
+});
+
+const slots = useSlots();
+const hasLeftContent = computed(() => slots.left !== undefined);
+const hasRightContent = computed(() => slots.right !== undefined);
+const isIconOnly = computed(() => slots.iconOnly !== undefined);
+</script>
+
+<style lang="css">
+.btn {
+  --_padding-block: var(--theme-form-button-padding-block-normal);
+  --_padding-inline: var(--theme-form-button-padding-inline-normal);
+  --_border-radius: 4px;
+  --_icon-gap: var(--theme-form-button-icon-gap-normal);
+
+  align-items: center;
+  display: flex;
+  gap: var(--_icon-gap);
+  justify-content: center;
+  border: none;
+  border-radius: var(--_border-radius);
+
+  font-family: var(--font-family);
+
+  padding-inline: var(--_padding-inline);
+  padding-block: var(--_padding-block);
+
+  transition: all 0.2s ease-in-out;
+
+  &:hover,
+  &:focus-visible {
+    cursor: pointer;
+  }
+
+  &[readonly] {
+    opacity: 0.5;
+    &:hover,
+    &:focus-visible {
+      cursor: not-allowed;
+    }
+  }
+
+  &.x-small {
+    &:not(.icon-only) {
+      --_padding-block: var(--theme-form-button-padding-block-x-small);
+      --_padding-inline: var(--theme-form-button-padding-inline-x-small);
+      --_icon-gap: var(--theme-form-button-icon-gap-x-small);
+    }
+    &.icon-only {
+      --_padding-block: var(--theme-form-button-padding-block-icon-only-x-small);
+      --_padding-inline: var(--theme-form-button-padding-inline-icon-only-x-small);
+    }
+  }
+
+  &.small {
+    &:not(.icon-only) {
+      --_padding-block: var(--theme-form-button-padding-block-x-small);
+      --_padding-inline: var(--theme-form-button-padding-inline-small);
+      --_icon-gap: var(--theme-form-button-icon-gap-small);
+    }
+    &.icon-only {
+      --_padding-block: var(--theme-form-button-padding-block-icon-only-small);
+      --_padding-inline: var(--theme-form-button-padding-inline-icon-only-small);
+    }
+  }
+  &.normal {
+    &:not(.icon-only) {
+      --_padding-block: var(--theme-form-button-padding-block-x-small);
+      --_padding-inline: var(--theme-form-button-padding-inline-normal);
+      --_icon-gap: var(--theme-form-button-icon-gap-normal);
+    }
+    &.icon-only {
+      --_padding-block: var(--theme-form-button-padding-block-icon-only-normal);
+      --_padding-inline: var(--theme-form-button-padding-inline-icon-only-normal);
+    }
+  }
+  &.medium {
+    &:not(.icon-only) {
+      --_padding-block: var(--theme-form-button-padding-block-x-small);
+      --_padding-inline: var(--theme-form-button-padding-inline-medium);
+      --_icon-gap: var(--theme-form-button-icon-gap-medium);
+    }
+    &.icon-only {
+      --_padding-block: var(--theme-form-button-padding-block-icon-only-medium);
+      --_padding-inline: var(--theme-form-button-padding-inline-icon-only-medium);
+    }
+  }
+
+  &.large {
+    &:not(.icon-only) {
+      --_padding-block: var(--theme-form-button-padding-block-x-small);
+      --_padding-inline: var(--theme-form-button-padding-inline-large);
+      --_icon-gap: var(--theme-form-button-icon-gap-large);
+    }
+    &.icon-only {
+      --_padding-block: var(--theme-form-button-padding-block-icon-only-large);
+      --_padding-inline: var(--theme-form-button-padding-inline-icon-only-large);
+    }
+  }
+
+  .btn-text {
+    &.small {
+      font-size: var(--theme-form-button-font-size-small);
+    }
+    &.normal {
+      font-size: var(--theme-form-button-font-size-normal);
+    }
+    &.medium {
+      font-size: var(--theme-form-button-font-size-medium);
+    }
+
+    &.large {
+      font-size: var(--theme-form-button-font-size-large);
+    }
+
+    &.sr-only {
+      position: absolute;
+      clip: rect(1px, 1px, 1px, 1px);
+      clip-path: inset(50%);
+      height: 1px;
+      width: 1px;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+
+  .btn-icon {
+    display: flex;
+    .icon {
+      aspect-ratio: 1;
+      display: inline-block;
+    }
+
+    &.x-small {
+      .icon {
+        height: var(--theme-form-button-icon-size-small);
+        width: var(--theme-form-button-icon-size-small);
+      }
+    }
+    &.small {
+      .icon {
+        height: var(--theme-form-button-icon-size-small);
+        width: var(--theme-form-button-icon-size-small);
+      }
+    }
+    &.normal {
+      .icon {
+        height: var(--theme-form-button-icon-size-normal);
+        width: var(--theme-form-button-icon-size-normal);
+      }
+    }
+    &.medium {
+      .icon {
+        height: var(--theme-form-button-icon-size-medium);
+        width: var(--theme-form-button-icon-size-medium);
+      }
+    }
+
+    &.large {
+      .icon {
+        height: var(--theme-form-button-icon-size-large);
+        width: var(--theme-form-button-icon-size-large);
+      }
+    }
+  }
+
+  --_border-width: var(--input-border-width-default);
+
+  /*
+  * Initial theme (primary)
+  **/
+  --_theme-form-border: var(--theme-form-primary-border);
+  --_theme-form-border-hover: var(--theme-form-primary-border-hover);
+  --_theme-form-outline: var(--theme-form-primary-outline);
+  --_theme-form-outline-hover: var(--theme-form-primary-outline-hover);
+  --_theme-form-bg: var(--theme-form-primary-bg);
+  --_theme-form-bg-hover: var(--theme-form-primary-bg-hover);
+  --_theme-form-color: var(--theme-form-primary-color);
+  --_theme-form-color-hover: var(--theme-form-primary-color-hover);
+
+  background-color: var(--_theme-form-bg);
+  border: var(--_border-width) solid var(--_theme-form-border);
+  color: var(--_theme-form-color);
+  outline: 1px solid var(--_theme-form-outline);
+
+  /*
+  * Themes (alternate)
+  **/
+  &.theme-secondary {
+    --_theme-form-border: var(--theme-form-secondary-border);
+    --_theme-form-border-hover: var(--theme-form-secondary-border-hover);
+    --_theme-form-outline: var(--theme-form-secondary-outline);
+    --_theme-form-outline-hover: var(--theme-form-secondary-outline-hover);
+    --_theme-form-bg: var(--theme-form-secondary-bg);
+    --_theme-form-bg-hover: var(--theme-form-secondary-bg-hover);
+    --_theme-form-color: var(--theme-form-secondary-color);
+    --_theme-form-color-hover: var(--theme-form-secondary-color-hover);
+  }
+
+  &.theme-tertiary {
+    --_theme-form-border: var(--theme-form-tertiary-border);
+    --_theme-form-border-hover: var(--theme-form-tertiary-border-hover);
+    --_theme-form-outline: var(--theme-form-tertiary-outline);
+    --_theme-form-outline-hover: var(--theme-form-tertiary-outline-hover);
+    --_theme-form-bg: var(--theme-form-tertiary-bg);
+    --_theme-form-bg-hover: var(--theme-form-tertiary-bg-hover);
+    --_theme-form-color: var(--theme-form-tertiary-color);
+    --_theme-form-color-hover: var(--theme-form-tertiary-color-hover);
+  }
+
+  &.theme-warning {
+    --_theme-form-border: var(--theme-form-warning-border);
+    --_theme-form-border-hover: var(--theme-form-warning-border-hover);
+    --_theme-form-outline: var(--theme-form-warning-outline);
+    --_theme-form-outline-hover: var(--theme-form-warning-outline-hover);
+    --_theme-form-bg: var(--theme-form-warning-bg);
+    --_theme-form-bg-hover: var(--theme-form-warning-bg-hover);
+    --_theme-form-color: var(--theme-form-warning-color);
+    --_theme-form-color-hover: var(--theme-form-warning-color-hover);
+  }
+
+  &.theme-error {
+    --_theme-form-border: var(--theme-form-error-border);
+    --_theme-form-border-hover: var(--theme-form-error-border-hover);
+    --_theme-form-outline: var(--theme-form-error-outline);
+    --_theme-form-outline-hover: var(--theme-form-error-outline-hover);
+    --_theme-form-bg: var(--theme-form-error-bg);
+    --_theme-form-bg-hover: var(--theme-form-error-bg-hover);
+    --_theme-form-color: var(--theme-form-error-color);
+    --_theme-form-color-hover: var(--theme-form-error-color-hover);
+  }
+
+  &.theme-success {
+    --_theme-form-border: var(--theme-form-success-border);
+    --_theme-form-border-hover: var(--theme-form-success-border-hover);
+    --_theme-form-outline: var(--theme-form-success-outline);
+    --_theme-form-outline-hover: var(--theme-form-success-outline-hover);
+    --_theme-form-bg: var(--theme-form-success-bg);
+    --_theme-form-bg-hover: var(--theme-form-success-bg-hover);
+    --_theme-form-color: var(--theme-form-success-color);
+    --_theme-form-color-hover: var(--theme-form-success-color-hover);
+  }
+
+  &.theme-ghost {
+    --_theme-form-border: var(--theme-form-ghost-border);
+    --_theme-form-border-hover: var(--theme-form-ghost-border-hover);
+    --_theme-form-outline: var(--theme-form-ghost-outline);
+    --_theme-form-outline-hover: var(--theme-form-ghost-outline-hover);
+    --_theme-form-bg: var(--theme-form-ghost-bg);
+    --_theme-form-bg-hover: var(--theme-form-ghost-bg-hover);
+    --_theme-form-color: var(--theme-form-ghost-color);
+    --_theme-form-color-hover: var(--theme-form-ghost-color-hover);
+  }
+
+  /*
+  * States
+  **/
+  &:hover,
+  &:focus-visible {
+    --_theme-form-color: var(--_theme-form-color-hover);
+    --_theme-form-bg: var(--_theme-form-bg-hover);
+    --_theme-form-border: var(--_theme-form-border-hover);
+    --_theme-form-outline: var(--_theme-form-outline-hover);
+  }
+}
+</style>

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

@@ -0,0 +1,78 @@
+<template>
+  <InputButtonCore
+    type="submit"
+    :use-effect="useEffect"
+    :isPending="isPending"
+    :readonly
+    :effect="effect"
+    :data-test-id="dataTestId"
+    :size
+    :weight
+    :button-text="buttonText"
+    :style-class-passthrough="styleClassPassthrough"
+    :theme
+  >
+    <template #left>
+      <Icon name="material-symbols:check-circle-outline" class="icon" />
+    </template>
+  </InputButtonCore>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+
+const props = defineProps({
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  weight: {
+    type: String as PropType<string>,
+    default: 'wght-400',
+    validator(value: string) {
+      return propValidators.weight.includes(value);
+    },
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  useEffect: {
+    type: Boolean,
+    default: false,
+  },
+  effect: {
+    type: String as PropType<string>,
+    default: 'fancy',
+    validator(value: string) {
+      return ['fancy', 'pulse'].includes(value);
+    },
+  },
+  buttonText: {
+    type: String,
+    required: true,
+  },
+  dataTestId: {
+    type: String,
+    default: '',
+  },
+  styleClassPassthrough: {
+    type: String,
+    default: '',
+  },
+  isPending: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>