srcdev-nuxt-forms 2.1.38 → 2.1.40

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

@@ -28,6 +28,7 @@ export const propValidators = {
   checkboxStyle: ['check', 'cross'],
   radioAppearance: [null, 'with-decorator'],
   optionsLayout: ['block', 'inline', 'equal-widths'],
+  labelWeight: ['normal', 'semi-bold', 'bold'],
   inputTypesButton: ['button', 'cancel', 'reset', 'submit'],
   inputTypesText: ['text', 'email', 'password', 'number', 'tel', 'url'],
   inputMode: ['text', 'email', 'tel', 'url', 'search', 'numeric', 'none', 'decimal'],

package/components/forms/toggle-switch/ToggleSwitchCore.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-form-theme="formTheme">
-    <label class="toggle-switch-input" :class="[{ round }]" :for="inputId">
+    <div @click="toggleSwitchValue" class="toggle-switch-input" :class="[{ round }]" :for="inputId">
       <input type="checkbox" v-model="modelValue" :true-value :false-value :id="inputId" :aria-describedby="`${id}-description`" :name :required />
       <div class="symbol-wrapper" :class="[{ round }]">
         <div class="symbol" :class="[{ round }]">
@@ -13,7 +13,7 @@
           </div>
         </div>
       </div>
-    </label>
+    </div>
   </div>
 </template>
 
@@ -85,6 +85,10 @@ const modelValue = defineModel();
 const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
 
 const inputId = computed(() => `toggle-sitch-${id}`);
+
+const toggleSwitchValue = () => {
+  modelValue.value = modelValue.value === trueValue ? falseValue : trueValue;
+};
 </script>
 
 <style lang="css">

package/components/forms/toggle-switch/variants/ToggleSwitchWithLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="toggle-switch-with-label" :class="(elementClasses, size)" :data-form-theme="formTheme">
-    <p class="toggle-switch-label input-text-label body-normal-bold" :for="`toggle-sitch-${id}`">{{ label }}</p>
+    <label class="toggle-switch-label input-text-label body-normal-bold" :for="`toggle-sitch-${id}`">{{ label }}</label>
     <div v-if="hasDescriptionSlot" :id="`${id}-description`">
       <slot name="description"></slot>
     </div>

package/components/forms/toggle-switch/variants/ToggleSwitchWithLabelInline.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="toggle-switch-with-label-inline" :class="(elementClasses, size)" :data-form-theme="theme">
+    <label class="toggle-switch-label input-text-label" :class="labelWeightClass" :for="`toggle-sitch-${id}`">{{ label }}</label>
+    <ToggleSwitchCore v-model="modelValue" :id :name :true-value :false-value :theme :round :size>
+      <template v-if="hasIconOnSlot" #iconOn>
+        <slot name="iconOn"></slot>
+      </template>
+
+      <template v-if="hasIconOffSlot" #iconOff>
+        <slot name="iconOff"></slot>
+      </template>
+    </ToggleSwitchCore>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+
+const { id, name, label, labelWeight, trueValue, falseValue, styleClassPassthrough, theme, round, size } = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  labelWeight: {
+    type: String as PropType<string>,
+    default: 'semi-bold',
+    validator(value: string) {
+      return propValidators.labelWeight.includes(value);
+    },
+  },
+  trueValue: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+  falseValue: {
+    type: [String, Number, Boolean],
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  round: {
+    type: Boolean,
+    default: true,
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
+const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
+
+const labelWeightClass = computed(() => {
+  switch (labelWeight) {
+    case 'bold':
+      return 'body-normal-bold';
+    case 'semi-bold':
+      return 'body-normal-semibold';
+    case 'normal':
+      return 'body-normal';
+    default:
+      return 'body-normal-semibold';
+  }
+});
+
+const modelValue = defineModel();
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+</script>
+
+<style lang="css">
+.toggle-switch-with-label-inline {
+  --_transition-duration: 0.4s;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  .toggle-switch-label {
+    display: block;
+  }
+}
+</style>

package/components/utils/dark-mode-switcher/DarkModeSwitcher.vue

@@ -1,12 +1,12 @@
 <template>
-  <ToggleSwitchCore v-model="displayMode" class="dark-mode-switcher" :class="elementClasses" true-value="dark" false-value="light" name="header-dark-mode-switcher" id="header-dark-mode-switcher">
+  <ToggleSwitchWithLabelInline v-model="displayMode" id="dark-mode-switcher" name="dark-mode-switcher" label="Toggle Dark mode (inline)" size="small">
     <template #iconOn>
       <Icon name="radix-icons:moon" class="icon" />
     </template>
     <template #iconOff>
       <Icon name="radix-icons:sun" class="icon" />
     </template>
-  </ToggleSwitchCore>
+  </ToggleSwitchWithLabelInline>
 </template>
 
 <script setup lang="ts">

package/package.json

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