srcdev-nuxt-forms 0.1.0 → 1.0.0

package/components/forms/input-text/variants/material/InputPasswordMaterial.vue

@@ -1,88 +0,0 @@
-<template>
-  <InputTextMaterialCore :type :id :name :required :c12 :styleClassPassthrough :theme v-model="modelValue">
-    <template #input>
-      <InputTextCore :id :name :type :validation :required v-model="modelValue" :c12 :style-class-passthrough="styleClassPassthrough">
-        <template #right>
-          <InputButtonCore @click.stop.prevent="toggleDisplayPassword" :is-pending="false" button-text="Submit" theme="ghost" size="x-small">
-            <template #iconOnly>
-              <Icon v-if="displayPassword" name="radix-icons:eye-none" class="icon" />
-              <Icon v-else name="radix-icons:eye-open" class="icon" />
-            </template>
-          </InputButtonCore>
-        </template>
-      </InputTextCore>
-    </template>
-  </InputTextMaterialCore>
-</template>
-
-<script setup lang="ts">
-import type { InpuTextC12, IFormData } from '@/types/types.forms';
-
-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);
-    },
-  },
-  id: {
-    // type: String as PropType<string>,
-    type: String,
-    required: true,
-  },
-  name: {
-    type: String,
-    default: null,
-  },
-  validation: {
-    type: String,
-    default: '',
-  },
-  required: {
-    type: Boolean,
-    value: false,
-  },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
-    required: true,
-  },
-  styleClassPassthrough: {
-    type: String,
-    default: '',
-  },
-});
-
-const name = computed(() => {
-  return props.name !== null ? props.name : props.id;
-});
-
-const modelValue = defineModel() as Ref<IFormData>;
-
-const displayPassword = ref(false);
-
-const type = computed(() => {
-  // return displayPassword.value && !modelValue.value.isPending ? "text" : "password";
-  return displayPassword.value ? 'text' : 'password';
-});
-
-const toggleDisplayPassword = () => {
-  displayPassword.value = !displayPassword.value;
-};
-</script>

package/components/forms/input-text/variants/material/InputTextMaterial.vue

@@ -1,75 +0,0 @@
-<template>
-  <InputTextMaterialCore :type :id :name :required :c12 :styleClassPassthrough :theme v-model="modelValue">
-    <template #input>
-      <InputTextCore :id :name type="text" :validation :required v-model="modelValue" :c12 :style-class-passthrough="styleClassPassthrough" />
-    </template>
-  </InputTextMaterialCore>
-</template>
-
-<script setup lang="ts">
-import type { InpuTextC12, IFormData } from '@/types/types.forms';
-
-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<"text" | "password" | "tel" | "number" | "email" | "url">, // This breaks props setup in unit tests
-    type: String,
-    validator(value: string) {
-      return ['text', 'password', 'tel', 'number', 'email', 'url'].includes(value);
-    },
-  },
-  id: {
-    // type: String as PropType<string>,
-    type: String,
-    required: true,
-  },
-  name: {
-    type: String,
-    default: null,
-  },
-  validation: {
-    type: String,
-    default: '',
-  },
-  required: {
-    type: Boolean,
-    value: false,
-  },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
-    required: true,
-  },
-  styleClassPassthrough: {
-    type: String,
-    default: '',
-  },
-});
-
-const name = computed(() => {
-  return props.name !== null ? props.name : props.id;
-});
-
-const modelValue = defineModel() as Ref<IFormData>;
-</script>

package/components/forms/input-text/variants/material/InputTextMaterialCore.vue

