slim-select 2.8.2 → 2.9.1

package/src/react/src/slimselect.tsx

@@ -1,148 +0,0 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react'
-import { useEffect } from 'react'
-
-import SlimSelect, { Events, Config } from '../../slim-select'
-import { SettingsPartial } from '../../slim-select/settings'
-import { DataArrayPartial, Option } from '../../slim-select/store'
-import '../../slim-select/slimselect.scss'
-
-export type SlimSelectProps = {
-  style?: React.CSSProperties
-  id?: string | undefined
-  modelValue?: string | string[] | undefined
-  multiple?: boolean
-  data?: DataArrayPartial
-  settings?: SettingsPartial
-  events?: Events
-  children?: React.ReactNode
-}
-export interface SlimSelectRef {
-  set: (newValue: string | string[]) => void
-  // Potentially call other functions on SlimSelect that have not been exposed via Ref yet
-  getSlimSelectInstance: () => SlimSelect
-}
-
-const SlimSelectComponent = (props: SlimSelectProps, ref: React.Ref<any>): JSX.Element => {
-  const { id = undefined, modelValue, style = {}, multiple = false, data, settings, events, children } = props
-
-  const slimHTMLElement = useRef(null)
-  const slimSelect = useRef<SlimSelect>()
-  const value = useRef<any>()
-
-  useEffect(() => {
-    const config = {
-      select: slimHTMLElement.current as unknown as Element,
-      events: {},
-    } as Config
-
-    // If data is passed in, use it
-    if (data) {
-      config.data = data
-    }
-    // If settings are passed in, use it
-    if (settings) {
-      config.settings = settings
-    }
-    // If events are passed in, use it
-    if (events) {
-      config.events = events
-    }
-    // Satisfy tsc
-    if (config.events == undefined) {
-      config.events = {}
-    }
-
-    // Wrap config.events.afterChange to run value update
-    const originalPropAfterChange = config.events.afterChange
-
-    config.events.afterChange = function (newSelectedOption: Option[]): void {
-      if (Array.isArray(newSelectedOption) && newSelectedOption.length > 0) {
-        const stringValue = multiple ? newSelectedOption.map((option) => option.value) : newSelectedOption[0].value
-        if (value.current !== stringValue) {
-          value.current = stringValue
-        }
-        // If they had an original afterChange, run it
-        if (config.events && originalPropAfterChange && typeof originalPropAfterChange === 'function') {
-          originalPropAfterChange(newSelectedOption)
-        }
-      }
-    }
-
-    // Initialize SlimSelect
-    slimSelect.current = new SlimSelect(config)
-
-    // Get SlimSelect selected values
-    const selected = multiple
-      ? (slimSelect.current as SlimSelect).getSelected()
-      : (slimSelect.current as SlimSelect).getSelected()[0]
-
-    // Check if modelValue is the same as the value of the select
-    if (selected !== modelValue && modelValue) {
-      // If not, set the value of the select to the modelValue
-      ;(slimSelect.current as SlimSelect).setSelected(modelValue)
-    }
-
-    // Destroy SlimSelect on unmount
-    return () => {
-      if (slimSelect.current) {
-        ;(slimSelect.current as SlimSelect)?.destroy()
-      }
-    }
-  }, [modelValue, multiple, data, settings, events, children])
-
-  const getCleanValue = useCallback(
-    (val: string | string[] | undefined): string | string[] => {
-      const multi = multiple
-
-      // If its multiple and the modelValue is a string, return an array with the string
-      if (typeof val === 'string') {
-        return multi ? [val] : val
-      }
-
-      // If its not multiple and the modelValue is an array, return the first item
-      if (Array.isArray(val)) {
-        return multi ? val : val[0]
-      }
-
-      return multi ? [] : ''
-    },
-    [multiple],
-  )
-
-  useEffect(() => {
-    if (modelValue) {
-      ;(slimSelect.current as SlimSelect)?.setSelected(getCleanValue(modelValue))
-    }
-  }, [modelValue, getCleanValue])
-
-  useEffect(() => {
-    if (data) {
-      ;(slimSelect.current as SlimSelect)?.setData(data)
-    }
-  }, [data])
-
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        set(newValue: string | string[]): void {
-          ;(slimSelect.current as SlimSelect)?.setSelected(newValue)
-        },
-        getSlimSelectInstance(): SlimSelect {
-          return slimSelect.current as SlimSelect
-        },
-      } as SlimSelectRef
-    },
-    [],
-  )
-
-  return (
-    <>
-      <select style={style} id={id} data-testid={id} multiple={multiple} ref={slimHTMLElement}>
-        {children}
-      </select>
-    </>
-  )
-}
-
-export default forwardRef(SlimSelectComponent)

