design-system-next 2.20.1 → 2.20.4

package/src/components/floating-action/floating-action.ts

@@ -1,12 +1,12 @@
-import { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export const floatingActionPropTypes = {
-  show: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export type FloatingActionProps = ExtractPropTypes<typeof floatingActionPropTypes>;
+import { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export const floatingActionPropTypes = {
+  show: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type FloatingActionProps = ExtractPropTypes<typeof floatingActionPropTypes>;

package/src/components/input/input-email/input-email.vue

@@ -1,17 +1,17 @@
-<template>
-  <spr-input v-bind="$attrs">
-    <template v-for="(_, slotName) in $slots" #[slotName]>
-      <slot :name="slotName" />
-    </template>
-
-    <template #prefix>
-      <Icon icon="ph:envelope" />
-    </template>
-  </spr-input>
-</template>
-
-<script setup lang="ts">
-import { Icon } from '@iconify/vue';
-
-import SprInput from '@/components/input/input.vue';
-</script>
+<template>
+  <spr-input v-bind="$attrs">
+    <template v-for="(_, slotName) in $slots" #[slotName]>
+      <slot :name="slotName" />
+    </template>
+
+    <template #prefix>
+      <Icon icon="ph:envelope" />
+    </template>
+  </spr-input>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+import SprInput from '@/components/input/input.vue';
+</script>

package/src/components/input/input-search/input-search.vue

@@ -1,13 +1,13 @@
-<template>
-  <spr-input v-bind="$attrs">
-    <template #icon>
-      <Icon icon="ph:magnifying-glass" />
-    </template>
-  </spr-input>
-</template>
-
-<script setup lang="ts">
-import { Icon } from '@iconify/vue';
-
-import SprInput from '@/components/input/input.vue';
-</script>
+<template>
+  <spr-input v-bind="$attrs">
+    <template #icon>
+      <Icon icon="ph:magnifying-glass" />
+    </template>
+  </spr-input>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+import SprInput from '@/components/input/input.vue';
+</script>

package/src/components/input/input-url/input-url.vue

@@ -1,20 +1,20 @@
-<template>
-  <spr-input v-bind="$attrs" type="url">
-    <template v-for="(_, slotName) in $slots" #[slotName]>
-      <slot :name="slotName" />
-    </template>
-
-    <template #prefix>
-      <span> https:// </span>
-    </template>
-    <template #icon>
-      <Icon icon="ph:question-fill" />
-    </template>
-  </spr-input>
-</template>
-
-<script setup lang="ts">
-import { Icon } from '@iconify/vue';
-
-import SprInput from '@/components/input/input.vue';
-</script>
+<template>
+  <spr-input v-bind="$attrs" type="url">
+    <template v-for="(_, slotName) in $slots" #[slotName]>
+      <slot :name="slotName" />
+    </template>
+
+    <template #prefix>
+      <span> https:// </span>
+    </template>
+    <template #icon>
+      <Icon icon="ph:question-fill" />
+    </template>
+  </spr-input>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+import SprInput from '@/components/input/input.vue';
+</script>

package/src/components/input/input-username/input-username.vue

@@ -1,17 +1,17 @@
-<template>
-  <spr-input v-bind="$attrs">
-    <template v-for="(_, slotName) in $slots" #[slotName]>
-      <slot :name="slotName" />
-    </template>
-
-    <template #prefix>
-      <Icon icon="ph:user" />
-    </template>
-  </spr-input>
-</template>
-
-<script setup lang="ts">
-import { Icon } from '@iconify/vue';
-
-import SprInput from '@/components/input/input.vue';
-</script>
+<template>
+  <spr-input v-bind="$attrs">
+    <template v-for="(_, slotName) in $slots" #[slotName]>
+      <slot :name="slotName" />
+    </template>
+
+    <template #prefix>
+      <Icon icon="ph:user" />
+    </template>
+  </spr-input>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+import SprInput from '@/components/input/input.vue';
+</script>

package/src/components/list/ladderized-list/ladderized-list.ts

@@ -1,39 +1,43 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import { MenuListType } from '../list';
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export const ladderizedListPropTypes = {
-  modelValue: {
-    type: Array as PropType<string[]>,
-    required: true,
-    default: [],
-  },
-  menuList: {
-    type: Array as PropType<MenuListType[]>,
-    required: true,
-    default: [],
-  },
-  menuLevel: {
-    type: Number,
-    default: 0,
-  },
-  searchableMenu: {
-    type: Boolean,
-    default: false,
-  },
-  searchableMenuPlaceholder: {
-    type: String,
-    default: 'Search...',
-  },
-  removeCurrentLevelInBackLabel: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export const ladderizedListEmitTypes = {
-  'update:modelValue': (value: string[]) => value,
-};
-
-export type LadderizedListPropTypes = ExtractPropTypes<typeof ladderizedListPropTypes>;
-export type LadderizedListEmitTypes = typeof ladderizedListEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+import { MenuListType } from '../list';
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export const ladderizedListPropTypes = {
+  modelValue: {
+    type: Array as PropType<string[]>,
+    required: true,
+    default: [],
+  },
+  menuList: {
+    type: Array as PropType<MenuListType[]>,
+    required: true,
+    default: [],
+  },
+  menuLevel: {
+    type: Number,
+    default: 0,
+  },
+  searchableMenu: {
+    type: Boolean,
+    default: false,
+  },
+  searchableMenuPlaceholder: {
+    type: String,
+    default: 'Search...',
+  },
+  removeCurrentLevelInBackLabel: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const ladderizedListEmitTypes = {
+  'update:modelValue': (value: string[]) => value,
+};
+
+export type LadderizedListPropTypes = ExtractPropTypes<typeof ladderizedListPropTypes>;
+export type LadderizedListEmitTypes = typeof ladderizedListEmitTypes;

package/src/components/list/ladderized-list/ladderized-list.vue

@@ -12,6 +12,7 @@
           :searchable-menu="props.searchableMenu"
           :searchable-menu-placeholder="props.searchableMenuPlaceholder"
           :sticky-search-offset="activeLevel > 0 ? 42 : 0"
+          :loading="props.loading"
           @update:model-value="(value) => handleSelectedListItem(value[0])"
         />
       </div>

package/src/components/list/list-item/list-item.ts

@@ -0,0 +1,48 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { MenuListType } from '../list';
+
+export const listItemPropTypes = {
+  item: {
+    type: Object as PropType<MenuListType>,
+    required: true,
+  },
+  isSelected: {
+    type: Boolean,
+    required: true,
+  },
+  classes: {
+    type: [String, Array, Object] as PropType<string | string[] | Record<string, boolean>>,
+    required: true,
+  },
+  multiSelect: {
+    type: Boolean,
+    default: false,
+  },
+  lozenge: {
+    type: Boolean,
+    default: false,
+  },
+  ladderized: {
+    type: Boolean,
+    default: false,
+  },
+  noCheck: {
+    type: Boolean,
+    default: false,
+  },
+  itemIcon: {
+    type: String,
+    default: '',
+  },
+  disabledUnselectedItems: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const listItemEmitTypes = {
+  select: () => true,
+};
+
+export type ListItemPropTypes = ExtractPropTypes<typeof listItemPropTypes>;
+export type ListItemEmitTypes = typeof listItemEmitTypes;

package/src/components/list/list-item/list-item.vue

@@ -0,0 +1,112 @@
+<template>
+  <div :class="classes" @click="$emit('select')">
+    <template v-if="showLozengeMode">
+      <div class="spr-flex spr-items-center spr-gap-1">
+        <spr-checkbox
+          v-if="props.multiSelect"
+          :disabled="item.disabled || (props.disabledUnselectedItems && !isSelected)"
+          :checked="isSelected"
+        />
+        <spr-lozenge
+          :label="item.text || (item.lozengeProps?.label as string)"
+          :tone="item.lozengeProps?.tone as string & (typeof LOZENGE_TONE)[number]"
+          :fill="item.lozengeProps?.fill as boolean"
+          :url="item.lozengeProps?.url as string"
+          :icon="item.lozengeProps?.icon as string"
+          :max-width="item.lozengeProps?.maxWidth as string"
+          :postfix-icon="item.lozengeProps?.postfixIcon as string"
+        />
+      </div>
+    </template>
+    <template v-else>
+      <div class="spr-flex spr-items-center spr-gap-1">
+        <spr-checkbox
+          v-if="props.multiSelect"
+          :disabled="item.disabled || (props.disabledUnselectedItems && !isSelected)"
+          :checked="isSelected"
+        />
+        <div :class="[item.textColor, 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-3xs']">
+          <span
+            v-if="hasIcon"
+            :class="[
+              item.iconColor,
+              'spr-mt-[2px]',
+              { 'spr-text-color-disabled': item.disabled || (props.disabledUnselectedItems && !isSelected) },
+            ]"
+          >
+            <Icon :icon="iconName" width="20px" height="20px" />
+          </span>
+          <div
+            :class="[
+              'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
+              { 'spr-text-color-disabled': item.disabled || (props.disabledUnselectedItems && !isSelected) },
+            ]"
+          >
+            <span class="spr-break-words spr-text-left spr-text-xs">
+              {{ item.text }}
+            </span>
+            <span
+              v-if="item.subtext"
+              :class="[
+                'spr-body-xs-regular spr-text-color-base spr-break-words spr-text-left',
+                { 'spr-text-color-disabled': item.disabled || (props.disabledUnselectedItems && !isSelected) },
+              ]"
+            >
+              {{ item.subtext }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Side Actions -->
+      <div class="spr-flex spr-items-center spr-gap-1">
+        <template v-if="props.ladderized">
+          <Icon v-if="hasSublevels" class="spr-text-color-weak spr-size-4" icon="ph:caret-right" />
+          <Icon
+            v-else-if="isSelected && !props.noCheck"
+            class="spr-text-color-brand-base spr-w-[1.39em]"
+            icon="ph:check"
+          />
+        </template>
+        <template v-else>
+          <spr-lozenge
+            v-if="item.lozenge"
+            :label="item.lozenge?.label as string"
+            :tone="item.lozenge?.tone as string & (typeof LOZENGE_TONE)[number]"
+            :fill="item.lozenge?.fill as boolean"
+            :url="item.lozenge?.url as string"
+            :icon="item.lozenge?.icon as string"
+            :max-width="item.lozenge?.maxWidth as string"
+            :postfix-icon="item.lozenge?.postfixIcon as string"
+          />
+          <Icon
+            v-if="isSelected && !props.noCheck && !props.multiSelect"
+            class="spr-text-color-brand-base spr-w-[1.39em]"
+            icon="ph:check"
+          />
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { Icon } from '@iconify/vue';
+
+import SprCheckbox from '@/components/checkbox/checkbox.vue';
+import SprLozenge from '@/components/lozenge/lozenge.vue';
+
+import { LOZENGE_TONE } from '@/components/lozenge/lozenge';
+
+import { listItemPropTypes, listItemEmitTypes } from './list-item';
+import { useListItem } from './use-list-item';
+
+const props = defineProps(listItemPropTypes);
+const emit = defineEmits(listItemEmitTypes);
+
+const { hasIcon, iconName, hasSublevels, showLozengeMode } = useListItem(props, emit);
+
+// Computed property to ensure item is always defined
+const item = computed(() => props.item!);
+</script>

package/src/components/list/list-item/use-list-item.ts

@@ -0,0 +1,30 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import type { ListItemPropTypes } from './list-item';
+
+export function useListItem(
+  props: ListItemPropTypes,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _emit?: unknown,
+): {
+  hasIcon: ComputedRef<boolean>;
+  iconName: ComputedRef<string>;
+  hasSublevels: ComputedRef<boolean>;
+  showLozengeMode: ComputedRef<boolean>;
+} {
+  const hasIcon = computed(() => !!(props.itemIcon || props.item!.icon));
+
+  const iconName = computed(() => props.itemIcon || props.item!.icon || '');
+
+  const hasSublevels = computed(() => !!(props.item!.sublevel && props.item!.sublevel.length > 0));
+
+  const showLozengeMode = computed(() => props.lozenge && !!props.item!.lozengeProps);
+
+  return {
+    hasIcon,
+    iconName,
+    hasSublevels,
+    showLozengeMode,
+  };
+}