design-system-next 2.11.15 → 2.11.17

package/src/examples/dropdown-number-multi-select.vue

@@ -1,76 +1,76 @@
-// Example usage of dropdown with primitive number values in multi-select mode
-
-<template>
-  <div>
-    <h2>Multiple Number Values Demo</h2>
-    <p>Selected values: {{ displaySelection }}</p>
-    
-    <div class="dropdown-container">
-      <spr-dropdown
-        id="number-multi-dropdown"
-        v-model="selectedNumbers"
-        :menu-list="numberOptions"
-        multi-select
-        @update:model-value="handleSelectedItems"
-      >
-        <spr-input
-          v-model="displayText"
-          label="Select Numbers"
-          readonly
-          placeholder="Select numbers..."
-        />
-      </spr-dropdown>
-    </div>
-    
-    <div class="mt-4">
-      <h3>Current selection type:</h3>
-      <pre>{{ typeof selectedNumbers[0] }}</pre>
-      
-      <h3>Current selection:</h3>
-      {{ selectedNumbers }}
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue';
-import SprInput from "@/components/input/input.vue";
-import SprDropdown from "@/components/dropdown/dropdown.vue";
-
-// Define number options - raw number values 
-const numberOptions = [
-  { text: 'One', value: 1 },
-  { text: 'Two', value: 2 },
-  { text: 'Three', value: 3 },
-  { text: 'Four', value: 4 },
-  { text: 'Five', value: 5 }
-];
-
-// Track selected numbers
-const selectedNumbers = ref([]);
-const displayText = ref('');
-
-// Display the selection summary
-const displaySelection = computed(() => {
-  if (selectedNumbers.value.length === 0) {
-    return 'None';
-  }
-  return selectedNumbers.value.join(', ');
-});
-
-// Handle selected items and update display text
-const handleSelectedItems = (items) => {
-  // For multi-select, update display text to show selected items
-  const selectedTexts = items.map(itemValue => {
-    // Find corresponding text for each selected value
-    const option = numberOptions.find(opt => opt.value === itemValue);
-    return option ? option.text : itemValue;
-  });
-  
-  // Update the input display text
-  displayText.value = selectedTexts.join(', ');
-  
-  console.log('Selected values:', items);
-  console.log('Type of first value:', typeof items[0]);
-};
-</script>
+// Example usage of dropdown with primitive number values in multi-select mode
+
+<template>
+  <div>
+    <h2>Multiple Number Values Demo</h2>
+    <p>Selected values: {{ displaySelection }}</p>
+    
+    <div class="dropdown-container">
+      <spr-dropdown
+        id="number-multi-dropdown"
+        v-model="selectedNumbers"
+        :menu-list="numberOptions"
+        multi-select
+        @update:model-value="handleSelectedItems"
+      >
+        <spr-input
+          v-model="displayText"
+          label="Select Numbers"
+          readonly
+          placeholder="Select numbers..."
+        />
+      </spr-dropdown>
+    </div>
+    
+    <div class="mt-4">
+      <h3>Current selection type:</h3>
+      <pre>{{ typeof selectedNumbers[0] }}</pre>
+      
+      <h3>Current selection:</h3>
+      {{ selectedNumbers }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import SprInput from "@/components/input/input.vue";
+import SprDropdown from "@/components/dropdown/dropdown.vue";
+
+// Define number options - raw number values 
+const numberOptions = [
+  { text: 'One', value: 1 },
+  { text: 'Two', value: 2 },
+  { text: 'Three', value: 3 },
+  { text: 'Four', value: 4 },
+  { text: 'Five', value: 5 }
+];
+
+// Track selected numbers
+const selectedNumbers = ref([]);
+const displayText = ref('');
+
+// Display the selection summary
+const displaySelection = computed(() => {
+  if (selectedNumbers.value.length === 0) {
+    return 'None';
+  }
+  return selectedNumbers.value.join(', ');
+});
+
+// Handle selected items and update display text
+const handleSelectedItems = (items) => {
+  // For multi-select, update display text to show selected items
+  const selectedTexts = items.map(itemValue => {
+    // Find corresponding text for each selected value
+    const option = numberOptions.find(opt => opt.value === itemValue);
+    return option ? option.text : itemValue;
+  });
+  
+  // Update the input display text
+  displayText.value = selectedTexts.join(', ');
+  
+  console.log('Selected values:', items);
+  console.log('Type of first value:', typeof items[0]);
+};
+</script>

package/src/stores/useSnackbarStore.ts

@@ -1,44 +1,44 @@
-import { defineStore } from "pinia";
-import { SnackPropTypes } from "@/components/snackbar/snack/snack";
-import { ref, type Ref } from "vue";
-
-const createSnack = (payload: SnackPropTypes): SnackStoreTypes => ({
-  ...payload,
-  id: Math.random() * 1000,
-});
-
-export interface SnackStoreTypes extends SnackPropTypes {
-  id: number,
-  defaultAction?: () => void
-}
-
-export const useSnackbarStore = defineStore("snackbar-store", () => {
-  const snacks: Ref<SnackStoreTypes[]> = ref([]);
-
-  // Delete function for snacks
-  const eatSnack = (snack: SnackStoreTypes) => {
-    snacks.value = snacks.value.filter((s) => s.id !== snack.id);
-  }
-
-  const updateState = (payload: SnackPropTypes) => {
-    const snack = createSnack(payload);
-
-    // Add new snack to state array
-    snacks.value.push({...snack, defaultAction: () => eatSnack(snack)});
-
-    // At a certain duration, delete snack
-    setTimeout(() => {
-      eatSnack(snack);
-    }, payload.duration || 4000);
-  }
-
-  const message = (payload: SnackPropTypes) => {
-    updateState({ ...payload});
-  }
-
-  return {
-    snacks,
-    updateState,
-    message,
-  }
-});
+import { defineStore } from "pinia";
+import { SnackPropTypes } from "@/components/snackbar/snack/snack";
+import { ref, type Ref } from "vue";
+
+const createSnack = (payload: SnackPropTypes): SnackStoreTypes => ({
+  ...payload,
+  id: Math.random() * 1000,
+});
+
+export interface SnackStoreTypes extends SnackPropTypes {
+  id: number,
+  defaultAction?: () => void
+}
+
+export const useSnackbarStore = defineStore("snackbar-store", () => {
+  const snacks: Ref<SnackStoreTypes[]> = ref([]);
+
+  // Delete function for snacks
+  const eatSnack = (snack: SnackStoreTypes) => {
+    snacks.value = snacks.value.filter((s) => s.id !== snack.id);
+  }
+
+  const updateState = (payload: SnackPropTypes) => {
+    const snack = createSnack(payload);
+
+    // Add new snack to state array
+    snacks.value.push({...snack, defaultAction: () => eatSnack(snack)});
+
+    // At a certain duration, delete snack
+    setTimeout(() => {
+      eatSnack(snack);
+    }, payload.duration || 4000);
+  }
+
+  const message = (payload: SnackPropTypes) => {
+    updateState({ ...payload});
+  }
+
+  return {
+    snacks,
+    updateState,
+    message,
+  }
+});

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