npm - srcdev-nuxt-forms - Versions diffs - 6.2.1 → 7.0.0 - Mend

srcdev-nuxt-forms 6.2.1 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/app/components/forms/input-button/InputButtonCore.vue CHANGED Viewed

@@ -4,9 +4,10 @@
     :readonly
     :aria-disabled="readonly"
     :data-testid
+    :data-theme="theme"
     :data-size="size"
     class="input-button-core"
-    :class="[`btn-${type}`, effectClass, elementClasses, { 'icon-only': slots.iconOnly }, theme]"
+    :class="[`btn-${type}`, effectClass, elementClasses, { 'icon-only': slots.iconOnly }]"
   >
     <span v-if="useEffect && effect == 'fancy'" class="fancy"></span>
     <template v-if="slots.left && !slots.iconOnly">

package/app/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue CHANGED Viewed

@@ -2,8 +2,9 @@
   <label
     :for="id"
     class="input-checkbox-radio-options-button"
+    :data-theme="formTheme"
     :data-size="size"
-    :class="[size, elementClasses, optionsLayout, { error: fieldHasError }, { lozenge: displayAsLozenge }, formTheme]"
+    :class="[size, elementClasses, optionsLayout, { error: fieldHasError }, { lozenge: displayAsLozenge }]"
   >
     <InputCheckboxRadioCore
       :isButton="true"

package/app/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue CHANGED Viewed

@@ -1,6 +1,8 @@
 <template>
   <div
     class="input-checkbox-radio-wrapper"
+    :data-theme="formTheme"
+    :data-size="size"
     :class="[
       type,
       size,
@@ -8,7 +10,6 @@
       { error: fieldHasError },
       { button: isButton },
       { 'display-as-disc': displayAsDisc },
-      formTheme,
     ]"
   >
     <div class="input-checked-icon-slot">

package/app/components/forms/input-number/InputNumberCore.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-number-wrapper" :class="formTheme" :data-size="size">
+  <div class="input-number-wrapper" :data-theme="formTheme" :data-size="size">
     <div v-if="slots.left" class="slot left">
       <slot name="left"></slot>
     </div>

package/app/components/forms/input-number/variants/InputNumberDefault.vue CHANGED Viewed

@@ -1,8 +1,9 @@
 <template>
   <div
     class="input-number-with-label"
+    :data-theme="formTheme"
     :data-size="size"
-    :class="[elementClasses, `theme-${theme}`, { error: fieldHasError }, formTheme]"
+    :class="[elementClasses, `theme-${theme}`, { error: fieldHasError }]"
   >
     <InputLabel
       :for="id"

package/app/components/forms/input-range/InputRangeCore.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-range-wrapper" :class="formTheme">
+  <div class="input-range-wrapper" :data-theme="formTheme">
     <div v-if="slots.left" class="slot left">
       <slot name="left"></slot>
     </div>

package/app/components/forms/input-range/variants/InputRangeDefault.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-range-with-label" :class="[elementClasses, formTheme, { error: fieldHasError }]">
+  <div class="input-range-with-label" :data-theme="formTheme" :class="[elementClasses, { error: fieldHasError }]">
     <InputLabel
       :for="id"
       :id

package/app/components/forms/input-range-fancy/InputRangeFancyWithLabel.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-range-fancy-with-label" :class="[elementClasses, formTheme, { error: fieldHasError }]">
+  <div class="input-range-fancy-with-label" :data-theme="formTheme" :class="[elementClasses, { error: fieldHasError }]">
     <label class="input-range-fancy-label body-normal-bold" :for="id">{{ label }}</label>
     <template v-if="slots.description">
       <slot name="description"></slot>

package/app/components/forms/input-select/InputSelectCore.vue CHANGED Viewed

@@ -1,8 +1,9 @@
 <template>
   <div
     class="input-select-wrapper"
+    :data-theme="formTheme"
     :data-size="size"
-    :class="[inputVariant, size, { dirty: isDirty }, { active: isActive }, formTheme, { error: fieldHasError }]"
+    :class="[inputVariant, size, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]"
   >
     <select v-model="modelValue" class="input-select-core" :name :id :title>
       <option v-if="placeholder" value="" readonly :selected="!modelValue" class="input-select-core-option placeholder">
@@ -129,10 +130,8 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>
     }
     &::picker(select) {
-      transition:
-        display allow-discrete var(--theme-form-transition-duration),
-        opacity var(--theme-form-transition-duration),
-        overlay var(--theme-form-transition-duration) allow-discrete;
+      transition: display allow-discrete var(--theme-form-transition-duration),
+        opacity var(--theme-form-transition-duration), overlay var(--theme-form-transition-duration) allow-discrete;
     }
     &:not(:open)::picker(select) {

package/app/components/forms/input-select/variants/InputSelectWithLabel.vue CHANGED Viewed

@@ -2,8 +2,10 @@
   <div>
     <div
       class="input-select-with-label"
-      :class="[inputVariant, formTheme, size, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]"
+      :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]"
       :data-testid
+      :data-theme="formTheme"
+      :data-size="size"
     >
       <InputLabel
         :for="id"

package/app/components/forms/input-text/InputTextCore.vue CHANGED Viewed

@@ -1,11 +1,11 @@
 <template>
   <div
     class="input-text-wrapper"
