design-system-next 2.12.1 → 2.12.3

package/src/components/radio/radio.ts

@@ -1,42 +1,42 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export const radioPropTypes = {
-  id: {
-    type: String,
-    required: true,
-  },
-  modelValue: {
-    type: [String, Number, Boolean],
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  value: {
-    type: [String, Number, Boolean],
-    required: true,
-  },
-  description: {
-    type: String,
-  },
-  bordered: {
-    type: Boolean,
-    default: false,
-  },
-  fullWidth: {
-    type: Boolean,
-    default: false,
-  }
-};
-
-export const radioEmitTypes = ['update:modelValue'];
-
-export type RadioPropTypes = ExtractPropTypes<typeof radioPropTypes>;
-
-export type RadioEmitTypes = typeof radioEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export const radioPropTypes = {
+  id: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number, Boolean],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: [String, Number, Boolean],
+    required: true,
+  },
+  description: {
+    type: String,
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  fullWidth: {
+    type: Boolean,
+    default: false,
+  }
+};
+
+export const radioEmitTypes = ['update:modelValue'];
+
+export type RadioPropTypes = ExtractPropTypes<typeof radioPropTypes>;
+
+export type RadioEmitTypes = typeof radioEmitTypes;

package/src/components/select/select.ts

@@ -1,144 +1,144 @@
-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,
-    default: 'select',
-  },
-  modelValue: {
-    type: [String, Number, Object, Array] as PropType<
-      string | number | Record<string, unknown> | (string | number | Record<string, unknown>)[]
-    >,
-    default: '',
-  },
-  options: {
-    type: Array as PropType<MenuListType[] | string[] | Record<string, unknown>[]>,
-    required: true,
-    default: [],
-  },
-  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,
-  },
-  label: {
-    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',
-  },
-  displayText: {
-    type: String,
-    default: '',
-  },
-  displayHelper: {
-    type: Boolean,
-    default: false,
-  },
-  helperIcon: {
-    type: String,
-    default: null,
-  },
-  helperText: {
-    type: String,
-    default: '',
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  error: {
-    type: Boolean,
-    default: false,
-  },
-  clearable: {
-    type: Boolean,
-    default: false,
-  },
-  searchable: {
-    type: Boolean,
-    default: false,
-  },
-  disabledLocalSearch: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export const selectEmitTypes = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  'update:modelValue': (_value: unknown) => true,
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  'infinite-scroll-trigger': (_triggered: boolean) => true,
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  'search-string': (_search: string | number) => true,
-};
-
-export type SelectPropTypes = ExtractPropTypes<typeof selectPropTypes>;
-export type SelectEmitTypes = typeof selectEmitTypes;
+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,
+    default: 'select',
+  },
+  modelValue: {
+    type: [String, Number, Object, Array] as PropType<
+      string | number | Record<string, unknown> | (string | number | Record<string, unknown>)[]
+    >,
+    default: '',
+  },
+  options: {
+    type: Array as PropType<MenuListType[] | string[] | Record<string, unknown>[]>,
+    required: true,
+    default: [],
+  },
+  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,
+  },
+  label: {
+    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',
+  },
+  displayText: {
+    type: String,
+    default: '',
+  },
+  displayHelper: {
+    type: Boolean,
+    default: false,
+  },
+  helperIcon: {
+    type: String,
+    default: null,
+  },
+  helperText: {
+    type: String,
+    default: '',
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: Boolean,
+    default: false,
+  },
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+  searchable: {
+    type: Boolean,
+    default: false,
+  },
+  disabledLocalSearch: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const selectEmitTypes = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  'update:modelValue': (_value: unknown) => true,
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  'infinite-scroll-trigger': (_triggered: boolean) => true,
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  'search-string': (_search: string | number) => true,
+};
+
+export type SelectPropTypes = ExtractPropTypes<typeof selectPropTypes>;
+export type SelectEmitTypes = typeof selectEmitTypes;

package/src/components/sidepanel/sidepanel.vue