@@ -1,258 +0,0 @@
-<template>
-  <div class="input-text-material" :class="[`theme-${theme}`, { error: fieldHasError }, { compact: compact }]">
-    <label class="label" :class="[{ active: isFocused }, { error: fieldHasError }, { dirty: isDirty }, { compact: compact }]" :for="id">
-      <span>{{ labelText }}</span>
-    </label>
-    <div class="input-text-container" :class="[{ active: isFocused }, { error: fieldHasError }, { dirty: isDirty }, { compact: compact }]">
-      <slot name="input"></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { InpuTextC12, IFormData } from '@/types/types.forms';
-
-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,
-    validator(value: string) {
-      return ['text', 'password', 'tel', 'number', 'email', 'url'].includes(value);
-    },
-  },
-  id: {
-    type: String,
-    required: true,
-  },
-  name: {
-    type: String,
-    default: null,
-  },
-  required: {
-    type: Boolean,
-    value: false,
-  },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
-    required: true,
-  },
-  styleClassPassthrough: {
-    type: String,
-    default: '',
-  },
-  compact: {
-    type: Boolean,
-    value: false,
-  },
-});
-
-const labelText = computed(() => {
-  return fieldHasError.value ? errorMessage.value : props.c12.label;
-});
-
-const modelValue = defineModel() as Ref<IFormData>;
-
-const isFocused = computed(() => {
-  return modelValue.value.focusedField == props.name;
-});
-
-const isDirty = computed(() => {
-  return modelValue.value.dirtyFields[props.name];
-});
-
-const { errorMessage, setDefaultError, fieldHasError } = useErrorMessage(props.name, modelValue);
-setDefaultError(props.c12.errorMessage);
-</script>
-
-<style lang="css">
-.input-text-material {
-  input {
-    background-color: transparent;
-    line-height: var(--line-height);
-
-    &:focus {
-      outline: none;
-      box-shadow: none;
-      border: none;
-    }
-
-    &:-internal-autofill-selected,
-    &:autofill {
-      background-color: transparent !important;
-    }
-  }
-
-  label {
-    margin: initial;
-    line-height: var(--line-height);
-    padding: initial;
-  }
-
-  --_gutter: 12px;
-  --_form-theme: var(--theme-form-primary);
-  --_border-width: var(--input-border-width-default);
-
-  display: grid;
-  border-radius: 2px;
-  border: var(--_border-width) solid var(--_form-theme);
-
-  margin-bottom: 20px;
-  overflow: hidden;
-
-  &.theme-secondary {
-    --_form-theme: var(--theme-form-secondary);
-  }
-
-  &:focus-within {
-    border: var(--_border-width) solid var(--_form-theme);
-    outline: var(--_border-width) solid hsl(from var(--_form-theme) h s 50%);
-    background-color: hsl(from var(--_form-theme) h s 95%);
-  }
-
-  &.error {
-    /* outline: calc(var(--_border-width) * 2) solid var(--theme-error); */
-
-    border: var(--_border-width) solid var(--theme-error);
-    outline: var(--_border-width) solid hsl(from var(--theme-error) h s 75%);
-
-    background-color: hsl(from var(--theme-error) h s 95%);
-  }
-
-  .label {
-    grid-row: 1;
-    grid-column: 1;
-
-    font-family: var(--font-family);
-    font-size: 20px;
-    font-weight: 700;
-    padding: var(--_gutter);
-    transform: translateY(12px);
-    transition: all linear 0.2s;
-    background-color: transparent;
-    z-index: 2;
-
-    &.active,
-    &.dirty,
-    &.error {
-      font-size: 16px;
-      transform: translateY(-2px);
-      z-index: auto;
-    }
-  }
-
-  .input-text-container {
-    display: grid;
-    grid-row: 1;
-    grid-column: 1;
-    margin-top: 2rem;
-    background-color: transparent;
-    opacity: 0;
-    transition: opacity linear 0.2s;
-
-    &.active,
-    &.dirty,
-    &.error {
-      opacity: 1;
-    }
-
-    .input-text {
-      font-family: var(--font-family);
-      border: 0px solid green;
-      padding: calc(var(--_gutter) / 2) var(--_gutter);
-      font-size: var(--font-size);
-      margin: 0;
-      /* opacity: 0;
-      transition: opacity linear 0.2s;
-
-      &.active,
-      &.dirty {
-        opacity: 1;
-      } */
-      /*
-      &::placeholder,
-      &:-ms-input-placeholder,
-      &::-moz-placeholder, */
-      &::-webkit-input-placeholder {
-        font-family: var(--font-family);
-        /* color: var(--gray-5); */
-        color: hsl(from var(--_form-theme) h s 50%);
-        font-size: var(--font-size);
-        font-style: italic;
-        font-weight: 500;
-      }
-    }
-  }
-}
-
-/*
-* Compact UI
-**/
-
-.input-text-material {
-  &.compact {
-    overflow: initial;
-
-    &:focus-within {
-      background-color: initial;
-    }
-
-    &.error {
-      background-color: initial;
-    }
-  }
-
-  .label {
-    &.compact {
-      align-content: center;
-      font-size: 16px;
-      padding: 0 12px;
-      transform: translateY(0);
-
-      span {
-        padding: 0 8px;
-      }
-
-      &.active,
-      &.dirty,
-      &.error {
-        font-size: 16px;
-        font-weight: 500;
-        transform: translateY(-26px);
-        z-index: auto;
-
-        span {
-          background-color: white;
-        }
-      }
-    }
-  }
-
-  .input-text-container {
-    &.compact {
-      margin: 10px 8px 6px 8px;
-    }
-  }
-}
-</style>

