design-system-next 2.20.5 → 2.21.0

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.20.5",
+  "version": "2.21.0",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
+  "types": "./dist/design-system-next.es.d.ts",
   "repository": {
     "type": "git",
     "url": "https://dev.azure.com/sproutphil/Sprout%20Design%20System/_git/Sprout%20Design%20System%20Next"
@@ -18,16 +19,21 @@
   ],
   "exports": {
     ".": {
+      "types": "./dist/design-system-next.es.d.ts",
       "import": "./dist/design-system-next.es.js",
       "require": "./dist/design-system-next.umd.js"
     },
-    "./style.css": "./dist/main.css"
+    "./style.css": "./dist/main.css",
+    "./types": {
+      "types": "./dist/design-system-next.es.d.ts",
+      "import": "./dist/design-system-next.es.d.ts"
+    }
   },
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc && vite build",
-    "watch-build": "vue-tsc && vite build --watch",
-    "types": "vue-tsc",
+    "build": "vite build",
+    "watch-build": "vite build --watch",
+    "types": "vue-tsc --noEmit",
     "preview": "vite preview",
     "lint:script": "eslint \"**/*.{js,ts,vue}\"",
     "lint:style": "stylelint \"**/*.{vue,css}\"",

package/src/App.vue

@@ -1,53 +1,3 @@
 <template>
-  <spr-dropdown
-    id="sample-dropdownCustomPopper"
-    width="150px"
-    :triggers="['click']"
-    :popper-triggers="['click']"
-    popper-width="500px"
-    :auto-hide="false"
-  >
-    <spr-button class="spr-w-full" tone="success" has-icon>
-      <span>Custom Popper</span>
-      <Icon icon="ph:caret-down" />
-    </spr-button>
-
-    <template #popper>
-      <spr-select-multiple
-        id="sample-select"
-        v-model="selectModel"
-        label="Select Label"
-        placeholder="Select an option"
-        :options="options"
-        popper-container="body"
-        wrapper-position="relative"
-        popper-strategy="fixed"
-        placement="bottom"
-      />
-    </template>
-  </spr-dropdown>
+  <div>Test Component Here</div>
 </template>
-
-<script setup>
-import { ref } from 'vue';
-
-import SprDropdown from './components/dropdown/dropdown.vue';
-import SprButton from './components/button/button.vue';
-import SprSelectMultiple from './components/select/select-multiple/select-multiple.vue';
-
-const selectModel = ref('');
-
-const options = ref([
-  { text: 'Apple', value: 'apple' },
-  { text: 'Banana', value: 'banana' },
-  { text: 'Cherry', value: 'cherry' },
-  { text: 'Date', value: 'date' },
-  { text: 'Elderberry', value: 'elderberry' },
-  { text: 'Fig', value: 'fig' },
-  { text: 'Grape', value: 'grape' },
-  { text: 'Nectarine', value: 'nectarine' },
-  { text: 'Orange', value: 'orange' },
-  { text: 'Papaya', value: 'papaya' },
-  { text: '89 Quince', value: '50' },
-]);
-</script>

package/src/components/file-upload/file-upload.ts

@@ -92,7 +92,10 @@ export const fileUploadPropTypes = {
   },
 };
 
-export const fileUploadEmitTypes =  ['update:modelValue']
+export const fileUploadEmitTypes = {
+  'update:modelValue': () => true,
+  'validation-error': () => true,
+}
 
 export type FileUploadPropTypes = ExtractPropTypes<typeof fileUploadPropTypes>;
 export type FileUploadEmitTypes = typeof fileUploadEmitTypes;

package/src/components/file-upload/use-file-upload.ts

@@ -20,20 +20,51 @@ export const useFileUpload = (props: FileUploadPropTypes, emit: SetupContext<Fil
   // Hidden shared input file in file list. Used for replace function.
   const listInputFileRef = ref<HTMLInputElement | null>(null);
   const fileArray = useVModel(props, 'modelValue', emit);
+  const validationErrors = ref<string[]>([]);
 
   // Shared file change event for input file and drag & drop
   const onFileChangeHandler = (files: File[] | Event | null) => {
     if (props.disabled || files === null) return;
 
+    let filesToValidate: File[] = [];
+
     // For input file event
     if(files instanceof Event) {
       const target = files.target as HTMLInputElement;
       const fileList = target.files;
-      fileArray.value = fileList ? Array.from(fileList) : [];
+      filesToValidate = fileList ? Array.from(fileList) : [];
     }
     // For drag and drop event
     else {
-      fileArray.value = files.filter((file) => props.fileTypes.includes(file.type));
+      filesToValidate = files;
+    }
+
+    // Validate file types
+    const validFiles: File[] = [];
+    const invalidFiles: string[] = [];
+
+    filesToValidate.forEach((file) => {
+      if (props.fileTypes.includes(file.type)) {
+        validFiles.push(file);
+      } else {
+        invalidFiles.push(file.name);
+      }
+    });
+
+    // Update file array with valid files only
+    fileArray.value = validFiles;
+
+    // Emit validation errors if any invalid files were found
+    if (invalidFiles.length > 0) {
+      const errorMessage = invalidFiles.length === 1
+        ? `File "${invalidFiles[0]}" is not a supported file type.`
+        : `Files ${invalidFiles.map(name => `"${name}"`).join(', ')} are not supported file types.`;
+      
+      validationErrors.value = [errorMessage];
+      emit('validation-error', validationErrors.value);
+    } else {
+      validationErrors.value = [];
+      emit('validation-error', []);
     }
   }
 
@@ -127,10 +158,11 @@ export const useFileUpload = (props: FileUploadPropTypes, emit: SetupContext<Fil
   };
 
   const replaceFile = (event: Event,) => {
-    if ((event.target as HTMLInputElement).files?.length <= 0) return;
+    const target = event.target as HTMLInputElement;
+    if (!target.files || target.files.length <= 0) return;
     if (tempFileIndex.value === null) return;
 
-    fileArray.value[tempFileIndex.value] = (event.target as HTMLInputElement).files![0];
+    fileArray.value[tempFileIndex.value] = target.files[0];
     tempFileIndex.value = null;
   }
 
@@ -193,6 +225,7 @@ export const useFileUpload = (props: FileUploadPropTypes, emit: SetupContext<Fil
     clickListInputFile,
     replaceFile,
     supportedFileTypeLabel,
-    iconMap
+    iconMap,
+    validationErrors
   };
 };

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