@@ -1,55 +1,55 @@
-<template>
-  <div v-if="!props.isStacking && isOpen && hasBackdrop" :class="sidepanelClasses.backdropBaseClasses"></div>
-
-  <Transition
-    :enter-active-class="sidepanelClasses.sidepanelTransitionActiveClasses"
-    :leave-active-class="sidepanelClasses.sidepanelTransitionActiveClasses"
-    :enter-from-class="sidepanelClasses.sidepanelTransitionHiddenClasses"
-    :enter-to-class="sidepanelClasses.sidepanelTransitionVisibleClasses"
-    :leave-from-class="sidepanelClasses.sidepanelTransitionVisibleClasses"
-    :leave-to-class="sidepanelClasses.sidepanelTransitionHiddenClasses"
-    :appear="!props.isStacking"
-  >
-    <div
-      v-if="props.isOpen || props.isStacking"
-      ref="sidepanelRef"
-      role="dialog"
-      aria-labelledby="sidepanel-title"
-      aria-describedby="sidepanel-content"
-      :class="sidepanelClasses.sidepanelBaseClasses"
-      :style="{ height: typeof height === 'number' ? `${height}px` : height }"
-    >
-      <template v-if="!props.hideHeader">
-        <div v-if="!$slots.header" :class="sidepanelClasses.sidepanelHeaderClasses">
-          <div id="sidepanel-title" :class="sidepanelClasses.sidepanelHeaderTitleClasses">
-            {{ headerTitle }}
-          </div>
-          <Icon :class="sidepanelClasses.sidepanelHeaderIconClasses" icon="ph:x" @click="handleClose" />
-        </div>
-        <div v-else>
-          <slot name="header"></slot>
-        </div>
-      </template>
-
-      <div id="sidepanel-content" :class="sidepanelClasses.sidepanelContentClasses">
-        <slot />
-      </div>
-
-      <div v-if="$slots.footer" :class="sidepanelClasses.sidepanelFooterClasses">
-        <slot name="footer"></slot>
-      </div>
-    </div>
-  </Transition>
-</template>
-
-<script lang="ts" setup>
-import { Icon } from '@iconify/vue';
-
-import { useSidepanel } from './use-sidepanel';
-import { sidepanelPropTypes, sidepanelEmitTypes } from './sidepanel';
-
-const props = defineProps(sidepanelPropTypes);
-const emit = defineEmits(sidepanelEmitTypes);
-
-const { sidepanelClasses, sidepanelRef, handleClose } = useSidepanel(props, emit);
-</script>
+<template>
+  <div v-if="!props.isStacking && isOpen && hasBackdrop" :class="sidepanelClasses.backdropBaseClasses"></div>
+
+  <Transition
+    :enter-active-class="sidepanelClasses.sidepanelTransitionActiveClasses"
+    :leave-active-class="sidepanelClasses.sidepanelTransitionActiveClasses"
+    :enter-from-class="sidepanelClasses.sidepanelTransitionHiddenClasses"
+    :enter-to-class="sidepanelClasses.sidepanelTransitionVisibleClasses"
+    :leave-from-class="sidepanelClasses.sidepanelTransitionVisibleClasses"
+    :leave-to-class="sidepanelClasses.sidepanelTransitionHiddenClasses"
+    :appear="!props.isStacking"
+  >
+    <div
+      v-if="props.isOpen || props.isStacking"
+      ref="sidepanelRef"
+      role="dialog"
+      aria-labelledby="sidepanel-title"
+      aria-describedby="sidepanel-content"
+      :class="sidepanelClasses.sidepanelBaseClasses"
+      :style="{ height: typeof height === 'number' ? `${height}px` : height }"
+    >
+      <template v-if="!props.hideHeader">
+        <div v-if="!$slots.header" :class="sidepanelClasses.sidepanelHeaderClasses">
+          <div id="sidepanel-title" :class="sidepanelClasses.sidepanelHeaderTitleClasses">
+            {{ headerTitle }}
+          </div>
+          <Icon :class="sidepanelClasses.sidepanelHeaderIconClasses" icon="ph:x" @click="handleClose" />
+        </div>
+        <div v-else>
+          <slot name="header"></slot>
+        </div>
+      </template>
+
+      <div id="sidepanel-content" :class="sidepanelClasses.sidepanelContentClasses">
+        <slot />
+      </div>
+
+      <div v-if="$slots.footer" :class="sidepanelClasses.sidepanelFooterClasses">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+
+import { useSidepanel } from './use-sidepanel';
+import { sidepanelPropTypes, sidepanelEmitTypes } from './sidepanel';
+
+const props = defineProps(sidepanelPropTypes);
+const emit = defineEmits(sidepanelEmitTypes);
+
+const { sidepanelClasses, sidepanelRef, handleClose } = useSidepanel(props, emit);
+</script>

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

@@ -1,16 +1,16 @@
-import type { ExtractPropTypes, PropType } from "vue";
-
-export const stackingSidePanelProps = {
-  stack: {
-    type: Array as PropType<string[]>,
-    default: [],
-    required: true,
-  }
-};
-
-export const stackingSidePanelEmits = {
-  'update:stack': (value: string[]) => value,
-};
-
-export type StackingSidePanelPropTypes = ExtractPropTypes<typeof stackingSidePanelProps>;
-export type StackingSidePanelEmitTypes = typeof stackingSidePanelEmits;
+import type { ExtractPropTypes, PropType } from "vue";
+
+export const stackingSidePanelProps = {
+  stack: {
+    type: Array as PropType<string[]>,
+    default: [],
+    required: true,
+  }
+};
+
+export const stackingSidePanelEmits = {
+  'update:stack': (value: string[]) => value,
+};
+
+export type StackingSidePanelPropTypes = ExtractPropTypes<typeof stackingSidePanelProps>;
+export type StackingSidePanelEmitTypes = typeof stackingSidePanelEmits;

package/src/components/sidepanel/stacking-sidepanel/stacking-sidepanel.vue

