srcdev-nuxt-forms 0.2.0 → 1.0.1

package/components/forms/input-radio/variants/MultipleRadio.vue

@@ -1,183 +0,0 @@
-<template>
-  <fieldset class="multiple-radio-fieldset" :class="[`theme-${theme}`, { error: fieldHasError }]" :aria-required="required" :aria-invalid="fieldHasError" role="radiogroup">
-    <legend :class="[{ 'has-description': hasDescription }]">
-      {{ legend }}
-      <span v-if="required">&nbsp;(Required)</span>
-    </legend>
-    <template v-if="hasDescription">
-      <slot name="description"></slot>
-    </template>
-    <InputError :errorMessaging :fieldHasError :id="name" :isDetached="true" />
-    <div class="multiple-radio-items" :class="[optionsLayout]">
-      <template v-for="item in fieldData.data" :key="item.id">
-        <InputRadioWithLabel
-          :id="item.value"
-          :name
-          :required
-          :c12="{
-            label: item.label,
-            placeholder: 'eg. Type something here',
-            errorMessage: 'Please accept our terms and conditions',
-          }"
-          v-model="modelValue"
-          :true-value="item.value"
-          :theme
-          :size
-          :radioAppearance
-        />
-      </template>
-    </div>
-  </fieldset>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
-import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
-
-import type { InpuTextC12, IFormFieldC12, IFormData } from '@/types/types.forms';
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  legend: {
-    type: String,
-    required: true,
-  },
-  required: {
-    type: Boolean,
-    value: false,
-  },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
-    required: true,
-  },
-  multipleOptions: {
-    type: Boolean,
-    default: false,
-  },
-  styleClassPassthrough: {
-    type: String,
-    default: '',
-  },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
-  },
-  size: {
-    type: String as PropType<string>,
-    default: 'medium',
-    validator(value: string) {
-      return propValidators.size.includes(value);
-    },
-  },
-  optionsLayout: {
-    type: String as PropType<string>,
-    default: 'equal-widths',
-    validator(value: string) {
-      return propValidators.optionsLayout.includes(value);
-    },
-  },
-  equalCols: {
-    type: Boolean,
-    default: true,
-  },
-  radioAppearance: {
-    type: String as PropType<string>,
-    default: null,
-    validator(value: string) {
-      return propValidators.radioAppearance.includes(value);
-    },
-  },
-});
-
-const slots = useSlots();
-const hasDescription = computed(() => slots.description !== undefined);
-
-const modelValue = defineModel() as Ref<IFormData>;
-const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
-
-const errorMessaging = computed(() => {
-  if (
-    typeof modelValue.value!.formFieldsC12[props.name] !== 'undefined' &&
-    modelValue.value!.formFieldsC12[props.name].useCustomError &&
-    modelValue.value.data[props.name] === modelValue.value.formFieldsC12[props.name].previousValue
-  ) {
-    return modelValue.value.formFieldsC12[props.name]?.customErrors || [];
-  } else {
-    return props.c12.errorMessage;
-  }
-});
-
-// const isArray = Array.isArray(modelValue.value.data[props.name]);
-// const formFieldC12 = <IFormFieldC12>{
-//   label: props.c12.label,
-//   placeholder: props.c12.placeholder,
-//   errorMessage: props.c12.errorMessage,
-//   useCustomError: false,
-//   customErrors: {},
-//   isValid: false,
-//   isDirty: false,
-//   type: isArray ? 'array' : 'string',
-//   previousValue: null,
-// };
-// modelValue.value.formFieldsC12[props.name] = formFieldC12;
-
-const fieldHasError = computed(() => {
-  return modelValue.value!.submitAttempted && !modelValue.value!.formFieldsC12[props.name].isValid;
-});
-</script>
-
-<style lang="css">
-.multiple-radio-fieldset {
-  --_form-theme: var(--theme-form-primary);
-
-  margin: 0;
-  padding: 0;
-  border: 0;
-
-  &.theme-secondary {
-    --_form-theme: var(--theme-form-secondary);
-  }
-
-  &.error {
-    --_form-theme: var(--theme-error);
-  }
-
-  legend {
-    color: var(--_form-theme);
-
-    font-family: var(--font-family);
-    font-size: 18px;
-    font-weight: 500;
-
-    &.has-description {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.multiple-radio-items {
-  display: flex;
-  gap: 18px;
-  margin-top: 12px;
-
-  &.inline {
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-
-  &.block {
-    flex-direction: column;
-  }
-
-  &.equal-widths {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-  }
-}
-</style>

package/components/forms/input-radio/variants/SingleRadio.vue

@@ -1,131 +0,0 @@
-<template>
-  <fieldset class="single-radio-fieldset" :class="[`theme-${theme}`, { error: fieldHasError }]">
-    <legend :class="[{ 'has-description': hasDescription }]">{{ legend }}</legend>
-    <template v-if="hasDescription">
-      <slot name="description"></slot>
-    </template>
-    <InputError :errorMessaging :fieldHasError :id="name" :isDetached="true" />
-    <InputRadioWithLabel :id :name :required :c12 v-model="modelValue" :theme :size :radioAppearance />
-  </fieldset>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
-
-import type { InpuTextC12, IFormFieldC12, IFormData } from '@/types/types.forms';
-// import { validationConfig } from '@/components/forms/c12/validation-patterns';
-
-const props = defineProps({
-  id: {
-    // type: String as PropType<string>,
-    type: String,
-    required: true,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  legend: {
-    type: String,
-    required: true,
-  },
-  required: {
-    type: Boolean,
-    value: false,
-  },
-  c12: {
-    type: Object as PropType<InpuTextC12>,
-    required: true,
-  },
-  trueValue: {
-    type: [String, Number, Boolean],
-    default: true,
-  },
-  falseValue: {
-    type: [String, Number, Boolean],
-    default: false,
-  },
-  // multipleOptions: {
-  //   type: Boolean,
-  //   default: false,
-  // },
-  styleClassPassthrough: {
-    type: String,
-    default: '',
-  },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
-  },
-  size: {
-    type: String as PropType<string>,
-    default: 'medium',
-    validator(value: string) {
-      return propValidators.size.includes(value);
-    },
-  },
-  radioAppearance: {
-    type: String as PropType<string>,
-    default: null,
-    validator(value: string) {
-      return propValidators.radioAppearance.includes(value);
-    },
-  },
-});
-
-const slots = useSlots();
-const hasDescription = computed(() => slots.description !== undefined);
-
-const modelValue = defineModel() as Ref<IFormData>;
-const name = computed(() => {
-  return props.name !== null ? props.name : props.id;
-});
-const fieldHasError = computed(() => {
-  return modelValue.value!.submitAttempted && !modelValue.value!.formFieldsC12[props.name].isValid;
-});
-
-const errorMessaging = computed(() => {
-  if (
-    typeof modelValue.value!.formFieldsC12[props.name] !== 'undefined' &&
-    modelValue.value!.formFieldsC12[props.name].useCustomError &&
-    modelValue.value.data[props.name] === modelValue.value.formFieldsC12[props.name].previousValue
-  ) {
-    return modelValue.value.formFieldsC12[props.name]?.customErrors || [];
-  } else {
-    return props.c12.errorMessage;
-  }
-});
-</script>
-
-<style lang="css">
-.single-radio-fieldset {
-  --_form-theme: var(--theme-form-primary);
-
-  margin: 0;
-  padding: 0;
-  border: 0;
-
-  &.theme-secondary {
-    --_form-theme: var(--theme-form-secondary);
-  }
-
-  &.error {
-    --_form-theme: var(--theme-error);
-  }
-
-  legend {
-    color: var(--_form-theme);
-    font-family: var(--font-family);
-    font-size: 18px;
-    font-weight: 500;
-    margin-bottom: 12px;
-
-    &.has-description {
-      margin-bottom: 0;
-    }
-  }
-}
-</style>

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

@@ -1,72 +0,0 @@
-<template>
-  <InputTextMaterialCore type="email" :id :name :required :c12 :styleClassPassthrough :theme v-model="modelValue">
-    <template #input>
-      <InputTextCore :id :name type="email" :validation :required v-model="modelValue" :c12 :style-class-passthrough="styleClassPassthrough">
-        <template #left>
-          <Icon name="radix-icons:envelope-closed" class="icon" />
-        </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>;
-</script>

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

@@ -1,114 +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
-            type="button"
-            @click.stop.prevent="toggleDisplayPassword"
-            :is-pending="false"
-            :buttonText
-            theme="ghost"
-            size="x-small"
-            @focusin="updateFocus(name, true)"
-            @focusout="updateFocus(name, false)"
-          >
-            <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 updateFocus = (name: string, isFocused: boolean) => {
-  modelValue.value.focusedField = isFocused ? name : '';
-};
-
-const displayPassword = ref(false);
-
-const type = computed(() => {
-  // return displayPassword.value && !modelValue.value.isPending ? "text" : "password";
-  return displayPassword.value ? 'text' : 'password';
-});
-
-const buttonText = computed(() => {
-  return displayPassword.value ? 'Hide password' : 'Show password';
-});
-
-const toggleDisplayPassword = () => {
-  displayPassword.value = !displayPassword.value;
-};
-</script>
-
-<style lang="css" scoped>
-/* :deep(.input-text-core:not(.active)),
-:deep(.input-text-core:not(.dirty)) {
-  + .right-content {
-    display: none !important;
-  }
-} */
-</style>

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

@@ -1,68 +0,0 @@
-<template>
-  <InputTextMaterialCore type="text" :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);
-    },
-  },
-  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>