slim-select 2.8.1 → 2.9.0

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 {};