design-system-next 2.7.43 → 2.7.44

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

@@ -15,6 +15,8 @@ interface InputClasses {
   prefixSlotClasses: string;
   trailingSlotClasses: string;
   helperClasses: string;
+  charCountClasses: string;
+  helperContainerClasses: string;
 }
 
 export const useInput = (
@@ -22,13 +24,21 @@ export const useInput = (
   emit: SetupContext<InputEmitTypes>['emit'],
   slots: Record<string, unknown>,
 ) => {
-  const { active, error, disabled, offsetSize } = toRefs(props);
+  const { active, error, disabled, offsetSize, showCharCount, maxLength } = toRefs(props);
 
   const inputTextRef = ref(null);
 
   const { focused } = useFocus(inputTextRef);
 
   const modelValue = useVModel(props, 'modelValue', emit);
+  
+  const currentLength = computed(() => {
+    return modelValue.value ? String(modelValue.value).length : 0;
+  });
+  
+  const hasCharLimit = computed(() => {
+    return maxLength.value !== undefined && maxLength.value > 0;
+  });
 
   const inputClasses: ComputedRef<InputClasses> = computed(() => {
     const baseClasses = classNames('spr-flex spr-flex-col spr-gap-size-spacing-4xs');
@@ -99,11 +109,19 @@ export const useInput = (
       'spr-text-mushroom-300': !error.value,
       'spr-text-tomato-600': error.value,
     });
+    
+    const helperContainerClasses = classNames('spr-flex spr-flex-row spr-items-start spr-justify-between spr-w-full', {
+      'spr-mt-1': showCharCount.value || props.displayHelper,
+    });
 
-    const helperClasses = classNames('spr-body-sm-regular spr-flex spr-items-center spr-gap-size-spacing-5xs', {
+    const helperClasses = classNames('spr-body-sm-regular spr-flex spr-items-center spr-gap-size-spacing-5xs spr-flex-1', {
       'spr-text-color-danger-base': error.value,
       'spr-text-color-supporting': !error.value,
     });
+    
+    const charCountClasses = classNames('spr-ml-auto spr-body-2xs-regular spr-text-right spr-text-xs spr-text-color-supporting', {
+      'spr-text-color-danger-base': hasCharLimit.value && currentLength.value >= (maxLength.value || 0),
+    });
 
     return {
       baseClasses,
@@ -114,11 +132,21 @@ export const useInput = (
       prefixSlotClasses,
       trailingSlotClasses,
       helperClasses,
+      charCountClasses,
+      helperContainerClasses,
     };
   });
 
   const onInput = (event: Event) => {
-    modelValue.value = (event.target as HTMLInputElement).value;
+    const target = event.target as HTMLInputElement;
+    let value: string | number = target.value;
+    
+    // Convert to number if type is number
+    if (props.type === 'number' && value !== '') {
+      value = Number(value);
+    }
+    
+    modelValue.value = value;
   };
 
   const disableClickEvent = (event: Event) => {
@@ -133,5 +161,7 @@ export const useInput = (
     inputClasses,
     onInput,
     disableClickEvent,
+    currentLength,
+    hasCharLimit,
   };
 };

package/src/components/select/select-laderrized/select-laderrized.ts

@@ -0,0 +1,122 @@
+// import type { PropType, ExtractPropTypes } from 'vue';
+// import type { MenuListType } from '../list/list';
+
+// export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+// const GROUPED_ITEMS_BY_TYPES = ['A-Z', 'Z-A'] as const;
+
+// const PLACEMENTS_TYPES = [
+//   'auto',
+//   'auto-start',
+//   'auto-end',
+//   'top',
+//   'top-start',
+//   'top-end',
+//   'right',
+//   'right-start',
+//   'right-end',
+//   'bottom',
+//   'bottom-start',
+//   'bottom-end',
+//   'left',
+//   'left-start',
+//   'left-end',
+// ] as const;
+
+// const POPPER_STRATEGY_TYPES = ['fixed', 'absolute'] as const;
+
+// export const selectPropTypes = {
+//   id: {
+//     type: String,
+//     required: true,
+//   },
+//   modelValue: {
+//     type: [String, Number, Object, Array] as PropType<
+//       string | number | Record<string, unknown> | (string | number | Record<string, unknown>)[]
+//     >,
+//     default: () => [],
+//   },
+//   menuList: {
+//     type: Array as PropType<MenuListType[] | string[] | Record<string, unknown>[]>,
+//     required: true,
+//     default: [],
+//   },
+//   multiSelect: {
+//     type: Boolean,
+//     default: false,
+//   },
+//   groupItemsBy: {
+//     type: String as PropType<(typeof GROUPED_ITEMS_BY_TYPES)[number]>,
+//     validator: (value: (typeof GROUPED_ITEMS_BY_TYPES)[number] | undefined) => {
+//       return value === undefined || GROUPED_ITEMS_BY_TYPES.includes(value);
+//     },
+//   },
+//   textField: {
+//     type: String,
+//     default: 'text',
+//     description: 'Field name to use for display text when using dynamic object arrays',
+//   },
+//   valueField: {
+//     type: String,
+//     default: 'value',
+//     description: 'Field name to use for value when using dynamic object arrays',
+//   },
+//   placeholder: {
+//     type: String,
+//   },
+//   searchString: {
+//     type: String,
+//     default: '',
+//   },
+//   placement: {
+//     type: String as PropType<(typeof PLACEMENTS_TYPES)[number]>,
+//     validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
+//     default: 'bottom',
+//   },
+//   popperStrategy: {
+//     type: String,
+//     validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
+//     default: 'absolute',
+//   },
+//   popperWidth: {
+//     type: String,
+//     default: '100%',
+//   },
+//   width: {
+//     type: String,
+//     default: '100%',
+//   },
+//   wrapperPosition: {
+//     type: String,
+//     default: 'relative',
+//   },
+//   disabled: {
+//     type: Boolean,
+//     default: false,
+//   },
+//   readonly: {
+//     type: Boolean,
+//     default: false,
+//   },
+//   ladderized: {
+//     type: Boolean,
+//     default: false,
+//   },
+//   removeCurrentLevelInBackLabel: {
+//     type: Boolean,
+//     default: false,
+//   },
+//   disabled: {
+//     type: Boolean,
+//     default: false,
+//   },
+// };
+
+// export const selectEmitTypes = {
+//   'infinite-scroll-trigger': Boolean,
+//   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+//   'update:modelValue': (_value: unknown) => true, // Accept any type of value
+// };
+
+// export type SelectPropTypes = ExtractPropTypes<typeof selectPropTypes>;
+// export type SelectEmitTypes = typeof selectEmitTypes;

package/src/components/select/select-laderrized/select-laderrized.vue

@@ -0,0 +1,110 @@
+<template>
+  <div></div>
+</template>
+<!-- <template>
+  <Menu
+    :shown="selectPopperState"
+    aria-id="select-wrapper"
+    distance="4"
+    :placement="props.placement"
+    :triggers="[]"
+    :popper-hide-triggers="[]"
+    :auto-hide="false"
+    :disabled="isSelectPopperDisabled"
+    :container="`#${props.id}`"
+    :strategy="
+      props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
+    "
+    :delay="0"
+    :style="{
+      position: props.wrapperPosition,
+      width: props.width,
+    }"
+  >
+    <div @click="selectPopperState = true">
+      {{ selectedListItems }}
+
+      <spr-input
+        v-model="inputText"
+        label="Select Numbers"
+        :placeholder="props.placeholder"
+        :readonly="props.readonly"
+        :disabled="props.disabled"
+        autocomplete="off"
+      />
+    </div>
+
+    <div
+      :id="props.id"
+      :style="{
+        width: props.popperWidth,
+      }"
+    ></div>
+
+    <template #popper>
+      <div
+        ref="selectRef"
+        :class="[
+          (!props.ladderized || isLadderizedSearch) && 'spr-p-2',
+          'spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden',
+        ]"
+      >
+        <template v-if="selectMenuList.length > 0">
+          <spr-list
+            v-if="!props.ladderized || isLadderizedSearch"
+            v-model="selectedListItems"
+            :menu-list="selectMenuList"
+            :group-items-by="props.groupItemsBy"
+            :multi-select="props.multiSelect"
+            :pre-selected-items="selectValue"
+            @update:model-value="handleSelectedItem"
+          />
+          <spr-ladderized-list
+            v-else
+            v-model="selectValue"
+            :ladderized="props.ladderized"
+            :menu-list="selectMenuList"
+            :remove-current-level-in-back-label="removeCurrentLevelInBackLabel"
+            @update:model-value="handleSelectedLadderizedItem"
+          />
+        </template>
+        <template v-else>
+          <div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
+            <span class="spr-body-sm-regular spr-m-0">No results found</span>
+          </div>
+        </template>
+      </div>
+    </template>
+  </Menu>
+</template>
+
+<script lang="ts" setup>
+import { Menu } from 'floating-vue';
+
+import 'floating-vue/dist/style.css';
+
+import SprInput from '../../input/input.vue';
+import SprList from '../../list/list.vue';
+import SprLadderizedList from '../../list/ladderized-list/ladderized-list.vue';
+
+import { selectPropTypes, selectEmitTypes } from './select-laderrized';
+
+import { useSelect } from './use-select-laderrized';
+
+const props = defineProps(selectPropTypes);
+const emit = defineEmits(selectEmitTypes);
+
+const {
+  selectPopperState,
+  selectRef,
+  selectMenuList,
+  isSelectPopperDisabled,
+  selectedListItems,
+  handleSelectedItem,
+  handleSelectedLadderizedItem,
+  selectValue,
+  removeCurrentLevelInBackLabel,
+  isLadderizedSearch,
+  inputText,
+} = useSelect(props, emit);
+</script> -->