@topvisor/ui 0.0.35 → 0.0.37

package/NPM.md

@@ -1,25 +0,0 @@
-# Введение в npm
-
-Скачать node.js (npm входит в состав node.js): https://nodejs.org/ru/download
-
-Описание файлов:
-
-- **package.json** - настройки разрабатываемого пакета, а также его зависимости, [документация](https://docs.npmjs.com/cli/v9/configuring-npm/package-json)
-- **package-lock.json** - информация об установленных версиях пакетов, [документация](https://docs.npmjs.com/cli/v9/configuring-npm/package-lock-json)
-
-Описание команд:
-
-> `npm i` - является сокращенной командой `npm install`
-
-> `npm i -D` - является сокращенной командой `npm install --save-dev`
-
-- `npm i -g npm@latest` - обновление npm до последней версии
-- `npm i` - установка зависимостей из файла **package.json**
-- `npm- ci i` - установка зависимостей из файла **package-lock.json**
-- `npm i {{ name }}` - установка конкретного пакета
-- `npm i -D {{ name }}` - установка конкретного пакета как dev зависимости
-
-Команду **npm ci** необходимо использовать в случаях, когда есть необходимость загрузки конкретных версий.
-Обычно это нужно для отладки и в сценариях CI/CD, которые обязаны использовать указанные вами версии.
-
-Если вы не знакомы с **npm** рекомендуется прочитать статью на хабре: [npm, package.json и package-lock.json](https://habr.com/ru/companies/ruvds/articles/423703/)

package/PUBLISH.md

@@ -1,18 +0,0 @@
-# Публикация в npm
-
-Не путать с публикацией Storybook.
-
-https://www.npmjs.com/package/topvisor-ui.
-
-Настройки и скрипты сборки см. в папке [build/](build/)
-
-- `npm run build` - выполнить сбоку
-- убедиться, что в сборке нет приватных данных, после публикации все файлы в /dist/ доступны в открытом доступе
-- `npm run publish` - запустить публикацию
-
-## Публикация в CDN
-
-После публикации в npm пакет будет автоматически доступен на следующих CDN:
-
-- https://unpkg.com/@topvisor/ui/
-- https://cdn.jsdelivr.net/npm/@topvisor/ui/

package/STORYBOOK.md

@@ -1,27 +0,0 @@
-# Storybook
-
-https://storybook.js.org/
-
-## Основные команды Storybook
-
-Информация о параметрах dev сервера и сборки: https://storybook.js.org/docs/react/api/cli-options
-
-- `npx storybook@latest init` - установка файлов Storybook в проект (в этом проекте повторно не выполнять)
-- `npx storybook@latest upgrade` - обновить Storybook в случае необходимости
-- `storybook dev` - запуск локального сервера Storybook
-- `storybook build` - запуск сборки Storybook
-
-## Локальный сервер разработки
-
-- `npm -i` - загрузить все зависимости проекта (выполнять один раз)
-- `npx storybook@latest upgrade` - обновить Storybook (в случае необходимости)
-- `npm run storybook` - запуск локального сервера Storybook
-
-## Сборка storybook в статический сайт
-
-Не путать со сборкой проекта @topvisor/ui.
-
-`storybook build` - выполнить сборку
-
-Сборка Storybook производится автоматически через CI/CD и публикуется по адресу: https://ui.topvisor.com/.
-Вам нет необходимости делать сборку самостоятельно.

package/USE_IN_PROJECT.md

@@ -1,29 +0,0 @@
-[![npm version](https://badge.fury.io/js/@topvisor%2Fui.svg)](https://badge.fury.io/js/@topvisor%2Fui)
-
-# Использование в других проектах
-
-## Использование @topvisor/ui после публикации, пример с topvisor.com
-
-Опубликованный пакет можно сразу использовать через публичный [CDN](PUBLISH.md#публикация-в-cdn).
-
-Подключение js пактов в topvisor.com настраивается в файле [requirejs.json](https://gitlab.topvisor.com/topvisor/topvisor.com/-/tree/master/requirejs.json).
-
-## Тестирование сборки  @topvisor/ui без публикации
-
-Для тестирования сборки используется локальный сервер предпросмотра vite preview с автосборкой vite build --watch.
-
-Получаемые файлы с этого сервера не кешируются.
-
-Режим автосборки автоматически пересобирает проект и новая сборка доступна на сервере предпросмотра.
-
-Адрес севера предпросмотра по умолчанию: http://localhost:4173
-
-- `npm run preview` - запустить сервер предпросмотра с автосборкой
-- в нужном проекте замените путь к @topvisor/ui на сервер предпросмотра
-
-Например: `https://cdn.jsdelivr.net/npm/@topvisor/ui` => `http://localhost:4173`
-
-## Использование topvisor-ui в другом проекте без публикации, пример с topvisor.dev
-
-- ```git submodule init``` - инициализация подмодуля в проекте
-- ```git submodule update``` - загрузка подмодуля, будет произведен clone репозитория подмодуля

package/build/afterBuild.sh

@@ -1,12 +0,0 @@
-echo ''
-echo 'run afterBuild...'
-
-echo '- remove /dist/for-delete/'
-rm -rf dist/for-delete/
-
-echo '- add icomoon'
-cp -r src/resources/icomoon dist/
-
-echo '- make package.json'
-cp package.json dist/
-npm pkg --prefix dist delete scripts devDependencies

package/build/cssModules.ts

@@ -1,39 +0,0 @@
-import stringHash from "string-hash";
-
-// https://github.com/madyankin/postcss-modules/blob/325f0b33f1b746eae7aa827504a5efd0949022ef/src/scoping.js#L36
-function generateScopedNameDefault(name, filename, css) {
-	const i = css.indexOf(`.${name}`);
-	const lineNumber = css.substr(0, i).split(/[\r\n]/).length;
-	const hash = stringHash(css).toString(36).substr(0, 5);
-
-	return `_${name}_${hash}_${lineNumber}`;
-}
-
-export default {
-	/**
-	 * Оставить глобальные классы без преобразования
-	 * С глобальными классами нельзя работать через css module
-	 * С глобальными классами можно работать, определяя их их в интерфесе vue css module
-	 * @param {type} name - имя класса
-	 * @param {type} filename - файл стилей
-	 * @param {type} css - стили
-	 * @returns {String} - имя класса после предкомпиляции
-	 */
-	generateScopedName: (name: string, filename: string, css: string) => {
-		const isGlobalCSS = (name: string, filename: string) => {
-			// классы topvisor-ui
-			if (name.indexOf('top-') === 0) return true;
-
-			return false;
-		};
-
-		if (isGlobalCSS(name, filename)) {
-			return name;
-		}
-
-		return generateScopedNameDefault(name, filename, css);
-	},
-	// globalModulePaths: [],
-	//	scopeBehaviour: 'global',
-	//	exportGlobals: true,
-}

package/build/plugin/amdFix.ts

@@ -1,46 +0,0 @@
-import glob from 'glob';
-import fs from 'fs';
-import type { UserConfig } from 'vite'
-
-/**
- * опеределить значение переменной vue в импорте requriejs
- * vue не предоставляет export для amd
- */
-export default () => {
-	return {
-		name: 'amd-fix',
-
-		async closeBundle() {
-			console.log('fix amd')
-
-			const amdFilenames = glob.sync('dist/**/*.amd.js');
-
-			const fixAMDFile = async (amdFilename: string) => {
-				console.log(amdFilename);
-
-				const data = await fs.promises.readFile(amdFilename, 'utf8');
-				const result = data.replace(/"use strict";/g, '"use strict"; if(typeof vue === "undefined") var vue = window.Vue;');
-				await fs.promises.writeFile(amdFilename, result, 'utf8');
-			}
-
-			console.time('amd-fix');
-
-			const tasks = amdFilenames.map((amdFilename) => fixAMDFile(amdFilename));
-
-			await Promise.all(tasks);
-
-			console.timeEnd('amd-fix');
-		},
-
-		config(config: UserConfig, env: { mode: string, command: string }) {
-			// в режиме watch запись в папку и ее очистка одновременно работать не будут
-			if (!config.build?.watch) return;
-
-			return {
-				build: {
-					emptyOutDir: false
-				}
-			}
-		}
-	}
-}

package/build/rollup.config.ts

@@ -1,18 +0,0 @@
-import type { RollupOptions } from 'rollup';
-
-export default {
-	external: ['vue'],
-	output: {
-		globals: {
-			vue: 'Vue',
-		},
-
-		// часто используемые компоненты вручную группируются по файлам
-		manualChunks: {
-			forms: [
-				'./src/components/forms/forms.ts',
-			],
-		},
-		chunkFileNames: '.chunks/[name]-[hash].[format].js',
-	},
-} satisfies RollupOptions;

package/nbproject/project.properties

@@ -1,11 +0,0 @@
-auxiliary.org-netbeans-modules-css-prep.less_2e_compiler_2e_options=
-auxiliary.org-netbeans-modules-css-prep.less_2e_enabled=false
-auxiliary.org-netbeans-modules-css-prep.less_2e_mappings=/less:/css
-auxiliary.org-netbeans-modules-css-prep.sass_2e_compiler_2e_options=
-auxiliary.org-netbeans-modules-css-prep.sass_2e_enabled=false
-auxiliary.org-netbeans-modules-css-prep.sass_2e_mappings=/scss:/css
-auxiliary.org-netbeans-modules-javascript2-json.json_2e_comments=true
-auxiliary.org-netbeans-modules-javascript2-requirejs.enabled=true
-files.encoding=UTF-8
-site.root.folder=
-source.folder=

package/nbproject/project.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project xmlns="http://www.netbeans.org/ns/project/1">
-    <type>org.netbeans.modules.web.clientproject</type>
-    <configuration>
-        <data xmlns="http://www.netbeans.org/ns/clientside-project/1">
-            <name>topvisor-ui</name>
-        </data>
-    </configuration>
-</project>

package/public/README.md

@@ -1,63 +0,0 @@
-# UI kit Topvisor Vue
-
-## Vue компоненты
-
-Компоненты поставляются в двух форматах:
-
-- amd (requirejs)
-- es
-
-Компоненты делятся на разные модули и доступны через импорт этих модулей.
-
-Каждый модуль находится в отдельной папке, соответствующей имени модулю.
-
-Все стили модулей находятся в корневой папке в файлах соответствующих имени модулю.
-
-Список всех компонентов см. на [npmjs](https://www.npmjs.com/package/topvisor-ui?activeTab=code).
-
-## Другие ресурсы
-
-- [core.css](core.css) - основная палитра цветов и стили компонентов
-- [light.css](light.css) - светлая тема
-- [dark.css](dark.css) - темная тема
-
-## Подключение стилей
-
-Стили компонентов подгружаются автоматически.
-
-Стили core.css необходимо подгрузить на страницу.
-
-```js
-import '@topvisor/ui/core.css';
-```
-
-Стили темы необходимо подгрузить на страницу.
-
-Для смены темы необходимо подгрузить файл стилей необходимой темы и сразу отключить стили предыдущей темы.
-
-```js
-import '@topvisor/ui/light.css';
-```
-
-Стили icomoon необходимо подгрузить на страницу.
-
-```js
-import '@topvisor/ui/icomoon/style.css';
-```
-
-## Подключение компонентов
-
-Пример подключения библиотеки Forms и компонента Button:
-
-```javascript
-requirejs(['@topvisor/ui/forms/forms.amd'], ({Button}) => {
-	console.log(Button);
-});
-
-requirejs(['@topvisor/ui/forms/forms.amd'], Forms => {
-	const { Button } = Forms;
-
-	console.log(Forms);
-	console.log(Button);
-});
-```

package/src/components/common/common.ts

@@ -1 +0,0 @@
-// export { default as Icon } from './icon/icon.vue'

package/src/components/common/icon/icon.ts

@@ -1,4 +0,0 @@
-export interface Props {
-	icon?: string
-	icon2?: string
-}

package/src/components/common/icon/icon.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { Props } from './icon'
-
-defineProps<Props>()
-</script>
-
-<template>
-    <div
-        :data-top-icon="icon"
-        :data-top-icon2="icon2"
-    ></div>
-</template>
-
-<!-- см resources/styles/core/icon.css -->
-<style></style>

package/src/components/component.ts

@@ -1,133 +0,0 @@
-import DOM from '@/core/utils/dom';
-
-/**
- * Базовый компонент для js компонентов, не имеет отношения к Vue
- */
-class Component {
-
-	static componentName = 'Top';
-
-	componentName: string | undefined; // имя класса компонента
-	className: string | undefined; // имя css класса компонента
-	uid: string | undefined; // уникальный id компонента
-	el: Element | undefined; // элемент, связанный с компонентом
-	options = {}; // параметры компонента
-
-	unmountEls: Element[] = [];
-	unmountEvents: any[] = [];
-
-	// переопредлять нельзя
-	// если компонент инициирован, необходимо сразу его вернуть и выполнить reInit() вместо mount()
-	// используется init вместо constructor, так как super constructor выполняется до Object.defineProperty() параметров класса
-	init (componentName: string, el: Element, options: object): Component | void {
-		if (!el) {
-			throw componentName + ': el is undefined';
-		}
-
-		const component = Component.getComponent(el, componentName);
-
-		if (component) {
-			component.reInit(options);
-
-			return component;
-		}
-
-		this.componentName = componentName;
-		this.className = 'top' + componentName[0].toUpperCase() + componentName.substring(1);
-		this.uid = this.componentName + (Math.random() + '').replace('.', '');
-
-		this._setComponent(el);
-		this.el = el;
-		this.el.classList.add(this.className);
-		this.options = Object.assign(this.options, options);
-
-		this.mount();
-	}
-
-	// получить инициированный компонент
-	static getComponent (el: Element, componentName: string): any {
-		return DOM.storage(el, '#' + componentName);
-	}
-
-	// устанвоить компонент
-	_setComponent (el: Element) {
-		DOM.storage(el, '#' + this.componentName, this);
-	}
-
-	// функция подключения компонента
-	mount (): void {
-		throw 'Please, add method mount() to component: ' + this.componentName;
-	}
-
-	// функция отключения компонента
-	unmount (): void {
-		DOM.storage(this.el, '#' + this.componentName, null);
-
-		this.unmountEls.forEach((el) => {
-			el.remove();
-		});
-
-		this.unmountEls = [];
-
-		this.unmountEvents.forEach((eventData) => {
-			eventData.el.removeEventListener(eventData.type, eventData.listener, eventData.options);
-		});
-
-		this.unmountEvents = [];
-	}
-
-	// указание новые элементы, которые должны будут удалиться после unmount
-	registerElForUnmount (el: Element): void {
-		this.unmountEls.push(el);
-	}
-
-	// указание новые события, которые должны будут удалиться после unmount
-	addEventListenerWithUnmount (
-		el: Element | Document,
-		type: keyof GlobalEventHandlersEventMap,
-		listener: (this: Element, e: Event) => any,
-		options?: any,
-	): void {
-		el.addEventListener(type, listener, options);
-
-		this.registerEventForUnmount(el, type, listener, options);
-	}
-
-	// указание новые события, которые должны будут удалиться после unmount
-	registerEventForUnmount (
-		el: Element | Document,
-		type: keyof GlobalEventHandlersEventMap,
-		listener: (this: Element, e: Event) => any,
-		options?: any
-	): void {
-		const eventData = {
-			el: el,
-			type: type,
-			listener: listener,
-			options: options,
-		};
-
-		this.unmountEvents.push(eventData);
-	}
-
-	// функция перенастройки уже подключенного компонента
-	reInit (_options: object): void {
-		throw 'Please, add method reInit() to component: ' + this.componentName;
-	}
-
-	static detach (nodes: Node[]): void
-	static detach (nodes: Element): void
-
-	// удалить элементы из DOM, но не из памяти
-	static detach (nodes: any): void {
-		if (nodes.forEach) {
-			nodes.forEach((node: Node) => node.parentElement?.removeChild(node));
-		} else {
-			const el = nodes;
-			el.parentElement?.removeChild(el);
-		}
-	}
-
-}
-
-export default Component;

package/src/components/forms/button/button.stories.ts

@@ -1,112 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
-import Component from './button.vue';
-import * as ComponentsConst from './button';
-import ReadMe from './stories/README.md?raw';
-import OverviewComponent from './stories/overview.vue';
-
-const argTypes = genArgsTypes(Component, ComponentsConst, true);
-
-const meta = {
-	component: Component,
-	tags: ['autodocs'],
-	argTypes,
-	parameters: {
-		docs: {
-			description: {
-				component: ReadMe,
-			},
-		},
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/M7y5HgfqK3JK3Nyy7XnCJx/Princip-Design-components?type=design&node-id=2505%3A69049&mode=design&t=J7nDcOXsvdJ3b4wE-1',
-		},
-	},
-} satisfies Meta<typeof Component>;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground = {} satisfies Story;
-
-export const Overview: Story = genOverviewStory({
-	args: {
-		disabled: false,
-		isSubmit: false,
-		isActive: false,
-		isProgress: false,
-		href: '',
-		icon: '😊',
-		icon2: '😁',
-	},
-}, OverviewComponent);
-
-export const Regular = {
-	args: {
-		default: 'Первостепенная цветная',
-		title: 'Стандартня кнопка первостепенного значения, цвет настраивается через props color',
-		color: 'blue',
-	},
-} satisfies Story;
-
-export const RegularTheme = {
-	args: {
-		default: 'Второстепенная Theme',
-		title: 'Стандартня кнопка второстепенного значения, цвет Theme',
-		color: 'theme',
-	},
-} satisfies Story;
-
-export const Soft = {
-	args: {
-		default: 'Мягкая цветная',
-		title: 'Для выраженных второстепенных кнопок',
-		color: 'blue',
-		styling: 'soft',
-	},
-} satisfies Story;
-
-export const SoftTheme = {
-	args: {
-		default: 'Мягкая Theme',
-		title: 'Для выраженных второстепенных кнопок',
-		color: 'theme',
-		styling: 'soft',
-	},
-} satisfies Story;
-
-export const Outline = {
-	args: {
-		default: 'Без фона цветная',
-		title: 'Для кнопок дополнительного функционала',
-		color: 'blue',
-		styling: 'outline',
-	},
-} satisfies Story;
-
-export const OutlineTheme = {
-	args: {
-		default: 'Без фона Theme',
-		title: 'Для кнопок дополнительного функционала',
-		color: 'theme',
-		styling: 'outline',
-	},
-} satisfies Story;
-
-export const Icons = {
-	args: {
-		default: 'Кнопка с иконками',
-		title: 'В качестве иконок можно вставлять emoji или символы шрифта с иконками. Меняйте props icon и icon2',
-		icon: '😊',
-		icon2: '😁',
-	},
-} satisfies Story;
-
-export const OnlyOneIcons = {
-	args: {
-		title: 'Кнопка с иконкой без текста',
-		icon: '😊',
-	},
-} satisfies Story;
-
-export default meta;

package/src/components/forms/button/button.ts

@@ -1,51 +0,0 @@
-import type { Size } from '@/components/forms/helpers';
-import { sizes } from '@/components/forms/helpers';
-
-/**
- * Определение параметров
- */
-export interface Props {
-	color?: Color;
-	styling?: Style; // bug: name = style init with object type
-	size?: Size;
-
-	name?: string;
-	title?: string;
-	icon?: string;
-	icon2?: string;
-
-	href?: string; // если установлена ссылка, isSubmit не может быть true
-	// value?: string
-
-	disabled?: boolean;
-	isSubmit?: boolean;
-	isActive?: boolean;
-	isProgress?: boolean;
-}
-
-/**
- * Определение событий
- */
-export interface Emits {}
-
-export const colors = {
-	theme: 'theme',
-	blue: 'blue',
-	green: 'green',
-	orange: 'orange',
-	red: 'red',
-	pink: 'pink',
-} as const;
-
-export type Color = typeof colors[keyof typeof colors];
-
-export const styles = {
-	Regular: '',
-	Outline: 'outline',
-	Soft: 'soft',
-	Transparent: 'transparent',
-} as const;
-
-export type Style = typeof styles[keyof typeof styles];
-
-export { sizes };