slim-select 2.13.1 → 3.0.0

package/src/slim-select/{vue.vue → vue/vue.vue}

@@ -1,8 +1,6 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
-import SlimSelect, { Config, Events } from '../slim-select'
-import { SettingsPartial } from '../slim-select/settings'
-import { DataArrayPartial, Option } from '../slim-select/store'
+import SlimSelect, { Config, Events, Option, Optgroup, Settings } from '../index'
 
 export default defineComponent({
   name: 'SlimSelect',
@@ -15,10 +13,10 @@ export default defineComponent({
       default: false
     },
     data: {
-      type: Array as PropType<DataArrayPartial>
+      type: Array as PropType<(Partial<Option> | Partial<Optgroup>)[]>
     },
     settings: {
-      type: Object as PropType<SettingsPartial>
+      type: Object as PropType<Partial<Settings>>
     },
     events: {
       type: Object as PropType<Events>,
@@ -34,6 +32,14 @@ export default defineComponent({
     }
   },
   mounted() {
+    // Warning: If both slot and data are provided, data takes precedence
+    const hasSlotContent = this.$slots.default && this.$slots.default().length > 0
+    if (hasSlotContent && this.data) {
+      console.warn(
+        '[SlimSelect Vue] Both slot content and data prop are provided. Data prop will take precedence and slot content will be ignored.'
+      )
+    }
+
     let config = {
       select: this.$refs.slim
     } as Config
@@ -48,22 +54,22 @@ export default defineComponent({
       config.settings = this.settings
     }
 
-    // If events are passed in, use it
-    config.events = (this.events || {}) as Events
+    // Create a copy of events to avoid mutating the prop
+    const ogAfterChange = this.events?.afterChange
+    config.events = {
+      ...this.events,
+      afterChange: (newVal: Option[]) => {
+        const value = this.multiple ? newVal.map((option) => option.value) : newVal.length > 0 ? newVal[0].value : ''
 
-    // Wrap config.events.afterChange to run value update
-    const ogAfterChange = config.events.afterChange
-    config.events.afterChange = (newVal: Option[]) => {
-      const value = this.multiple ? newVal.map((option) => option.value) : newVal.length > 0 ? newVal[0].value : ''
-
-      // Check if value is different from modelValue
-      if (this.value !== value) {
-        this.value = value
-      }
+        // Update v-model if value changed
+        if (this.value !== value) {
+          this.value = value
+        }
 
-      // If they had an original afterChange, run it
-      if (config.events && ogAfterChange) {
-        ogAfterChange(newVal)
+        // Call the original afterChange callback if it exists
+        if (ogAfterChange) {
+          ogAfterChange(newVal)
+        }
       }
     }
 
@@ -76,7 +82,21 @@ export default defineComponent({
     // Check if modelValue is the same as the value of the select
     if (this.value !== selected) {
       // If not, set the value of the select to the modelValue
-      this.slim.setSelected(this.value)
+      // Don't trigger afterChange on initial sync
+      this.slim.setSelected(this.value, false)
+    }
+  },
+  updated() {
+    // After DOM updates (like slot content changes), sync selection from modelValue
+    // This ensures :selected attribute isn't needed on slot options
+    if (this.slim && !this.data) {
+      const currentSelected = this.slim.getSelected()
+      const modelValues = Array.isArray(this.value) ? this.value : [this.value]
+      const needsSync = JSON.stringify(currentSelected.sort()) !== JSON.stringify(modelValues.sort())
+
+      if (needsSync) {
+        this.slim.setSelected(this.value, false)
+      }
     }
   },
   beforeUnmount() {
@@ -87,10 +107,12 @@ export default defineComponent({
   watch: {
     modelValue: {
       handler: function (newVal: string | string[] | undefined) {
+        if (!this.slim) return
+
         // Set the value of the select to the newVal
-        this.slim?.setSelected(this.getCleanValue(newVal))
-      },
-      immediate: true
+        // Don't trigger afterChange when programmatically updating from parent
+        this.slim.setSelected(this.getCleanValue(newVal), false)
+      }
     },
     data: {
       handler: function (newData) {

package/tsconfig.json

@@ -1,24 +1,26 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "rootDir": ".",
+    "rootDir": "src",
     "outDir": "dist",
     "declaration": true,
     "target": "esnext",
     "useDefineForClassFields": true,
     "module": "esnext",
     "moduleResolution": "node",
+    "jsx": "react-jsx",
     "strict": true,
-    "jsx": "preserve",
     "allowJs": false,
+    "skipLibCheck": true,
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "importHelpers": true,
     "lib": ["esnext", "dom"],
     "paths": {
-      "slim-select": ["src/slim-select"]
+      "@/*": ["src/*"]
     }
   },
-  "include": ["dist/", "src/**/*.ts", "src/**/*.d.ts"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"],
+  "exclude": ["dist", "node_modules"]
 }

package/{vite.config.mts → vite.config.docs.mts}

@@ -1,11 +1,21 @@
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
+  server: {
+    port: 1111
+  },
   build: {
     outDir: 'docs',
     emptyOutDir: true,
+    chunkSizeWarningLimit: 12000,
     rollupOptions: {
       output: {
         entryFileNames: `assets/[name].js`,

package/vite.config.lib.mts

@@ -0,0 +1,42 @@
+import { defineConfig } from 'vite'
+import path from 'path'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig({
+  publicDir: false,
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/slim-select/index.ts'),
+      name: 'SlimSelect',
+      formats: ['es', 'cjs', 'umd'],
+      fileName: (format) => {
+        if (format === 'es') return 'slimselect.es.js'
+        if (format === 'cjs') return 'slimselect.cjs.js'
+        return 'slimselect.umd.js'
+      }
+    },
+    outDir: path.resolve(__dirname, 'dist'),
+    rollupOptions: {
+      output: {
+        exports: 'named',
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === 'style.css') return 'slimselect.css'
+          return assetInfo.name || 'asset'
+        }
+      }
+    }
+  },
+  plugins: [
+    dts({
+      rollupTypes: true,
+      outDir: path.resolve(__dirname, 'dist'),
+      entryRoot: path.resolve(__dirname, 'src/slim-select'),
+      exclude: [path.resolve(__dirname, 'src/slim-select/**/*.test.ts')]
+    })
+  ]
+})

package/vite.config.react.mts

@@ -0,0 +1,40 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig({
+  publicDir: false,
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/slim-select/react/index.tsx'),
+      name: 'SlimSelectReact',
+      formats: ['es', 'umd'],
+      fileName: (format) => `index.${format === 'es' ? 'js' : 'umd.js'}`
+    },
+    outDir: 'dist/react',
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        exports: 'named',
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM'
+        }
+      }
+    }
+  },
+  plugins: [
+    react(),
+    dts({
+      rollupTypes: true,
+      include: ['src/slim-select/react/**/*'],
+      exclude: ['src/slim-select/**/*.test.ts', 'src/docs/**/*']
+    })
+  ]
+})

package/vite.config.vue.mts

@@ -0,0 +1,39 @@
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import path from 'path'
+
+export default defineConfig({
+  publicDir: false,
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/slim-select/vue/index.ts'),
+      name: 'SlimSelectVue',
+      formats: ['es', 'umd'],
+      fileName: (format) => `index.${format === 'es' ? 'js' : 'umd.js'}`
+    },
+    outDir: path.resolve(__dirname, 'dist/vue'),
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        exports: 'named',
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    }
+  },
+  plugins: [
+    vue(),
+    dts({
+      rollupTypes: true,
+      include: ['src/slim-select/vue/**/*'],
+      exclude: ['src/slim-select/**/*.test.ts', 'src/docs/**/*']
+    })
+  ]
+})

package/vitest.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.test.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html', 'lcov'],
+      include: ['src/slim-select/**/*.ts'],
+      exclude: ['src/slim-select/**/*.test.ts', 'src/slim-select/vue/index.ts'],
+      thresholds: {
+        lines: 75,
+        functions: 75,
+        branches: 75,
+        statements: 75
+      }
+    }
+  }
+})

