simp-select 1.0.0

package/src/style.css

@@ -0,0 +1,413 @@
+:root {
+	--simpS_bg: white;
+	--simpS_pad_hor: 15px;
+	--simpS_height_top: 40px;
+	--simpS_color: #27272a;
+	--simpS_color_light: #eae9e9;
+	--simpS_color_cheked: #d9d7d7;
+	--simpS_color_yes: green;
+	--simpS_color_no: red;
+	--simpS_color_placeholder: #5d5c5c;
+	--simpS_color_dis: #8b8b8b;
+	--simpS_radius: 4px;
+	--simpS_f_size: 16px;
+	--simpS_f_shadow: 0 0 3px 0 var(--simpS_color);
+
+
+	--simpS_size_check: 20px;
+
+	--simpS_li_h: 36px;
+
+	--simpS_btn_h: 34px;
+	--simpS_btn_bg: #f9f9f9;
+	--simpS_btn_bg_reverse: #eeecec;
+
+}
+.SimpleSel {
+	position: relative;
+	box-sizing: border-box;
+	color: var(--simpS_color);
+	font-size: var(--simpS_f_size);
+	user-select: none;
+}
+.SimpleSel--disabled {
+	color: var(--simpS_color_dis);
+	opacity: .8;
+
+}
+
+/* start all setting */
+
+.SimpleSel * {
+	box-sizing: border-box;
+}
+.SimpleSel :after,
+.SimpleSel :before {
+	box-sizing: border-box;
+}
+
+.SimpleSel__select_init {
+	position: absolute;
+	opacity: 0;
+	top: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+	/*z-index: 2;*/
+	box-sizing: border-box;
+}
+.SimpleSel__select_init--native {
+	z-index: 5;
+}
+
+/* end all setting */
+
+/* start Buttons */
+.SimpleSel__bottom_control,
+.SimpleSel__control {
+	margin: 0;
+	width: auto;
+	overflow: visible;
+	color: inherit;
+	font: inherit;
+	line-height: normal;
+	-webkit-font-smoothing: inherit;
+	-moz-osx-font-smoothing: inherit;
+	-webkit-appearance: none;
+	outline: none;
+	cursor: pointer;
+
+	background-color: var(--simpS_btn_bg);
+	padding: 1px 10px;
+	text-align: center;
+	border-radius: 0;
+	border: none;
+	display: flex;
+	align-content: center;
+	align-items: center;
+	justify-content: center;
+	height: var(--simpS_btn_h);
+}
+.SimpleSel__bottom_control:hover,
+.SimpleSel__control:hover {
+	background-color: var(--simpS_btn_bg_reverse);
+}
+/* end Buttons */
+
+/* start Checkbox */
+.SimpleSel__select_all__icon,
+.SimpleSel__list_item_icon,
+.SimpleSel__reset_all__icon {
+	width: var(--simpS_size_check);
+	height: var(--simpS_size_check);
+	position: relative;
+	border: 1px solid currentColor;
+	margin-right: 7px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--simpS_radius);
+}
+.SimpleSel__list_item_icon:before,
+.SimpleSel__select_all__icon:before {
+	content: "";
+	display: block;
+	transition: 0.25s all;
+	transform: rotate(45deg) translate(-17%, -10%);
+	top: 1px;
+	left: 4px;
+	/*width: 7px;*/
+	width: calc(var(--simpS_size_check) / 3);
+	height: calc(var(--simpS_size_check) / 2 + 1px);
+	border: solid currentColor;
+	border-width: 0 2px 2px 0;
+}
+/* end Checkbox */
+
+
+
+.SimpleSel__top {
+	position: relative;
+}
+.SimpleSel__top_body {
+	position: relative;
+
+	height: var(--simpS_height_top);
+	padding: 5px 0 5px var(--simpS_pad_hor);
+
+	background-color: var(--simpS_bg);
+	color: currentColor;
+	border: 2px solid currentColor;
+	border-radius: var(--simpS_radius);
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	cursor: pointer;
+}
+
+.SimpleSel--disabled .SimpleSel__top_body {
+	cursor: default;
+	user-select: none;
+}
+
+.SimpleSel__top_body:focus-visible {
+	box-shadow: var(--simpS_f_shadow);
+}
+
+.SimpleSel__title {
+	flex: 1;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: left;
+}
+
+.SimpleSel__icon {
+	width: var(--simpS_height_top);
+	height: var(--simpS_height_top);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+}
+.SimpleSel__icon:after {
+	content: '';
+	transition: .25s transform, .25s top;
+	width: 0.5em;
+	height: 0.5em;
+	border-bottom: 2px currentColor solid;
+	border-right: 2px currentColor solid;
+	display: inline;
+	position: absolute;
+	transform-origin: left top;
+	top: calc(50% - 2px);
+	left: 50%;
+	transform: rotate(45deg) translate(-50%,-50%);
+}
+.SimpleSel--open .SimpleSel__icon:after {
+	top: calc(50% + 2px);
+	transform: rotate(225deg) translate(-50%,-50%);
+}
+
+.SimpleSel__list_item--not_value,
+.SimpleSel--single[data-count-checked-full="0"] .SimpleSel__title,
+.SimpleSel__title--placeholder {
+	color: var(--simpS_color_placeholder);
+}
+
+
+.SimpleSel__body {
+	max-height: 0;
+	opacity: 0;
+	overflow: hidden;
+	overflow-y: auto;
+	position: absolute;
+	transition: .25s max-height, .1s opacity;
+	width: 100%;
+	border: 1px solid currentColor;
+	z-index: 3;
+	border-radius: var(--simpS_radius);
+	background-color: var(--simpS_bg);
+}
+
+.SimpleSel:not(.SimpleSel--up) .SimpleSel--multi {
+	top: 100%;
+	margin-top: 2px;
+}
+
+.SimpleSel--up:not(.SimpleSel--float) .SimpleSel__body {
+	bottom: 100%;
+	margin-bottom: 2px;
+}
+
+.SimpleSel--open .SimpleSel__body {
+	max-height: 230px;
+	opacity: 1;
+}
+
+.SimpleSel__search{
+	width: 100%;
+	border-radius: var(--simpS_radius);
+	padding: 2px var(--simpS_pad_hor);
+}
+.SimpleSel__search--top {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	opacity: 0;
+	display: none;
+}
+.SimpleSel--open .SimpleSel__search--top {
+	opacity: 1;
+	display: block;
+}
+.SimpleSel__search--dropdown {
+	border: none;
+	border-bottom: 1px solid currentColor;
+	border-radius: 0;
+	height: var(--simpS_btn_h);
+}
+
+/* controls */
+.SimpleSel__controls {
+	display: flex;
+	border-bottom: 1px solid currentColor;
+}
+.SimpleSel__control {
+	flex: 1;
+}
+.SimpleSel__control + .SimpleSel__control {
+	border-left: 1px solid;
+}
+.SimpleSel__select_all__icon {
+	color: var(--simpS_color_cheked);
+	border-radius: 50%;
+	border-color: var(--simpS_color_yes);
+}
+.SimpleSel[data-count-checked-full="0"] .SimpleSel__select_all__icon {
+	color: var(--simpS_color_light);
+}
+.SimpleSel[data-check-all-multi="yes"] .SimpleSel__select_all__icon {
+	color: var(--simpS_color_yes);
+}
+
+.SimpleSel__reset_all__icon {
+	position: relative;
+	border-radius: 50%;
+	color: var(--simpS_color_no);
+
+}
+.SimpleSel__reset_all__icon:before, .SimpleSel__reset_all__icon:after {
+	position: absolute;
+	left: calc(var(--simpS_f_size) / 2);
+	content: ' ';
+	height: 60%;
+	width: 2px;
+	background-color: currentColor;
+}
+.SimpleSel__reset_all__icon:before {
+	transform: rotate(45deg);
+}
+.SimpleSel__reset_all__icon:after {
+	transform: rotate(-45deg);
+}
+
+
+.SimpleSel__bottom_controls {
+	display: flex;
+	position: sticky;
+	border-top: 1px solid currentColor;
+	margin-top: 5px;
+	bottom: 0;
+}
+.SimpleSel__bottom_control--hide {
+	display: none;
+}
+.SimpleSel__bottom_control {
+	flex: 1;
+}
+.SimpleSel__bottom_control--ok{
+	text-transform: uppercase;
+}
+.SimpleSel__bottom_control + .SimpleSel__bottom_control {
+	border-left: 1px solid  ;
+}
+
+
+/**List*/
+.SimpleSel__list {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+.SimpleSel__group_items:not(:first-child) {
+	margin-top: 5px;
+}
+.SimpleSel__group_title {
+	font-weight: bold;
+	display: block;
+	padding: 6px 10px ;
+	margin-bottom: 2px;
+	font-size: 1.02em;
+	background-color: var(--simpS_color_light);
+}
+
+.SimpleSel__group {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+
+
+
+.SimpleSel__list_item {
+	cursor: pointer;
+}
+.SimpleSel__list_item:not(:last-child) {
+	border-bottom: 1px solid var(--simpS_color_light);
+}
+
+.SimpleSel__list_item--disabled {
+	opacity: .5;
+	cursor: default;
+}
+
+.SimpleSel__list_item_body {
+	padding: 5px var(--simpS_pad_hor);
+	display: flex;
+	align-items: center;
+	min-height: var(--simpS_li_h);
+}
+.SimpleSel__list_item_body:hover {
+	background-color: var(--simpS_color_light);
+}
+
+.SimpleSel--single .SimpleSel__list_item--checked {
+	background-color: var(--simpS_color_cheked);
+}
+
+.SimpleSel__list_item:not(.SimpleSel__list_item--checked) .SimpleSel__list_item_icon:before {
+	opacity: 0;
+	width: 0;
+	height: 0;
+}
+
+.SimpleSel__close {
+	display: none;
+}
+
+/* FLOAT */
+.SimpleSel--body_open {
+	overflow: hidden;
+	position: relative;
+}
+
+
+.SimpleSel--float .SimpleSel__body {
+	position: fixed;
+	max-width: 90%;
+	max-height: 90%;
+	left: 50%;
+	top: 50%;
+	overflow: hidden;
+	overflow-y: auto;
+	transform: translate(-50%, -50%);
+	flex-direction: column;
+	display: none;
+}
+.SimpleSel--open {
+	z-index: 7;
+}
+.SimpleSel--float.SimpleSel--open .SimpleSel__body{
+	display: flex;
+}
+
+.SimpleSel--float .SimpleSel__bottom_control--hide {
+	display: flex;
+}
+.SimpleSel--float .SimpleSel__list {
+	flex: 1;
+}

package/src/types/item.types.ts

@@ -0,0 +1,26 @@
+export interface IOptionItem {
+  id: string;
+  title: string;
+  value: string | null;
+  checked: boolean;
+  disabled: boolean;
+  position: number;
+  isShowFilter: boolean;
+}
+export interface IOptionItems {
+  idGroup: string;
+  isGroup: boolean;
+  titleGroup?: string;
+  isDisabledGroup?:boolean
+  items: IOptionItem[]
+  isShowFilter: boolean;
+}
+
+export interface ICreateLiReturn {
+  result: string;
+  countShow: number
+  countChecked: number
+  countCheckedFull: number
+}
+
+export type selectorType = string | HTMLSelectElement | NodeListOf<HTMLSelectElement> | HTMLSelectElement[];

package/src/types/simpleSelect.types.ts

@@ -0,0 +1,59 @@
+import { SimpleSelectItem } from '../simpleSelectItem';
+
+export interface ISimpleSelectLocale {
+  noSearch: string;
+  searchText: string;
+  title: string;
+  selected: string;
+  all: string;
+  ok: string;
+  cansel: string;
+
+  resetAll: string;
+  selectAll: string;
+}
+export interface ISimpleSelectOptions {
+  countShowSelected: number
+
+  isConfirmInMulti: boolean;
+  isConfirmInMultiOkClickOutside: boolean;
+
+  isSearch: boolean;
+  isSearchInDropdown: boolean;
+  nativeOnDevice: string[];
+  locale: ISimpleSelectLocale;
+
+  debounceTime?: number;
+
+  floatWidth?: number;
+
+  sepChars: string;
+
+  selectAll: boolean;
+  selectAllAfterClose: boolean;
+  resetAll: boolean;
+  resetAllAfterClose: boolean;
+  isCloneClass: boolean;
+
+  isUp: boolean;
+
+  detectNative?: () => boolean;
+
+  callbackInitialization?: (item:SimpleSelectItem) => void;
+  callbackInitialized?: (item:SimpleSelectItem) => void;
+  callbackOpen?: (item:SimpleSelectItem) => void;
+  callbackClose?: (item:SimpleSelectItem) => void;
+  callbackDestroyInit?: (item:SimpleSelectItem) => void;
+  callbackDestroy?: (item:SimpleSelectItem) => void;
+  callbackChangeSelect?: (e: Event, item:SimpleSelectItem) => void;
+
+  changeBodyLi?: (liBody:HTMLDivElement, option: HTMLOptionElement) => HTMLElement | string;
+}
+// export interface ISimpleSelectOptions extends Required<ISimpleSelectProps> {
+// }
+export interface IItemLocalOptions {
+  id: string;
+  isNative: boolean;
+}
+
+export type ISimpleSelectProps = Partial<ISimpleSelectOptions>;

package/src/utils/simpleSelection.utils.ts

@@ -0,0 +1,66 @@
+import { IOptionItem, IOptionItems } from '../types/item.types';
+import { initClass } from '../const/simpleSelection.const';
+
+export const toCamelCase = (input:string):string => input.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+
+export const createDataAttr = (name: string):string => `data-${name}`;
+
+export const ifTrueDataAttr = (attr: string | null): boolean => {
+  if (!attr) {
+    return false;
+  }
+  return attr === 'true' || attr === '1';
+};
+
+export function triggerInputEvent(element: HTMLElement, type = 'change') {
+  const event = new Event(type, {
+    bubbles: true,
+    cancelable: true,
+  });
+  element.dispatchEvent(event);
+}
+
+export const getCreateListItem = (item: HTMLSelectElement | HTMLOptGroupElement, idGroup: string, isGroup: boolean) => {
+  const options = item.querySelectorAll('option');
+  const items:IOptionItem[] = [];
+  options.forEach((option, ind) => {
+    items.push({
+      id: (ind + 1).toString(),
+      position: option.index,
+      title: option.innerHTML,
+      // value: option.value,
+      value: option.getAttribute('value'),
+      checked: option.selected,
+      disabled: option.disabled,
+      isShowFilter: true,
+    });
+  });
+  const newItem: IOptionItems = {
+    isGroup,
+    idGroup,
+    items,
+    isShowFilter: true,
+  };
+  if (item instanceof HTMLOptGroupElement) {
+    newItem.titleGroup = item.label || '';
+    newItem.isDisabledGroup = item.disabled || false;
+  }
+  return newItem;
+};
+
+export const getClass = (cls: string, mod = false, classInit = initClass): string => {
+  const sep = mod ? '--' : '__';
+  return `${classInit}${sep}${cls}`;
+};
+
+export const compareObj = <T1, T2>(obj1:T1, obj2:T2):boolean => JSON.stringify(obj1) === JSON.stringify(obj2);
+
+export const cloneObj = <T>(obj:T):T => JSON.parse(JSON.stringify(obj));
+
+export const createButton = (): HTMLButtonElement => {
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.tabIndex = -1;
+
+  return btn;
+};

package/src/utils/store.ts

@@ -0,0 +1,60 @@
+export function store<T>(obj:T) {
+  const stateData: Record<string, any> = {};
+  const subscribers: Record<string, any> = {}; /** подписка на конкретное свойство */
+  let subscribersAll: any = []; /** подписка на все свойства */
+
+  const getState = (k?:string) => {
+    if (!k) {
+      return stateData;
+    }
+    if (!(k in stateData)) {
+      return null;
+    }
+    return stateData[k];
+  };
+  const setState = (k:string, val:any) => {
+    const prevState = { ...stateData };
+    const prev = stateData[k] || stateData[k] == 0 ? stateData[k] : null;
+    stateData[k] = val;
+
+    if (k in subscribers) {
+      subscribers[k].forEach((cb:any) => cb(val, prev, stateData));
+    }
+    subscribersAll.forEach((cb:any) => cb(k, prevState, stateData));
+  };
+  if (obj) {
+    Object.keys(obj).forEach((k:string) => {
+      // @ts-ignore
+      setState(k, obj[k]);
+    });
+  }
+
+  return {
+    getState,
+    setState,
+
+    subscribe(k:string, cb: any) {
+      if (!(k in subscribers)) {
+        subscribers[k] = [];
+      }
+      subscribers[k].push(cb);
+      const cur = getState(k);
+      cb(cur, null, getState());
+      return () => {
+        subscribers[k] = subscribers[k].filter((i:any) => i !== cb);
+      };
+    },
+    subscribeAll(cb: any) {
+      subscribersAll.push(cb);
+      cb(null, null, getState());
+      return () => {
+        subscribersAll = subscribersAll.filter((i:any) => i !== cb);
+      };
+    },
+    unSubscribe(k:string, cb: any) {
+      if (k in subscribers) {
+        subscribers[k] = subscribers[k].filter((i: any) => i !== cb);
+      }
+    },
+  };
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"target": "ESNext",
+		"module": "CommonJS",
+		"lib": ["ESNext", "dom"],
+		"declaration": true,
+		"outDir": "dist",
+		"strict": true,
+		"esModuleInterop": true
+	},
+	"exclude": [
+		"node_modules",
+		"dist",
+		"test"
+	]
+}

package/webpack.config.js

@@ -0,0 +1,77 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+
+module.exports = ({ development }) => ({
+    entry: './src/simpleSelect.ts',
+  devtool: development ? 'inline-source-map' : false,
+  mode: development ? 'development' : 'production',
+  output: {
+    filename: 'simpleSelect.js',
+    path: path.resolve(__dirname, 'dist'),
+    library: 'SimpleSelect',
+    libraryExport: 'default',
+    libraryTarget: 'umd',
+    umdNamedDefine: true,
+    globalObject: 'typeof self === \'undefined\' ? this : self',
+  },
+  resolve: {
+    extensions: ['.ts', '.css']
+  },
+  plugins: [
+
+    new MiniCssExtractPlugin({
+      filename: 'style.css',
+    }),
+    new HtmlWebpackPlugin({
+      template: 'src/demo/index.html',
+      filename: './demo/index.html',
+      scriptLoading: "blocking",
+      inject: 'head',
+    }),
+    new MiniCssExtractPlugin(),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        use: ['babel-loader', 'ts-loader'],
+      },
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: "postcss-loader",
+            options: {
+              postcssOptions: {
+                plugins: [
+                  [
+                    "postcss-preset-env",
+                    {
+                      // Options
+                    },
+                  ],
+                ],
+              },
+            },
+          },
+        ],
+      }
+    ],
+  },
+
+  optimization: {
+    minimize: !development,
+    minimizer: !development ? [new CssMinimizerPlugin()] : [],
+  },
+});
+
+/*
+
+ */