package/composables/useUpdateStyleClassPassthrough.ts

@@ -1,29 +0,0 @@
-export const useUpdateStyleClassPassthrough = (classes: string) => {
-  const styleClassPassthroughRef = ref(classes);
-
-  function updateClasses(add: boolean, cssClass: string) {
-    let classesArray = classes.split(' ');
-
-    if (add && !classesArray.includes(cssClass)) {
-      classesArray.push(cssClass);
-    } else if (!add && classesArray.includes(cssClass)) {
-      classesArray = classesArray.filter((className) => className !== cssClass);
-    }
-
-    // if (classesArray.includes(cssClass)) {
-    //   // Remove the value if it's already in the array
-    //   classesArray = classesArray.filter(className => className !== cssClass);
-    // } else {
-    //   // Add the value if it's not in the array
-    //   classesArray.push(cssClass);
-    // }
-
-    // Join the array back into a string and assign it back
-    styleClassPassthroughRef.value = classesArray.join(' ');
-  }
-
-  return {
-    styleClassPassthroughRef,
-    updateClasses,
-  };
-};

package/pages/forms/examples/material/text-fields-compact.vue

@@ -1,136 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <div>
-          <h1>Material UI text fields (compact)</h1>
-          <p>Example test fields in "compact" material UI</p>
-
-          <FormWrapper width="medium">
-            <template #default>
-              <form @submit.prevent="submitForm">
-                <FormField width="wide" :has-gutter="true">
-                  <template #default>
-                    <InputEmailMaterial
-                      id="emailAddress"
-                      name="emailAddress"
-                      validation="emailaddress"
-                      :required="true"
-                      :c12="{
-                        label: 'Your Email Address',
-                        placeholder: 'eg. joe@example.com',
-                        errorMessage: 'Please enter a valid email address',
-                      }"
-                      v-model="formData"
-                      theme="secondary"
-                      :compact
-                    />
-                  </template>
-                </FormField>
-
-                <FormField width="wide" :has-gutter="true">
-                  <template #default>
-                    <InputTextMaterial
-                      id="username"
-                      name="username"
-                      validation="username"
-                      :required="true"
-                      :c12="{
-                        label: 'Your Username',
-                        placeholder: 'eg. YourUserName',
-                        errorMessage: 'Please enter a valid username',
-                      }"
-                      v-model="formData"
-                      theme="secondary"
-                      :compact
-                    />
-                  </template>
-                </FormField>
-
-                <FormField width="wide" :has-gutter="true">
-                  <template #default>
-                    <InputPasswordMaterial
-                      id="password"
-                      name="password"
-                      validation="password"
-                      :required="true"
-                      :c12="{
-                        label: 'Password',
-                        placeholder: 'eg. Your5illYPa55w0rd',
-                        errorMessage: 'Please enter a valid password',
-                      }"
-                      v-model="formData"
-                      theme="secondary"
-                      :compact
-                    />
-                  </template>
-                </FormField>
-
-                <FormField width="wide" :has-gutter="true">
-                  <template #default>
-                    <InputButtonSubmit @click.stop.prevent="submitForm" :is-pending="false" :readonly="submitDisabled" button-text="Submit" theme="secondary" size="medium" />
-                  </template>
-                </FormField>
-              </form>
-            </template>
-          </FormWrapper>
-        </div>
-        <ClientOnly>
-          <p>Client only content</p>
-          <pre>
-            {{ formData }}
-          </pre>
-        </ClientOnly>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IFieldsInitialState, IOptionsConfig } from '@/types/types.forms';
-
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: 'Homepage',
-  meta: [{ name: 'description', content: 'Homepage' }],
-  bodyAttrs: {
-    class: '',
-  },
-});
-
-const compact = ref(true);
-
-/*
- * Setup forms
- */
-const fieldsInitialState = ref<IFieldsInitialState>({
-  emailAddress: '',
-  username: '',
-  password: '',
-});
-
-// Setup formData
-const { formData, getErrorCount, updateCustomErrors, resetForm, formIsValid, submitDisabled } = useFormControl(fieldsInitialState);
-
-const submitForm = async () => {
-  await getErrorCount(true);
-
-  if (formIsValid.value) {
-    formData.value.isPending = true;
-    console.log('Form is good - post it!');
-    // await useSleep(2000);
-    // formData.value.isPending = false;
-  } else {
-    console.warn('Form has errors');
-  }
-};
-</script>
-
-<style lang="css">
-p {
-  color: initial;
-}
-</style>