design-system-next 2.7.12 → 2.7.15

package/src/components/switch/switch.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-bind="switchProps" :class="['spr-flex spr-items-center spr-gap-2', switchTextClass]">
-    <label>
+    <label v-if="!isLeftTextLabel" :for="defaultId" class="spr-cursor-pointer">
       <slot name="leftText">
         <slot></slot>
       </slot>
@@ -16,6 +16,7 @@
         ref="switchRef"
         v-model="proxyValue"
         type="checkbox"
+        :id="defaultId"
         name="checkbox"
         :class="[
           'input spr-absolute spr-left-0 spr-top-0 spr-z-10 spr-m-0 spr-h-6 spr-w-12 spr-opacity-0',
@@ -30,7 +31,7 @@
         ]"
       ></span>
     </div>
-    <label>
+    <label v-if="!isRightTextLabel" :for="defaultId" class="spr-cursor-pointer">
       <slot name="rightText"></slot>
     </label>
   </div>
@@ -45,9 +46,11 @@ import { useSwitch } from './use-switch';
 const props = defineProps(switchPropTypes);
 const emit = defineEmits(switchEmitTypes);
 
+const defaultId = props.id ? props.id + '_' + Math.random().toString(36).substring(2, 8) : 'switch_input_' + Math.random().toString(36).substring(2, 8);
+
 const proxyValue = useVModel(props, 'modelValue', emit);
 
-const { switchWrapperRef, switchRef, switchProps, switchMarkClass, switchTextClass, switchInputClass } =
+const { switchWrapperRef, switchRef, switchProps, switchMarkClass, switchTextClass, switchInputClass, isLeftTextLabel, isRightTextLabel } =
   useSwitch(props);
 </script>
 

package/src/components/switch/use-switch.ts

@@ -1,4 +1,4 @@
-import { computed, ref, ComputedRef, toRefs } from 'vue';
+import { computed, ref, ComputedRef, toRefs, useSlots } from 'vue';
 import { useElementHover, useMousePressed } from '@vueuse/core';
 
 import classNames from 'classnames';
@@ -12,6 +12,11 @@ export const useSwitch = (props: SwitchPropTypes) => {
   const isHovered = useElementHover(switchWrapperRef);
   const { pressed } = useMousePressed({ target: switchRef });
   const { disabled, state, modelValue } = toRefs(props);
+  const slots = useSlots();
+
+  // if the slot label is empty, we will not show the label
+  const isLeftTextLabel = (!slots.default || slots.default().length === 0) && !slots.leftText;
+  const isRightTextLabel = !slots.rightText;
 
   const switchProps: ComputedRef<Record<string, unknown>> = computed(() => {
     return {
@@ -96,5 +101,7 @@ export const useSwitch = (props: SwitchPropTypes) => {
     switchMarkClass,
     switchTextClass,
     switchInputClass,
+    isLeftTextLabel,
+    isRightTextLabel
   };
 };

package/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+interface ImportMeta { readonly glob: ImportMetaGlob }
+
+interface ImportMetaGlob {
+  (pattern: string, options?: { eager?: boolean }): Record<string, () => Promise<unknown>>
+  (pattern: string, options?: { eager: true }): Record<string, unknown>
+}