design-system-next 2.7.11 → 2.7.14

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

@@ -1,35 +1,81 @@
-import { ref, computed, toRefs, watch, onMounted, onUnmounted } from 'vue';
+import { ref, toRefs, computed, ComputedRef, watch, onMounted, onUnmounted } from 'vue';
 
 import classNames from 'classnames';
 
 import type { SetupContext } from 'vue';
 import type { SidepanelPropTypes, SidepanelEmitTypes } from './sidepanel';
 
-export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<SidepanelEmitTypes>['emit']) => {
-  const sidepanelRef = ref<HTMLDivElement | null>(null);
+interface SidepanelClasses {
+  sidepanelBaseClasses: string;
+  sidepanelHeaderClasses: string;
+  sidepanelHeaderTitleClasses: string;
+  sidepanelHeaderIconClasses: string;
+  sidepanelContentClasses: string;
+  sidepanelFooterClasses: string;
+  sidepanelTransitionActiveClasses: string;
+  sidepanelTransitionHiddenClasses: string;
+  sidepanelTransitionVisibleClasses: string;
+  backdropBaseClasses: string;
+}
 
+export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<SidepanelEmitTypes>['emit']) => {
   const { size, position } = toRefs(props);
 
-  const sidepanelSizesClasses = computed(() => {
-    return classNames({
-      'spr-w-[360px]': size.value === 'sm',
-      'spr-w-[420px]': size.value === 'md',
-      'spr-w-[480px]': size.value === 'lg',
-    });
-  });
+  const sidepanelClasses: ComputedRef<SidepanelClasses> = computed(() => {
+    const sidepanelBaseClasses = classNames(
+      'spr-fixed spr-right-4 spr-top-1/2 spr-z-[1015] spr-flex spr-h-full spr-min-h-[200px] spr-translate-y-[-50%] spr-flex-col spr-rounded-border-radius-xl spr-bg-white-50 spr-drop-shadow',
+      {
+        'spr-w-[360px] sm:spr-w-[calc(100%-35px)]': size.value === 'sm',
+        'spr-w-[420px] sm:spr-w-[calc(100%-35px)]': size.value === 'md',
+        'spr-w-[480px] sm:spr-w-[calc(100%-35px)]': size.value === 'lg',
+      },
+    );
+
+    const sidepanelHeaderClasses = classNames(
+      'spr-tw-min-h-12 spr-text-color-strong spr-flex spr-justify-between spr-border-0 spr-border-b spr-border-solid spr-border-mushroom-200 spr-p-4',
+    );
+
+    const sidepanelHeaderTitleClasses = classNames('spr-subheading-xs');
+
+    const sidepanelHeaderIconClasses = classNames('spr-text-color-weak spr-h-5 spr-w-5 spr-cursor-pointer');
+
+    const sidepanelContentClasses = classNames('spr-h-full spr-overflow-y-auto');
 
-  const sidepanelStartEndState = computed(() => {
-    return classNames({
+    const sidepanelFooterClasses = classNames(
+      'spr-bottom-0 spr-left-0 spr-w-full spr-rounded-b-border-radius-xl spr-border-0 spr-border-t spr-border-solid spr-border-mushroom-200 spr-bg-white-50 spr-py-3',
+    );
+
+    const sidepanelTransitionActiveClasses = classNames(
+      'spr-transition-transform spr-duration-[150ms] spr-ease-[ease-in-out]',
+    );
+
+    const sidepanelTransitionHiddenClasses = classNames({
       'spr-translate-x-full -spr-translate-y-2/4': position.value === 'right',
     });
-  });
 
-  const sidepanelMidState = computed(() => {
-    return classNames({
+    const sidepanelTransitionVisibleClasses = classNames({
       'spr-translate-x-0 -spr-translate-y-2/4': position.value === 'right',
     });
+    const backdropBaseClasses = classNames(
+      'spr-fixed spr-left-0 spr-top-0 spr-z-[1010] spr-h-full spr-w-full spr-bg-mushroom-700/60',
+    );
+
+    return {
+      sidepanelBaseClasses,
+      sidepanelHeaderClasses,
+      sidepanelHeaderTitleClasses,
+      sidepanelHeaderIconClasses,
+      sidepanelContentClasses,
+      sidepanelFooterClasses,
+      sidepanelTransitionActiveClasses,
+      sidepanelTransitionHiddenClasses,
+      sidepanelTransitionVisibleClasses,
+      backdropBaseClasses,
+    };
   });
 
+  const sidepanelRef = ref<HTMLDivElement | null>(null);
+
   const handleClose = () => {
     emit('close');
   };
@@ -45,7 +91,7 @@ export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<Sidep
 
   const handleEscapeClose = (event: KeyboardEvent) => {
     if (event.key === 'Escape' && props.isOpen && props.escapeClose) {
-      emit('close')
+      emit('close');
     }
   };
 
@@ -74,10 +120,8 @@ export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<Sidep
   });
 
   return {
+    sidepanelClasses,
     sidepanelRef,
-    sidepanelSizesClasses,
-    sidepanelMidState,
-    sidepanelStartEndState,
-    handleClose
-  }
-}
+    handleClose,
+  };
+};

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="!isSlotEmpty">
       <slot name="leftText">
         <slot></slot>
       </slot>
@@ -30,7 +30,7 @@
         ]"
       ></span>
     </div>
-    <label>
+    <label v-if="!isSlotEmpty">
       <slot name="rightText"></slot>
     </label>
   </div>
@@ -47,7 +47,7 @@ const emit = defineEmits(switchEmitTypes);
 
 const proxyValue = useVModel(props, 'modelValue', emit);
 
-const { switchWrapperRef, switchRef, switchProps, switchMarkClass, switchTextClass, switchInputClass } =
+const { switchWrapperRef, switchRef, switchProps, switchMarkClass, switchTextClass, switchInputClass, isSlotEmpty } =
   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,10 @@ 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 isSlotEmpty = (!slots.default || slots.default().length === 0) && !slots.leftText && !slots.rightText;
 
   const switchProps: ComputedRef<Record<string, unknown>> = computed(() => {
     return {
@@ -96,5 +100,6 @@ export const useSwitch = (props: SwitchPropTypes) => {
     switchMarkClass,
     switchTextClass,
     switchInputClass,
+    isSlotEmpty
   };
 };

package/src/components/textarea/textarea.vue

@@ -2,8 +2,9 @@
   <div :class="textareaClasses.wrapperClasses">
     <label v-if="label" :for="id" :class="textareaClasses.labelClasses">{{ label }}</label>
     <textarea
-      :class="textareaClasses.textAreaClasses"
       v-bind="$attrs"
+      :id="props.id"
+      :class="textareaClasses.textAreaClasses"
       :rows="rows"
       :placeholder="placeholder"
       :value="modelValue"

package/src/components/time-picker/time-picker.ts

@@ -55,6 +55,10 @@ export const timePickerPropTypes = {
     type: String,
     default: '',
   },
+  id: {
+    type: String,
+    default: 'time-picker',
+  },
 };
 export const timePickerEmitTypes = {
   'update:modelValue': (evt: MouseEvent): evt is MouseEvent => evt instanceof MouseEvent,

package/src/components/time-picker/time-picker.vue

@@ -19,6 +19,7 @@
       }"
     >
       <spr-input
+        :id="props.id"
         v-model="selectedValue"
         type="text"
         :placeholder="getPlaceHolder"

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>
+}