package/src/react/tests/slimselect.test.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-
-import { render } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import '@testing-library/jest-dom/extend-expect'
-
-import 'jest-canvas-mock'
-
-import SlimSelectComponent from '../src/slimselect'
-
-describe('Slim Select', () => {
-  console.log(React.version)
-  it('renders successfully', () => {
-    const { queryByTestId, queryAllByText, getByText } = render(
-      <SlimSelectComponent id="slimselect" ref={null} multiple={true}>
-        <option value={'value1'}>Value 1</option>
-        <option value={'value2'}>Value 2</option>
-        <option value={'value3'}>Value 3</option>
-      </SlimSelectComponent>,
-    )
-    expect(queryByTestId('slimselect')).not.toEqual(null)
-    expect(queryByTestId('slimselect')).not.toBeVisible()
-    expect(getByText('Select Value')).not.toEqual(null)
-    expect(queryAllByText('Value 1')[1].getAttribute('aria-selected')).toEqual('false')
-    expect(queryAllByText('Value 2')[1].getAttribute('aria-selected')).toEqual('false')
-    expect(queryAllByText('Value 3')[1].getAttribute('aria-selected')).toEqual('false')
-  })
-  it('can be selected with onchange callback', async () => {
-    const { queryAllByText } = render(
-      <SlimSelectComponent id="slimselect" ref={null} multiple={true}>
-        <option value={'value1'}>Value 1</option>
-        <option value={'value2'}>Value 2</option>
-        <option value={'value3'}>Value 3</option>
-      </SlimSelectComponent>,
-    )
-
-    // First original html select element gets hidden, after comes slimselect div - that is why array index = 1
-    const firstSlimOption = queryAllByText('Value 1')[1]
-    const thirdSlimOpption = queryAllByText('Value 3')[1]
-
-    expect(firstSlimOption).not.toBeUndefined()
-    expect(thirdSlimOpption).not.toBeUndefined()
-
-    await userEvent.click(firstSlimOption as HTMLElement)
-    await userEvent.click(thirdSlimOpption as HTMLElement)
-
-    expect(queryAllByText('Select Value')).toHaveLength(0)
-    expect(queryAllByText('Value 1')[1].getAttribute('aria-selected')).toEqual('true')
-    expect(queryAllByText('Value 2')[1].getAttribute('aria-selected')).toEqual('false')
-    expect(queryAllByText('Value 3')[1].getAttribute('aria-selected')).toEqual('true')
-  })
-})

package/src/react/tsconfig.json

@@ -1,37 +0,0 @@
-{
-  "exclude": ["dist", "node_modules"],
-  "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "importHelpers": true,
-    "declaration": true,
-    "sourceMap": true,
-    //"rootDir": "./src",
-    "outDir": "./dist",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-
-    /* Bundler mode */
-    "moduleResolution": "node",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitReturns": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "paths": {
-      "react": ["./node_modules/@types/react"]
-    }
-  },
-  "include": ["./src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/src/react/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/src/react/vite.config.ts

@@ -1,55 +0,0 @@
-import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
-import { babel } from '@rollup/plugin-babel'
-import commonjs from '@rollup/plugin-commonjs'
-import peerDepsExternal from 'rollup-plugin-peer-deps-external'
-import dts from 'vite-plugin-dts'
-
-const formatNameMap = {
-  iife: 'global',
-  cjs: 'ssr',
-  es: 'es',
-}
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    react(),
-    dts({
-      insertTypesEntry: true,
-      skipDiagnostics: true,
-    }),
-  ],
-  build: {
-    target: 'modules',
-    lib: {
-      // Could also be a dictionary or array of multiple entry points
-      entry: 'src/index.ts',
-      formats: ['es', 'cjs', 'iife'],
-      name: 'SlimSelectReact',
-      // the proper extensions will be added
-      fileName: (format) => `slimselectreact.${formatNameMap[format]}.js`,
-    },
-    rollupOptions: {
-      // make sure to externalize deps that shouldn't be bundled
-      // into your library
-      // external: ['react', 'react-dom'],
-      plugins: [
-        peerDepsExternal(),
-        babel({
-          babelHelpers: 'bundled',
-          presets: ['@babel/preset-env', '@babel/preset-react'],
-          exclude: '../../node_modules/',
-        }),
-        commonjs(),
-      ],
-      output: {
-        // for externalized deps
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-        },
-      },
-    },
-  },
-})