+    :data-theme="formTheme"
+    :data-size="size"
     :data-inputmode="inputmode"
     :class="[
       inputVariant,
-      formTheme,
-      size,
       { dirty: isDirty },
       { active: isActive },
       { error: fieldHasError },

package/app/components/forms/input-text/variants/InputTextAsNumberWithLabel.vue CHANGED Viewed

@@ -1,7 +1,8 @@
 <template>
   <div
     class="input-text-with-label"
-    :class="[inputVariant, formTheme, elementClasses, { dirty: isDirty }, { active: isActive }]"
+    :data-theme="formTheme"
+    :class="[inputVariant, elementClasses, { dirty: isDirty }, { active: isActive }]"
   >
     <InputLabel
       :for="id"

package/app/components/forms/input-text/variants/InputTextWithLabel.vue CHANGED Viewed

@@ -2,7 +2,8 @@
   <div>
     <div
       class="input-text-with-label"
-      :class="[elementClasses, inputVariant, formTheme, { dirty: isDirty }, { active: isActive }]"
+      :data-theme="formTheme"
+      :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]"
     >
       <InputLabel
         :for="id"

package/app/components/forms/input-textarea/InputTextareaCore.vue CHANGED Viewed

@@ -1,10 +1,10 @@
 <template>
   <div
     class="input-textarea-wrapper"
+    :data-theme="formTheme"
+    :data-size="size"
     :class="[
       inputVariant,
-      formTheme,
-      size,
       { dirty: isDirty },
       { active: isActive },
       { error: fieldHasError },

package/app/components/forms/input-textarea/variants/InputTextareaWithLabel.vue CHANGED Viewed

@@ -2,7 +2,8 @@
   <div>
     <div
       class="input-textarea-with-label"
-      :class="[elementClasses, formTheme, inputVariant, { dirty: isDirty }, { active: isActive }]"
+      :data-theme="formTheme"
+      :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]"
     >
       <InputLabel
         :for="id"

package/app/components/forms/toggle-switch/ToggleSwitchCore.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <template>
-  <div class="toggle-switch-core" :class="[elementClasses, formTheme, size]">
+  <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-theme="formTheme">
     <div
       @click="toggleSwitchValue"
       class="toggle-switch-wrapper"

package/app/components/forms/toggle-switch/ToggleSwitchCoreOld.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <template>
-  <div class="toggle-switch-core" :class="[elementClasses, formTheme, size]">
+  <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-theme="formTheme">
     <div @click="toggleSwitchValue" class="toggle-switch-input" :class="[{ round }]" :for="inputId">
       <input
         type="checkbox"

package/app/components/forms/toggle-switch/variants/ToggleSwitchWithLabel.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <template>
-  <div class="toggle-switch-with-label" :class="[elementClasses, formTheme]">
+  <div class="toggle-switch-with-label" :class="[elementClasses]" :data-theme="formTheme">
     <InputLabel
       :for="`toggle-sitch-${id}`"
       :id

package/app/components/forms/toggle-switch/variants/ToggleSwitchWithLabelInline.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <template>
-  <div class="toggle-switch-with-label-inline" :class="[elementClasses, theme]">
+  <div class="toggle-switch-with-label-inline" :class="[elementClasses]" :data-theme="theme">
     <InputLabel
       :for="`toggle-sitch-${id}`"
       :id

package/app/components/forms/triple-toggle-switch/TripleToggleSwitchCore.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <template>
-  <div class="triple-toggle-switch" :class="[elementClasses, size, theme]">
+  <div class="triple-toggle-switch" :class="[elementClasses]" :data-size="size" :data-theme="theme">
     <div class="triple-toggle-switch-wrapper">
       <div class="selected-option-marker-wrapper">
         <div class="selected-option-marker" :class="[{ show: showMarker }]"></div>

package/app/components/utils/colour-scheme-select/ColourSchemeSelect.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <template>
-  <div class="colour-scheme-select" :class="[theme, size]">
+  <div class="colour-scheme-select" :data-size="size" :data-theme="theme">
     <form class="colour-scheme-select-form mbe-20" ref="colourSchemeWrapper">
       <div class="select-scheme-marker-wrapper">
         <div class="select-scheme-marker" :class="[{ show: showMarker }]"></div>
@@ -165,8 +165,8 @@ watch(currentActiveIndex, () => {
   --_form-outline-colour: var(--theme-form-radio-outline);
   --_form-border-radius: calc(
-    (var(--_scheme-icon-font-size) / 2) + var(--_form-border-width) + var(--_form-outline-width) +
-      var(--_form-padding) + var(--_select-scheme-group-padding) + var(--_select-scheme-group-border-width) +
+    (var(--_scheme-icon-font-size) / 2) + var(--_form-border-width) + var(--_form-outline-width) + var(--_form-padding) +
+      var(--_select-scheme-group-padding) + var(--_select-scheme-group-border-width) +
       var(--_select-scheme-group-outline-width)
   );

package/app/components/utils/colour-scheme-select/ColourSchemeSelectOld.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <template>
-  <div class="colour-scheme-select" :class="[theme, size]">
+  <div class="colour-scheme-select" :data-size="size" :data-theme="theme">
     <p>Color Scheme select</p>
     <form class="colour-scheme-select-form mbe-20">

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "6.2.1",
+  "version": "7.0.0",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",