@@ -1,39 +1,39 @@
-<template>
-  <div v-if="activePanels.length > 0" :class="stackingSidepanelClasses.sidepanelStackBackdropClasses"></div>
-  <div
-    ref="stacking-sidepanel-base"
-    :class="[stackingSidepanelClasses.sidepanelStackBaseClasses]"
-    :style="stackingSidepanelBaseTransform"
-  >
-    <transition-group
-      :enter-active-class="stackingSidepanelClasses.sidepanelStackTransitionEnterActiveClasses"
-      :leave-active-class="stackingSidepanelClasses.sidepanelStackTransitionLeaveActiveClasses"
-      :move-class="stackingSidepanelClasses.sidepanelStackMoveClasses"
-      :enter-from-class="stackingSidepanelClasses.sidepanelStackEnterFromClasses"
-      :leave-to-class="stackingSidepanelClasses.sidepanelStackLeaveToClasses"
-      appear
-    >
-      <div v-for="name in activePanels" :key="name">
-        <slot :name="name" />
-      </div>
-    </transition-group>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useTemplateRef } from 'vue';
-import { useStackingSidepanel } from './use-stacking-sidepanel';
-import { stackingSidePanelProps, stackingSidePanelEmits } from './stacking-sidepanel';
-
-const stackingSidepanelBase = useTemplateRef('stacking-sidepanel-base');
-const props = defineProps(stackingSidePanelProps);
-const emits = defineEmits(stackingSidePanelEmits);
-
-const { showPanel, hidePanel, stackingSidepanelClasses, stackingSidepanelBaseTransform, activePanels } =
-  useStackingSidepanel(props, emits, stackingSidepanelBase);
-
-defineExpose({
-  showPanel,
-  hidePanel,
-});
-</script>
+<template>
+  <div v-if="activePanels.length > 0" :class="stackingSidepanelClasses.sidepanelStackBackdropClasses"></div>
+  <div
+    ref="stacking-sidepanel-base"
+    :class="[stackingSidepanelClasses.sidepanelStackBaseClasses]"
+    :style="stackingSidepanelBaseTransform"
+  >
+    <transition-group
+      :enter-active-class="stackingSidepanelClasses.sidepanelStackTransitionEnterActiveClasses"
+      :leave-active-class="stackingSidepanelClasses.sidepanelStackTransitionLeaveActiveClasses"
+      :move-class="stackingSidepanelClasses.sidepanelStackMoveClasses"
+      :enter-from-class="stackingSidepanelClasses.sidepanelStackEnterFromClasses"
+      :leave-to-class="stackingSidepanelClasses.sidepanelStackLeaveToClasses"
+      appear
+    >
+      <div v-for="name in activePanels" :key="name">
+        <slot :name="name" />
+      </div>
+    </transition-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { useStackingSidepanel } from './use-stacking-sidepanel';
+import { stackingSidePanelProps, stackingSidePanelEmits } from './stacking-sidepanel';
+
+const stackingSidepanelBase = useTemplateRef('stacking-sidepanel-base');
+const props = defineProps(stackingSidePanelProps);
+const emits = defineEmits(stackingSidePanelEmits);
+
+const { showPanel, hidePanel, stackingSidepanelClasses, stackingSidepanelBaseTransform, activePanels } =
+  useStackingSidepanel(props, emits, stackingSidepanelBase);
+
+defineExpose({
+  showPanel,
+  hidePanel,
+});
+</script>

package/src/components/slider/slider.ts

@@ -1,38 +1,38 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-const SLIDER_SIZES = ['sm','lg'] as const;
-
-export const sliderPropTypes = {
-  size: {
-    type: String as PropType<(typeof SLIDER_SIZES)[number]>,
-    validator: (value: (typeof SLIDER_SIZES)[number]) => SLIDER_SIZES.includes(value),
-    default: 'lg',
-  },
-  min: {
-    type: Number,
-    default: 0,
-  },
-  max: {
-    type: Number,
-    default: 100,
-  },
-  step: {
-    type: Number,
-    default: 1,
-  },
-  modelValue: {
-    type: Number,
-    default: 0,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  }
-};
-
-export const sliderEmits = {
-  'update:modelValue': (value: number): value is number => typeof value === 'number',
-  slideend: (value: number): value is number => typeof value === 'number',
-};
-
-export type SliderPropTypes = ExtractPropTypes<typeof sliderPropTypes>;
-export type SliderEmitTypes = typeof sliderEmits;
+import type { PropType, ExtractPropTypes } from 'vue';
+const SLIDER_SIZES = ['sm','lg'] as const;
+
+export const sliderPropTypes = {
+  size: {
+    type: String as PropType<(typeof SLIDER_SIZES)[number]>,
+    validator: (value: (typeof SLIDER_SIZES)[number]) => SLIDER_SIZES.includes(value),
+    default: 'lg',
+  },
+  min: {
+    type: Number,
+    default: 0,
+  },
+  max: {
+    type: Number,
+    default: 100,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  }
+};
+
+export const sliderEmits = {
+  'update:modelValue': (value: number): value is number => typeof value === 'number',
+  slideend: (value: number): value is number => typeof value === 'number',
+};
+
+export type SliderPropTypes = ExtractPropTypes<typeof sliderPropTypes>;
+export type SliderEmitTypes = typeof sliderEmits;