package/dist/classes.d.ts

@@ -1,43 +0,0 @@
-export default class CssClasses {
-    main: string;
-    placeholder: string;
-    values: string;
-    single: string;
-    max: string;
-    value: string;
-    valueText: string;
-    valueDelete: string;
-    valueOut: string;
-    deselect: string;
-    deselectPath: string;
-    arrow: string;
-    arrowClose: string;
-    arrowOpen: string;
-    content: string;
-    openAbove: string;
-    openBelow: string;
-    search: string;
-    searchHighlighter: string;
-    searching: string;
-    addable: string;
-    addablePath: string;
-    list: string;
-    optgroup: string;
-    optgroupLabel: string;
-    optgroupLabelText: string;
-    optgroupActions: string;
-    optgroupSelectAll: string;
-    optgroupSelectAllBox: string;
-    optgroupSelectAllCheck: string;
-    optgroupClosable: string;
-    option: string;
-    optionDelete: string;
-    highlighted: string;
-    open: string;
-    close: string;
-    selected: string;
-    error: string;
-    disabled: string;
-    hide: string;
-    constructor(classes?: Partial<CssClasses>);
-}

package/dist/helpers.d.ts

@@ -1,5 +0,0 @@
-export declare function generateID(): string;
-export declare function hasClassInTree(element: HTMLElement, className: string): HTMLElement | null;
-export declare function debounce<T extends (...args: any[]) => void>(func: T, wait?: number, immediate?: boolean): () => void;
-export declare function isEqual(a: any, b: any): boolean;
-export declare function kebabCase(str: string): string;

package/dist/render.d.ts