@@ -1,48 +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;
+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/dist/lib/main.d.ts

@@ -1,5 +0,0 @@
-import { App } from 'vue';
-declare const _default: {
-    install: (app: App) => void;
-};
-export default _default;

package/dist/package.json.d.ts

@@ -1,104 +0,0 @@
-declare const _default: {
-  "name": "design-system-next",
-  "private": false,
-  "version": "2.20.5",
-  "main": "./dist/design-system-next.umd.js",
-  "module": "./dist/design-system-next.es.js",
-  "repository": {
-    "type": "git",
-    "url": "https://dev.azure.com/sproutphil/Sprout%20Design%20System/_git/Sprout%20Design%20System%20Next"
-  },
-  "type": "module",
-  "files": [
-    "dist",
-    "dist/",
-    "src/",
-    "README.md",
-    "LICENSE"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/design-system-next.es.js",
-      "require": "./dist/design-system-next.umd.js"
-    },
-    "./style.css": "./dist/main.css"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc && vite build",
-    "watch-build": "vue-tsc && vite build --watch",
-    "types": "vue-tsc",
-    "preview": "vite preview",
-    "lint:script": "eslint \"**/*.{js,ts,vue}\"",
-    "lint:style": "stylelint \"**/*.{vue,css}\"",
-    "fix:style": "stylelint --fix \"**/*.{vue,css}\"",
-    "lint": "npm run lint:script && npm run lint:style",
-    "prepublishOnly": "npm run build",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:serve": "vitepress serve docs",
-    "docs:preview": "vitepress preview docs",
-    "test:ui": "npx playwright test --ui",
-    "test:components": "npx playwright test --config=playwright-ct.config.ts --reporter=line",
-    "clean": "rm -rf node_modules dist coverage package-lock.json && npm install"
-  },
-  "dependencies": {
-    "@cloudinary/url-gen": "^1.22.0",
-    "@eslint/js": "^9.37.0",
-    "@iconify-icons/ph": "^1.2.5",
-    "@iconify/vue": "^5.0.0",
-    "classnames": "^2.5.1",
-    "countries-list": "^3.1.1",
-    "dayjs": "^1.11.18",
-    "floating-vue": "^5.2.2",
-    "libphonenumber-js": "^1.12.24",
-    "lodash": "^4.17.21",
-    "pinia": "^3.0.3",
-    "sortablejs": "^1.15.6",
-    "stylelint": "^16.25.0",
-    "stylelint-config-recess-order": "^7.4.0",
-    "stylelint-config-recommended": "^17.0.0",
-    "stylelint-config-recommended-vue": "^1.6.1",
-    "typescript-eslint": "^8.46.1",
-    "vite-plugin-sass": "^0.1.0",
-    "vue": "^3.5.22"
-  },
-  "devDependencies": {
-    "@axe-core/playwright": "^4.10.2",
-    "@playwright/experimental-ct-vue": "^1.56.0",
-    "@playwright/test": "^1.56.0",
-    "@stylistic/stylelint-plugin": "^4.0.0",
-    "@types/node": "^24.7.2",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@types/sortablejs": "^1.15.8",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^9.37.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-vue": "^10.5.1",
-    "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.7.0",
-    "rollup-plugin-gzip": "^4.1.1",
-    "sass-embedded": "^1.93.2",
-    "stylelint-order": "^7.0.0",
-    "tailwindcss": "^3.4.17",
-    "tsconfig-paths": "^4.2.0",
-    "typescript": "~5.9.3",
-    "unplugin-vue-components": "^29.1.0",
-    "vite": "^7.1.10",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitepress": "^1.6.4",
-    "vue-eslint-parser": "^10.2.0",
-    "vue-tsc": "^3.1.1"
-  },
-  "peerDependencies": {
-    "vue": "^3.0.0"
-  },
-  "engines": {
-    "node": ">=20.0.0",
-    "npm": ">=10.0.0"
-  }
-}
-;
-
-export default _default;