package/src/vue/README.md

@@ -1,48 +0,0 @@
-# Slim Select Vue
-
-## slimselectjs.com
-
-Vue integration for the SlimSelect
-
-See the website for the best details on how to use the vue integration
-
-[![NPM Downloads](https://img.shields.io/npm/dt/@slim-select/vue)](https://www.npmjs.com/package/@slim-select/vue)
-
-## Support
-
-[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/brianvoe)
-
-<a href="https://www.buymeacoffee.com/brianvoe" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
-
-## Installation
-
-```bash
-npm install @slim-select/vue
-```
-
-## Usage
-
-```javascript
-import { defineComponent } from 'vue'
-import SlimSelect from '@slim-select/vue'
-
-export default defineComponent({
-  components: {
-    SlimSelect,
-  },
-})
-```
-
-```html
-<SlimSelect>
-  <option value="1">Option 1</option>
-  <option value="2">Option 2</option>
-  <option value="3">Option 3</option>
-</SlimSelect>
-
-<SlimSelect multiple>
-  <option value="1">Option 1</option>
-  <option value="2">Option 2</option>
-  <option value="3">Option 3</option>
-</SlimSelect>
-```

package/src/vue/dist/slim-select/helpers.d.ts

@@ -1,5 +0,0 @@
-export declare function generateID(): string;
-export declare function hasClassInTree(element: HTMLElement, className: string): any;
-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/src/vue/dist/slim-select/index.d.ts

@@ -1,46 +0,0 @@
-import Render from './render';
-import Select from './select';
-import Settings, { SettingsPartial } from './settings';
-import Store, { DataArray, DataArrayPartial, Option, OptionOptional } from './store';
-export interface Config {
-    select: string | Element;
-    data?: DataArrayPartial;
-    settings?: SettingsPartial;
-    events?: Events;
-}
-export interface Events {
-    search?: (searchValue: string, currentData: DataArray) => Promise<DataArrayPartial> | DataArrayPartial;
-    searchFilter?: (option: Option, search: string) => boolean;
-    addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string | false | null | undefined;
-    beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void;
-    afterChange?: (newVal: Option[]) => void;
-    beforeOpen?: () => void;
-    afterOpen?: () => void;
-    beforeClose?: () => void;
-    afterClose?: () => void;
-    error?: (err: Error) => void;
-}
-export default class SlimSelect {
-    selectEl: HTMLSelectElement;
-    settings: Settings;
-    select: Select;
-    store: Store;
-    render: Render;
-    events: Events;
-    constructor(config: Config);
-    enable(): void;
-    disable(): void;
-    getData(): DataArray;
-    setData(data: DataArrayPartial): void;
-    getSelected(): string[];
-    setSelected(value: string | string[], runAfterChange?: boolean): void;
-    addOption(option: OptionOptional): void;
-    open(): void;
-    close(eventType?: string | null): void;
-    search(value: string): void;
-    destroy(): void;
-    private windowResize;
-    private windowScroll;
-    private documentClick;
-    private windowVisibilityChange;
-}

package/src/vue/dist/slim-select/render.d.ts

@@ -1,120 +0,0 @@
-import Settings from './settings';
-import Store, { DataArray, Option, OptionOptional } from './store';
-export interface Callbacks {
-    open: () => void;
-    close: () => void;
-    addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string | false | undefined | null;
-    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;
-    main: Main;
-    content: Content;
-    classes: {
-        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(settings: Required<Settings>, 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/src/vue/dist/slim-select/select.d.ts

@@ -1,28 +0,0 @@
-import { DataArray, DataArrayPartial, Optgroup, OptgroupOptional, Option } from './store';
-export default class Select {
-    select: HTMLSelectElement;
-    onValueChange?: (value: string[]) => 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;
-    getSelectedValues(): string[];
-    setSelected(value: 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/src/vue/dist/slim-select/settings.d.ts

@@ -1,34 +0,0 @@
-/// <reference types="node" />
-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;
-    ariaLabel: string;
-    searchPlaceholder: string;
-    searchText: string;
-    searchingText: string;
-    searchHighlight: boolean;
-    closeOnSelect: boolean;
-    contentLocation: HTMLElement;
-    contentPosition: 'relative' | 'absolute';
-    openPosition: 'auto' | 'up' | 'down';
-    placeholderText: string;
-    allowDeselect: boolean;
-    hideSelected: boolean;
-    keepOrder: boolean;
-    showOptionTooltips: boolean;
-    minSelected: number;
-    maxSelected: number;
-    timeoutDelay: number;
-    maxValuesShown: number;
-    maxValuesMessage: string;
-    constructor(settings?: SettingsPartial);
-}

package/src/vue/dist/slim-select/store.d.ts

@@ -1,80 +0,0 @@
-export type DataArray = DataObject[];
-export type DataObject = Optgroup | Option;
-export type DataArrayPartial = DataObjectPartial[];
-export type DataObjectPartial = OptgroupOptional | OptionOptional;
-type selectType = 'single' | 'multiple';
-export interface OptgroupOptional {
-    id?: string;
-    label: string;
-    selectAll?: boolean;
-    selectAllText?: string;
-    closable?: 'off' | 'open' | 'close';
-    options?: OptionOptional[];
-}
-export declare class Optgroup {
-    id: string;
-    label: string;
-    selectAll: boolean;
-    selectAllText: string;
-    closable: 'off' | 'open' | 'close';
-    options: Option[];
-    constructor(optgroup: OptgroupOptional);
-}
-export interface OptionOptional {
-    id?: string;
-    value?: string;
-    text: string;
-    html?: string;
-    selected?: boolean;
-    display?: boolean;
-    disabled?: boolean;
-    mandatory?: boolean;
-    placeholder?: boolean;
-    class?: string;
-    style?: string;
-    data?: {
-        [key: string]: string;
-    };
-}
-export declare class Option {
-    id: string;
-    value: string;
-    text: string;
-    html: string;
-    selected: boolean;
-    display: boolean;
-    disabled: boolean;
-    placeholder: boolean;
-    class: string;
-    style: string;
-    data: {
-        [key: string]: string;
-    };
-    mandatory: boolean;
-    constructor(option: OptionOptional);
-}
-export default class Store {
-    private selectType;
-    private data;
-    constructor(type: selectType, data: DataArrayPartial);
-    validateDataArray(data: DataArray | DataArrayPartial): Error | null;
-    validateOption(option: Option | OptionOptional): Error | null;
-    partialToFullData(data: DataArrayPartial): DataArray;
-    setData(data: DataArray | DataArrayPartial): void;
-    getData(): DataArray;
-    getDataOptions(): Option[];
-    addOption(option: OptionOptional): void;
-    setSelectedBy(selectedType: 'id' | 'value', selectedValues: string[]): void;
-    getSelected(): string[];
-    getSelectedOptions(): Option[];
-    getSelectedIDs(): string[];
-    getOptgroupByID(id: string): Optgroup | null;
-    getOptionByID(id: string): Option | null;
-    getSelectType(): string;
-    getFirstOption(): Option | null;
-    search(search: string, searchFilter: (opt: Option, search: string) => boolean): DataArray;
-    filter(filter: {
-        (opt: Option): boolean;
-    } | null, includeOptgroup: boolean): DataArray;
-}
-export {};