@@ -1,81 +0,0 @@
-import Settings from './settings';
-import Store, { DataArray, Option, OptionOptional } from './store';
-import CssClasses from './classes';
-export interface Callbacks {
-    open: () => void;
-    close: () => void;
-    addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string | false | undefined | null | Error;
-    setSelected: (value: string | string[], runAfterChange: boolean) => void;
-    addOption: (option: Option) => void;
-    search: (search: string) => void;
-    beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void;
-    afterChange?: (newVal: Option[]) => void;
-}
-export interface Main {
-    main: HTMLDivElement;
-    values: HTMLDivElement;
-    deselect: {
-        main: HTMLDivElement;
-        svg: SVGSVGElement;
-        path: SVGPathElement;
-    };
-    arrow: {
-        main: SVGSVGElement;
-        path: SVGPathElement;
-    };
-}
-export interface Content {
-    main: HTMLDivElement;
-    search: Search;
-    list: HTMLDivElement;
-}
-export interface Search {
-    main: HTMLDivElement;
-    input: HTMLInputElement;
-    addable?: {
-        main: HTMLDivElement;
-        svg: SVGSVGElement;
-        path: SVGPathElement;
-    };
-}
-export default class Render {
-    settings: Settings;
-    store: Store;
-    callbacks: Callbacks;
-    private lastSelectedOption;
-    main: Main;
-    content: Content;
-    classes: CssClasses;
-    constructor(settings: Required<Settings>, classes: Required<CssClasses>, store: Store, callbacks: Callbacks);
-    enable(): void;
-    disable(): void;
-    open(): void;
-    close(): void;
-    updateClassStyles(): void;
-    updateAriaAttributes(): void;
-    mainDiv(): Main;
-    mainFocus(eventType: string | null): void;
-    placeholder(): HTMLDivElement;
-    renderValues(): void;
-    private renderSingleValue;
-    private renderMultipleValues;
-    multipleValue(option: Option): HTMLDivElement;
-    contentDiv(): Content;
-    moveContent(): void;
-    searchDiv(): Search;
-    searchFocus(): void;
-    getOptions(notPlaceholder?: boolean, notDisabled?: boolean, notHidden?: boolean): HTMLDivElement[];
-    highlight(dir: 'up' | 'down'): void;
-    listDiv(): HTMLDivElement;
-    renderError(error: string): void;
-    renderSearching(): void;
-    renderOptions(data: DataArray): void;
-    option(option: Option): HTMLDivElement;
-    destroy(): void;
-    private highlightText;
-    moveContentAbove(): void;
-    moveContentBelow(): void;
-    ensureElementInView(container: HTMLElement, element: HTMLElement): void;
-    putContent(): 'up' | 'down';
-    updateDeselectAll(): void;
-}

package/dist/select.d.ts

@@ -1,30 +0,0 @@
-import { DataArray, DataArrayPartial, Optgroup, OptgroupOptional, Option } from './store';
-export default class Select {
-    select: HTMLSelectElement;
-    onValueChange?: (value: Option[]) => void;
-    onClassChange?: (classes: string[]) => void;
-    onDisabledChange?: (disabled: boolean) => void;
-    onOptionsChange?: (data: DataArrayPartial) => void;
-    listen: boolean;
-    private observer;
-    constructor(select: HTMLSelectElement);
-    enable(): void;
-    disable(): void;
-    hideUI(): void;
-    showUI(): void;
-    changeListen(listen: boolean): void;
-    valueChange(ev: Event): boolean;
-    private observeCall;
-    getData(): DataArrayPartial;
-    getDataFromOptgroup(optgroup: HTMLOptGroupElement): OptgroupOptional;
-    getDataFromOption(option: HTMLOptionElement): Option;
-    getSelectedOptions(): Option[];
-    getSelectedValues(): string[];
-    setSelected(ids: string[]): void;
-    setSelectedByValue(values: string[]): void;
-    updateSelect(id?: string, style?: string, classes?: string[]): void;
-    updateOptions(data: DataArray): void;
-    createOptgroup(optgroup: Optgroup): HTMLOptGroupElement;
-    createOption(info: Option): HTMLOptionElement;
-    destroy(): void;
-}

package/dist/settings.d.ts

@@ -1,35 +0,0 @@
-export type SettingsPartial = Partial<Settings>;
-export default class Settings {
-    id: string;
-    style: string;
-    class: string[];
-    isMultiple: boolean;
-    isOpen: boolean;
-    isFullOpen: boolean;
-    intervalMove: NodeJS.Timeout | null;
-    disabled: boolean;
-    alwaysOpen: boolean;
-    showSearch: boolean;
-    focusSearch: boolean;
-    ariaLabel: string;
-    searchPlaceholder: string;
-    searchText: string;
-    searchingText: string;
-    searchHighlight: boolean;
-    closeOnSelect: boolean;
-    contentLocation: HTMLElement | null;
-    contentPosition: 'relative' | 'absolute' | 'fixed';
-    openPosition: 'auto' | 'up' | 'down';
-    placeholderText: string;
-    allowDeselect: boolean;
-    hideSelected: boolean;
-    keepOrder: boolean;
-    showOptionTooltips: boolean;
-    minSelected: number;
-    maxSelected: number;
-    timeoutDelay: number;
-    maxValuesShown: number;
-    maxValuesMessage: string;
-    addableText: string;
-    constructor(settings?: SettingsPartial);
-}