@topvisor/ui 0.0.9 → 0.0.10

package/README.md

@@ -30,14 +30,14 @@
 Подключение базовых стилей и переменных палитры.
 Стили сложных компонентов рекомендуется грузить асинхронно.
 
-```html
-import 'topvisor-ui/core.css';
+```js
+import '@topvisor/ui/core.css';
 ```
 
 Подключение стилей темы на примере светлой темы.
 
-```html
-import 'topvisor-ui/light.css';
+```js
+import '@topvisor/ui/light.css';
 ```
 
 Для смены темы необходимо подгрузить файл стилей необходимой темы и сразу отключить стили предыдущей темы.
@@ -45,7 +45,13 @@ import 'topvisor-ui/light.css';
 Подключение стилей основных компонентов.
 
 ```js
-import '@topvisor-ui/l/style.css';
+import '@topvisor/ui/l/style.css';
+```
+
+Подключение набора иконок шрифта icomoon.
+
+```js
+import '@topvisor/ui/icomoon/style.css';
 ```
 
 ## Подключение компонента

package/c/Icon/Icon.amd.js

@@ -0,0 +1,22 @@
+define(["vue"], function(vue) {
+  "use strict"; vue = vue ?? Vue;
+  const _hoisted_1 = ["data-g-icon", "data-g-icon2"];
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    __name: "icon",
+    props: {
+      icon: {},
+      icon2: {}
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          "data-g-icon": _ctx.icon,
+          "data-g-icon2": _ctx.icon2
+        }, null, 8, _hoisted_1);
+      };
+    }
+  });
+  const icon_vue_vue_type_style_index_0_lang = "";
+  return _sfc_main;
+});
+//# sourceMappingURL=Icon.amd.js.map

package/c/Icon/Icon.amd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.amd.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/c/Icon/Icon.js

@@ -0,0 +1,22 @@
+import { defineComponent, openBlock, createElementBlock } from "vue";
+const _hoisted_1 = ["data-g-icon", "data-g-icon2"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "icon",
+  props: {
+    icon: {},
+    icon2: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "data-g-icon": _ctx.icon,
+        "data-g-icon2": _ctx.icon2
+      }, null, 8, _hoisted_1);
+    };
+  }
+});
+const icon_vue_vue_type_style_index_0_lang = "";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=Icon.js.map

package/c/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/c/README.md

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

package/c/button/button.amd.js

@@ -77,7 +77,7 @@ define(["vue", "../_plugin-vue_export-helper-cb5c78ba"], function(vue, _pluginVu
       };
     }
   });
-  const progress = "top-progress";
+  const progress = "_progress_1k69v_1";
   const style0 = {
     "top-button": "top-button",
     "g-active": "g-active",

package/c/button/button.amd.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.amd.js","sources":["../../../src/components/forms/button/button.ts","../../../src/components/forms/button/button.vue"],"sourcesContent":["import type { VNode } from 'vue';\r\n\r\n/**\r\n * Определение параметров\r\n */\r\nexport interface Props {\r\n\tcolor?: COLOR\r\n\tstyling?: STYLING // bug: name = style init with object type\r\n\tsize?: SIZE\r\n\r\n\tname?: string\r\n\ttitle?: string\r\n\ticon?: string\r\n\ticon2?: string\r\n\r\n\thref?: string // если установлена ссылка, isSubmit не может быть true\r\n\t// value?: string\r\n\r\n\tdisabled?: boolean\r\n\tisSubmit?: boolean\r\n\tisActive?: boolean\r\n\tisProgress?: boolean\r\n}\r\n\r\n/**\r\n * Определение слотов\r\n */\r\nexport interface Slots {\r\n\t/**\r\n\t * Cлот с проивзольным содержимым\r\n\t */\r\n\tdefault(): VNode[];\r\n}\r\n\r\n/**\r\n * Определение событий\r\n */\r\nexport interface Emits { }\r\n\r\n/**\r\n * Цвета\r\n */\r\nexport enum COLOR {\r\n\tTheme = 'theme',\r\n\tBlue = 'blue',\r\n\tGreen = 'green',\r\n\tOrange = 'orange',\r\n\tRed = 'red',\r\n\tPink = 'pink',\r\n}\r\n\r\n/**\r\n * Стили\r\n */\r\nexport enum STYLING {\r\n\tRegular = '',\r\n\tOutline = 'outline',\r\n\tSoft = 'soft',\r\n\tTransparent = 'transparent',\r\n}\r\n\r\n/**\r\n * Размеры\r\n */\r\nexport enum SIZE {\r\n\tS = '',\r\n\tL = 'l',\r\n\tXL = 'xl',\r\n}","<script setup lang=\"ts\">\r\nimport { computed, useCssModule } from 'vue';\r\nimport type { Props } from './button';\r\nimport { COLOR, STYLING, SIZE } from './button';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcolor: COLOR.Blue,\r\n\tstyling: STYLING.Regular,\r\n\tsize: SIZE.S,\r\n});\r\n\r\nconst style = useCssModule();\r\n\r\nconst tagName = computed(() => props.href ? 'a' : 'button');\r\n\r\nconst type = computed(() => props.isSubmit ? 'submit' : undefined);\r\n\r\nconst classes = computed(() => {\r\n\treturn {\r\n\t\t['g']: true,\r\n\t\t['g-active']: props.isActive,\r\n\t\t['g-disabled']: props.disabled,\r\n\t\t[style['top-button']]: true,\r\n\t\t[style['top-button-progress']]: props.isProgress,\r\n\t\t[style[`g-size_${props.size}`]]: !!props.size,\r\n\t\t[style[`g-color_${props.color}`]]: true,\r\n\t\t[style[`g-style_${props.styling}`]]: !!props.styling,\r\n\t};\r\n});\r\n</script>\r\n\r\n<template>\r\n\t<component\r\n\t\t:is=\"tagName\"\r\n\t\t:class=\"classes\"\r\n\t\t:name=\"name\"\r\n\t\t:title=\"title\"\r\n\t\t:href=\"href\"\r\n\t\t:type=\"type\"\r\n\t\t:data-g-icon=\"icon || undefined\"\r\n\t\t:data-g-icon2=\"icon2 || undefined\"\r\n\t\t:disabled=\"disabled || undefined\"\r\n\t\t:inProgress=\"isProgress\"\r\n\t>\r\n\t\t<slot>{{ !icon ? \"Button\" : \"\" }}</slot>\r\n\t</component>\r\n</template>\r\n\r\n<style module>\r\n@import \"./style/button.css\";\r\n@import \"./style/style-outline.css\";\r\n@import \"./style/style-soft.css\";\r\n@import \"./style/style-transparent.css\";\r\n\r\n.top-button {\r\n\t--top-button-color: var(--color-white);\r\n\t--top-button-background-color: transparent;\r\n\t--top-button-background-color-hover: var(--top-button-background-color);\r\n\t--top-button-background-color-active: var(--top-button-background-color-hover);\r\n\t--top-button-background-color-selected: var(--top-button-background-color-hover);\r\n\t--top-button-box-shadow: none;\r\n\t--top-button-box-shadow-hover: var(--g-shadow-darken-2);\r\n\t--top-button-box-shadow-active: var(--g-shadow-darken-3);\r\n\t--top-button-box-shadow-selected: var(--g-shadow-darken-3);\r\n\t--g-forms-border-width: 0px;\r\n\t--g-icon-width: calc(var(--g-icon-size) + var(--g-forms-padding));\r\n\t--g-icon2-width: calc(var(--g-icon2-size) + var(--g-forms-padding));\r\n}\r\n\r\n.top-button.g-size_l {\r\n\t--g-forms-padding: var(--g-forms-padding_l);\r\n\t--g-forms-base-height: var(--g-forms-base-height_l);\r\n}\r\n\r\n.top-button.g-size_xl {\r\n\t--g-forms-padding: var(--g-forms-padding_xl);\r\n\t--g-forms-base-height: var(--g-forms-base-height_xl);\r\n}\r\n\r\n.top-button-progress {}\r\n</style>"],"names":["COLOR","STYLING","SIZE","useCssModule","computed"],"mappings":";;AA0CY,MAAA,0BAAAA,WAAL;AACNA,WAAA,OAAQ,IAAA;AACRA,WAAA,MAAO,IAAA;AACPA,WAAA,OAAQ,IAAA;AACRA,WAAA,QAAS,IAAA;AACTA,WAAA,KAAM,IAAA;AACNA,WAAA,MAAO,IAAA;AANIA,WAAAA;AAAAA,EAAA,GAAA,SAAA,CAAA,CAAA;AAYA,MAAA,4BAAAC,aAAL;AACNA,aAAA,SAAU,IAAA;AACVA,aAAA,SAAU,IAAA;AACVA,aAAA,MAAO,IAAA;AACPA,aAAA,aAAc,IAAA;AAJHA,WAAAA;AAAAA,EAAA,GAAA,WAAA,CAAA,CAAA;AAUA,MAAA,yBAAAC,UAAL;AACNA,UAAA,GAAI,IAAA;AACJA,UAAA,GAAI,IAAA;AACJA,UAAA,IAAK,IAAA;AAHMA,WAAAA;AAAAA,EAAA,GAAA,QAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;ACrDZ,YAAM,QAAQC,IAAAA;AAEd,YAAM,UAAUC,IAAAA,SAAS,MAAM,MAAM,OAAO,MAAM,QAAQ;AAE1D,YAAM,OAAOA,IAAAA,SAAS,MAAM,MAAM,WAAW,WAAW,MAAS;AAE3D,YAAA,UAAUA,IAAAA,SAAS,MAAM;AACvB,eAAA;AAAA,UACN,CAAC,GAAG,GAAG;AAAA,UACP,CAAC,UAAU,GAAG,MAAM;AAAA,UACpB,CAAC,YAAY,GAAG,MAAM;AAAA,UACtB,CAAC,MAAM,YAAY,CAAC,GAAG;AAAA,UACvB,CAAC,MAAM,qBAAqB,CAAC,GAAG,MAAM;AAAA,UACtC,CAAC,MAAM,UAAU,MAAM,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM;AAAA,UACzC,CAAC,MAAM,WAAW,MAAM,KAAK,EAAE,CAAC,GAAG;AAAA,UACnC,CAAC,MAAM,WAAW,MAAM,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM;AAAA,QAAA;AAAA,MAC9C,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button.amd.js","sources":["../../../src/components/forms/button/button.ts","../../../src/components/forms/button/button.vue"],"sourcesContent":["import type { VNode } from 'vue';\n\n/**\n * Определение параметров\n */\nexport interface Props {\n\tcolor?: COLOR\n\tstyling?: STYLING // bug: name = style init with object type\n\tsize?: SIZE\n\n\tname?: string\n\ttitle?: string\n\ticon?: string\n\ticon2?: string\n\n\thref?: string // если установлена ссылка, isSubmit не может быть true\n\t// value?: string\n\n\tdisabled?: boolean\n\tisSubmit?: boolean\n\tisActive?: boolean\n\tisProgress?: boolean\n}\n\n/**\n * Определение слотов\n */\nexport interface Slots {\n\t/**\n\t * Cлот с проивзольным содержимым\n\t */\n\tdefault(): VNode[];\n}\n\n/**\n * Определение событий\n */\nexport interface Emits { }\n\n/**\n * Цвета\n */\nexport enum COLOR {\n\tTheme = 'theme',\n\tBlue = 'blue',\n\tGreen = 'green',\n\tOrange = 'orange',\n\tRed = 'red',\n\tPink = 'pink',\n}\n\n/**\n * Стили\n */\nexport enum STYLING {\n\tRegular = '',\n\tOutline = 'outline',\n\tSoft = 'soft',\n\tTransparent = 'transparent',\n}\n\n/**\n * Размеры\n */\nexport enum SIZE {\n\tS = '',\n\tL = 'l',\n\tXL = 'xl',\n}","<script setup lang=\"ts\">\nimport { computed, useCssModule } from 'vue';\nimport type { Props } from './button';\nimport { COLOR, STYLING, SIZE } from './button';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tcolor: COLOR.Blue,\n\tstyling: STYLING.Regular,\n\tsize: SIZE.S,\n});\n\nconst style = useCssModule();\n\nconst tagName = computed(() => props.href ? 'a' : 'button');\n\nconst type = computed(() => props.isSubmit ? 'submit' : undefined);\n\nconst classes = computed(() => {\n\treturn {\n\t\t['g']: true,\n\t\t['g-active']: props.isActive,\n\t\t['g-disabled']: props.disabled,\n\t\t[style['top-button']]: true,\n\t\t[style['top-button-progress']]: props.isProgress,\n\t\t[style[`g-size_${props.size}`]]: !!props.size,\n\t\t[style[`g-color_${props.color}`]]: true,\n\t\t[style[`g-style_${props.styling}`]]: !!props.styling,\n\t};\n});\n</script>\n\n<template>\n\t<component\n\t\t:is=\"tagName\"\n\t\t:class=\"classes\"\n\t\t:name=\"name\"\n\t\t:title=\"title\"\n\t\t:href=\"href\"\n\t\t:type=\"type\"\n\t\t:data-g-icon=\"icon || undefined\"\n\t\t:data-g-icon2=\"icon2 || undefined\"\n\t\t:disabled=\"disabled || undefined\"\n\t\t:inProgress=\"isProgress\"\n\t>\n\t\t<slot>{{ !icon ? \"Button\" : \"\" }}</slot>\n\t</component>\n</template>\n\n<style module>\n@import \"./style/button.css\";\n@import \"./style/style-outline.css\";\n@import \"./style/style-soft.css\";\n@import \"./style/style-transparent.css\";\n\n.top-button {\n\t--top-button-color: var(--color-white);\n\t--top-button-background-color: transparent;\n\t--top-button-background-color-hover: var(--top-button-background-color);\n\t--top-button-background-color-active: var(--top-button-background-color-hover);\n\t--top-button-background-color-selected: var(--top-button-background-color-hover);\n\t--top-button-box-shadow: none;\n\t--top-button-box-shadow-hover: var(--g-shadow-darken-2);\n\t--top-button-box-shadow-active: var(--g-shadow-darken-3);\n\t--top-button-box-shadow-selected: var(--g-shadow-darken-3);\n\t--g-forms-border-width: 0px;\n\t--g-icon-width: calc(var(--g-icon-size) + var(--g-forms-padding));\n\t--g-icon2-width: calc(var(--g-icon2-size) + var(--g-forms-padding));\n}\n\n.top-button.g-size_l {\n\t--g-forms-padding: var(--g-forms-padding_l);\n\t--g-forms-base-height: var(--g-forms-base-height_l);\n}\n\n.top-button.g-size_xl {\n\t--g-forms-padding: var(--g-forms-padding_xl);\n\t--g-forms-base-height: var(--g-forms-base-height_xl);\n}\n\n.top-button-progress {}\n</style>"],"names":["COLOR","STYLING","SIZE","useCssModule","computed"],"mappings":";;AA0CY,MAAA,0BAAAA,WAAL;AACNA,WAAA,OAAQ,IAAA;AACRA,WAAA,MAAO,IAAA;AACPA,WAAA,OAAQ,IAAA;AACRA,WAAA,QAAS,IAAA;AACTA,WAAA,KAAM,IAAA;AACNA,WAAA,MAAO,IAAA;AANIA,WAAAA;AAAAA,EAAA,GAAA,SAAA,CAAA,CAAA;AAYA,MAAA,4BAAAC,aAAL;AACNA,aAAA,SAAU,IAAA;AACVA,aAAA,SAAU,IAAA;AACVA,aAAA,MAAO,IAAA;AACPA,aAAA,aAAc,IAAA;AAJHA,WAAAA;AAAAA,EAAA,GAAA,WAAA,CAAA,CAAA;AAUA,MAAA,yBAAAC,UAAL;AACNA,UAAA,GAAI,IAAA;AACJA,UAAA,GAAI,IAAA;AACJA,UAAA,IAAK,IAAA;AAHMA,WAAAA;AAAAA,EAAA,GAAA,QAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;ACrDZ,YAAM,QAAQC,IAAAA;AAEd,YAAM,UAAUC,IAAAA,SAAS,MAAM,MAAM,OAAO,MAAM,QAAQ;AAE1D,YAAM,OAAOA,IAAAA,SAAS,MAAM,MAAM,WAAW,WAAW,MAAS;AAE3D,YAAA,UAAUA,IAAAA,SAAS,MAAM;AACvB,eAAA;AAAA,UACN,CAAC,GAAG,GAAG;AAAA,UACP,CAAC,UAAU,GAAG,MAAM;AAAA,UACpB,CAAC,YAAY,GAAG,MAAM;AAAA,UACtB,CAAC,MAAM,YAAY,CAAC,GAAG;AAAA,UACvB,CAAC,MAAM,qBAAqB,CAAC,GAAG,MAAM;AAAA,UACtC,CAAC,MAAM,UAAU,MAAM,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM;AAAA,UACzC,CAAC,MAAM,WAAW,MAAM,KAAK,EAAE,CAAC,GAAG;AAAA,UACnC,CAAC,MAAM,WAAW,MAAM,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM;AAAA,QAAA;AAAA,MAC9C,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/c/button/button.js

@@ -77,7 +77,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const progress = "top-progress";
+const progress = "_progress_1k69v_1";
 const style0 = {
   "top-button": "top-button",
   "g-active": "g-active",

package/c/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/components/forms/button/button.ts","../../../src/components/forms/button/button.vue"],"sourcesContent":["import type { VNode } from 'vue';\r\n\r\n/**\r\n * Определение параметров\r\n */\r\nexport interface Props {\r\n\tcolor?: COLOR\r\n\tstyling?: STYLING // bug: name = style init with object type\r\n\tsize?: SIZE\r\n\r\n\tname?: string\r\n\ttitle?: string\r\n\ticon?: string\r\n\ticon2?: string\r\n\r\n\thref?: string // если установлена ссылка, isSubmit не может быть true\r\n\t// value?: string\r\n\r\n\tdisabled?: boolean\r\n\tisSubmit?: boolean\r\n\tisActive?: boolean\r\n\tisProgress?: boolean\r\n}\r\n\r\n/**\r\n * Определение слотов\r\n */\r\nexport interface Slots {\r\n\t/**\r\n\t * Cлот с проивзольным содержимым\r\n\t */\r\n\tdefault(): VNode[];\r\n}\r\n\r\n/**\r\n * Определение событий\r\n */\r\nexport interface Emits { }\r\n\r\n/**\r\n * Цвета\r\n */\r\nexport enum COLOR {\r\n\tTheme = 'theme',\r\n\tBlue = 'blue',\r\n\tGreen = 'green',\r\n\tOrange = 'orange',\r\n\tRed = 'red',\r\n\tPink = 'pink',\r\n}\r\n\r\n/**\r\n * Стили\r\n */\r\nexport enum STYLING {\r\n\tRegular = '',\r\n\tOutline = 'outline',\r\n\tSoft = 'soft',\r\n\tTransparent = 'transparent',\r\n}\r\n\r\n/**\r\n * Размеры\r\n */\r\nexport enum SIZE {\r\n\tS = '',\r\n\tL = 'l',\r\n\tXL = 'xl',\r\n}","<script setup lang=\"ts\">\r\nimport { computed, useCssModule } from 'vue';\r\nimport type { Props } from './button';\r\nimport { COLOR, STYLING, SIZE } from './button';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcolor: COLOR.Blue,\r\n\tstyling: STYLING.Regular,\r\n\tsize: SIZE.S,\r\n});\r\n\r\nconst style = useCssModule();\r\n\r\nconst tagName = computed(() => props.href ? 'a' : 'button');\r\n\r\nconst type = computed(() => props.isSubmit ? 'submit' : undefined);\r\n\r\nconst classes = computed(() => {\r\n\treturn {\r\n\t\t['g']: true,\r\n\t\t['g-active']: props.isActive,\r\n\t\t['g-disabled']: props.disabled,\r\n\t\t[style['top-button']]: true,\r\n\t\t[style['top-button-progress']]: props.isProgress,\r\n\t\t[style[`g-size_${props.size}`]]: !!props.size,\r\n\t\t[style[`g-color_${props.color}`]]: true,\r\n\t\t[style[`g-style_${props.styling}`]]: !!props.styling,\r\n\t};\r\n});\r\n</script>\r\n\r\n<template>\r\n\t<component\r\n\t\t:is=\"tagName\"\r\n\t\t:class=\"classes\"\r\n\t\t:name=\"name\"\r\n\t\t:title=\"title\"\r\n\t\t:href=\"href\"\r\n\t\t:type=\"type\"\r\n\t\t:data-g-icon=\"icon || undefined\"\r\n\t\t:data-g-icon2=\"icon2 || undefined\"\r\n\t\t:disabled=\"disabled || undefined\"\r\n\t\t:inProgress=\"isProgress\"\r\n\t>\r\n\t\t<slot>{{ !icon ? \"Button\" : \"\" }}</slot>\r\n\t</component>\r\n</template>\r\n\r\n<style module>\r\n@import \"./style/button.css\";\r\n@import \"./style/style-outline.css\";\r\n@import \"./style/style-soft.css\";\r\n@import \"./style/style-transparent.css\";\r\n\r\n.top-button {\r\n\t--top-button-color: var(--color-white);\r\n\t--top-button-background-color: transparent;\r\n\t--top-button-background-color-hover: var(--top-button-background-color);\r\n\t--top-button-background-color-active: var(--top-button-background-color-hover);\r\n\t--top-button-background-color-selected: var(--top-button-background-color-hover);\r\n\t--top-button-box-shadow: none;\r\n\t--top-button-box-shadow-hover: var(--g-shadow-darken-2);\r\n\t--top-button-box-shadow-active: var(--g-shadow-darken-3);\r\n\t--top-button-box-shadow-selected: var(--g-shadow-darken-3);\r\n\t--g-forms-border-width: 0px;\r\n\t--g-icon-width: calc(var(--g-icon-size) + var(--g-forms-padding));\r\n\t--g-icon2-width: calc(var(--g-icon2-size) + var(--g-forms-padding));\r\n}\r\n\r\n.top-button.g-size_l {\r\n\t--g-forms-padding: var(--g-forms-padding_l);\r\n\t--g-forms-base-height: var(--g-forms-base-height_l);\r\n}\r\n\r\n.top-button.g-size_xl {\r\n\t--g-forms-padding: var(--g-forms-padding_xl);\r\n\t--g-forms-base-height: var(--g-forms-base-height_xl);\r\n}\r\n\r\n.top-button-progress {}\r\n</style>"],"names":["COLOR","STYLING","SIZE"],"mappings":";;AA0CY,IAAA,0BAAAA,WAAL;AACNA,SAAA,OAAQ,IAAA;AACRA,SAAA,MAAO,IAAA;AACPA,SAAA,OAAQ,IAAA;AACRA,SAAA,QAAS,IAAA;AACTA,SAAA,KAAM,IAAA;AACNA,SAAA,MAAO,IAAA;AANIA,SAAAA;AAAA,GAAA,SAAA,CAAA,CAAA;AAYA,IAAA,4BAAAC,aAAL;AACNA,WAAA,SAAU,IAAA;AACVA,WAAA,SAAU,IAAA;AACVA,WAAA,MAAO,IAAA;AACPA,WAAA,aAAc,IAAA;AAJHA,SAAAA;AAAA,GAAA,WAAA,CAAA,CAAA;AAUA,IAAA,yBAAAC,UAAL;AACNA,QAAA,GAAI,IAAA;AACJA,QAAA,GAAI,IAAA;AACJA,QAAA,IAAK,IAAA;AAHMA,SAAAA;AAAA,GAAA,QAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;ACrDZ,UAAM,QAAQ;AAEd,UAAM,UAAU,SAAS,MAAM,MAAM,OAAO,MAAM,QAAQ;AAE1D,UAAM,OAAO,SAAS,MAAM,MAAM,WAAW,WAAW,MAAS;AAE3D,UAAA,UAAU,SAAS,MAAM;AACvB,aAAA;AAAA,QACN,CAAC,GAAG,GAAG;AAAA,QACP,CAAC,UAAU,GAAG,MAAM;AAAA,QACpB,CAAC,YAAY,GAAG,MAAM;AAAA,QACtB,CAAC,MAAM,YAAY,CAAC,GAAG;AAAA,QACvB,CAAC,MAAM,qBAAqB,CAAC,GAAG,MAAM;AAAA,QACtC,CAAC,MAAM,UAAU,MAAM,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM;AAAA,QACzC,CAAC,MAAM,WAAW,MAAM,KAAK,EAAE,CAAC,GAAG;AAAA,QACnC,CAAC,MAAM,WAAW,MAAM,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM;AAAA,MAAA;AAAA,IAC9C,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button.js","sources":["../../../src/components/forms/button/button.ts","../../../src/components/forms/button/button.vue"],"sourcesContent":["import type { VNode } from 'vue';\n\n/**\n * Определение параметров\n */\nexport interface Props {\n\tcolor?: COLOR\n\tstyling?: STYLING // bug: name = style init with object type\n\tsize?: SIZE\n\n\tname?: string\n\ttitle?: string\n\ticon?: string\n\ticon2?: string\n\n\thref?: string // если установлена ссылка, isSubmit не может быть true\n\t// value?: string\n\n\tdisabled?: boolean\n\tisSubmit?: boolean\n\tisActive?: boolean\n\tisProgress?: boolean\n}\n\n/**\n * Определение слотов\n */\nexport interface Slots {\n\t/**\n\t * Cлот с проивзольным содержимым\n\t */\n\tdefault(): VNode[];\n}\n\n/**\n * Определение событий\n */\nexport interface Emits { }\n\n/**\n * Цвета\n */\nexport enum COLOR {\n\tTheme = 'theme',\n\tBlue = 'blue',\n\tGreen = 'green',\n\tOrange = 'orange',\n\tRed = 'red',\n\tPink = 'pink',\n}\n\n/**\n * Стили\n */\nexport enum STYLING {\n\tRegular = '',\n\tOutline = 'outline',\n\tSoft = 'soft',\n\tTransparent = 'transparent',\n}\n\n/**\n * Размеры\n */\nexport enum SIZE {\n\tS = '',\n\tL = 'l',\n\tXL = 'xl',\n}","<script setup lang=\"ts\">\nimport { computed, useCssModule } from 'vue';\nimport type { Props } from './button';\nimport { COLOR, STYLING, SIZE } from './button';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tcolor: COLOR.Blue,\n\tstyling: STYLING.Regular,\n\tsize: SIZE.S,\n});\n\nconst style = useCssModule();\n\nconst tagName = computed(() => props.href ? 'a' : 'button');\n\nconst type = computed(() => props.isSubmit ? 'submit' : undefined);\n\nconst classes = computed(() => {\n\treturn {\n\t\t['g']: true,\n\t\t['g-active']: props.isActive,\n\t\t['g-disabled']: props.disabled,\n\t\t[style['top-button']]: true,\n\t\t[style['top-button-progress']]: props.isProgress,\n\t\t[style[`g-size_${props.size}`]]: !!props.size,\n\t\t[style[`g-color_${props.color}`]]: true,\n\t\t[style[`g-style_${props.styling}`]]: !!props.styling,\n\t};\n});\n</script>\n\n<template>\n\t<component\n\t\t:is=\"tagName\"\n\t\t:class=\"classes\"\n\t\t:name=\"name\"\n\t\t:title=\"title\"\n\t\t:href=\"href\"\n\t\t:type=\"type\"\n\t\t:data-g-icon=\"icon || undefined\"\n\t\t:data-g-icon2=\"icon2 || undefined\"\n\t\t:disabled=\"disabled || undefined\"\n\t\t:inProgress=\"isProgress\"\n\t>\n\t\t<slot>{{ !icon ? \"Button\" : \"\" }}</slot>\n\t</component>\n</template>\n\n<style module>\n@import \"./style/button.css\";\n@import \"./style/style-outline.css\";\n@import \"./style/style-soft.css\";\n@import \"./style/style-transparent.css\";\n\n.top-button {\n\t--top-button-color: var(--color-white);\n\t--top-button-background-color: transparent;\n\t--top-button-background-color-hover: var(--top-button-background-color);\n\t--top-button-background-color-active: var(--top-button-background-color-hover);\n\t--top-button-background-color-selected: var(--top-button-background-color-hover);\n\t--top-button-box-shadow: none;\n\t--top-button-box-shadow-hover: var(--g-shadow-darken-2);\n\t--top-button-box-shadow-active: var(--g-shadow-darken-3);\n\t--top-button-box-shadow-selected: var(--g-shadow-darken-3);\n\t--g-forms-border-width: 0px;\n\t--g-icon-width: calc(var(--g-icon-size) + var(--g-forms-padding));\n\t--g-icon2-width: calc(var(--g-icon2-size) + var(--g-forms-padding));\n}\n\n.top-button.g-size_l {\n\t--g-forms-padding: var(--g-forms-padding_l);\n\t--g-forms-base-height: var(--g-forms-base-height_l);\n}\n\n.top-button.g-size_xl {\n\t--g-forms-padding: var(--g-forms-padding_xl);\n\t--g-forms-base-height: var(--g-forms-base-height_xl);\n}\n\n.top-button-progress {}\n</style>"],"names":["COLOR","STYLING","SIZE"],"mappings":";;AA0CY,IAAA,0BAAAA,WAAL;AACNA,SAAA,OAAQ,IAAA;AACRA,SAAA,MAAO,IAAA;AACPA,SAAA,OAAQ,IAAA;AACRA,SAAA,QAAS,IAAA;AACTA,SAAA,KAAM,IAAA;AACNA,SAAA,MAAO,IAAA;AANIA,SAAAA;AAAA,GAAA,SAAA,CAAA,CAAA;AAYA,IAAA,4BAAAC,aAAL;AACNA,WAAA,SAAU,IAAA;AACVA,WAAA,SAAU,IAAA;AACVA,WAAA,MAAO,IAAA;AACPA,WAAA,aAAc,IAAA;AAJHA,SAAAA;AAAA,GAAA,WAAA,CAAA,CAAA;AAUA,IAAA,yBAAAC,UAAL;AACNA,QAAA,GAAI,IAAA;AACJA,QAAA,GAAI,IAAA;AACJA,QAAA,IAAK,IAAA;AAHMA,SAAAA;AAAA,GAAA,QAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;ACrDZ,UAAM,QAAQ;AAEd,UAAM,UAAU,SAAS,MAAM,MAAM,OAAO,MAAM,QAAQ;AAE1D,UAAM,OAAO,SAAS,MAAM,MAAM,WAAW,WAAW,MAAS;AAE3D,UAAA,UAAU,SAAS,MAAM;AACvB,aAAA;AAAA,QACN,CAAC,GAAG,GAAG;AAAA,QACP,CAAC,UAAU,GAAG,MAAM;AAAA,QACpB,CAAC,YAAY,GAAG,MAAM;AAAA,QACtB,CAAC,MAAM,YAAY,CAAC,GAAG;AAAA,QACvB,CAAC,MAAM,qBAAqB,CAAC,GAAG,MAAM;AAAA,QACtC,CAAC,MAAM,UAAU,MAAM,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM;AAAA,QACzC,CAAC,MAAM,WAAW,MAAM,KAAK,EAAE,CAAC,GAAG;AAAA,QACnC,CAAC,MAAM,WAAW,MAAM,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM;AAAA,MAAA;AAAA,IAC9C,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/c/example/example.amd.js

@@ -21,7 +21,7 @@ define(["vue", "../_plugin-vue_export-helper-cb5c78ba"], function(vue, _pluginVu
       };
     }
   });
-  const example = "top-example";
+  const example = "_example_18dgo_2";
   const style0 = {
     example,
     "g-active": "g-active"

package/c/example/example.js

@@ -21,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const example = "top-example";
+const example = "_example_18dgo_2";
 const style0 = {
   example,
   "g-active": "g-active"

package/c/icomoon/demo-files/Read Me.txt

@@ -0,0 +1,7 @@
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

package/c/icomoon/demo-files/demo.css

@@ -0,0 +1,161 @@
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
+}
+h1 {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+small {
+  font-size: .66666667em;
+}
+a {
+  color: #e74c3c;
+  text-decoration: none;
+}
+a:hover, a:focus {
+  box-shadow: 0 1px #e74c3c;
+}
+.bshadow0, input {
+  box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+  box-shadow: inset 0 -2px #ccc;
+}
+input, fieldset {
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+input {
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: .25em 0;
+}
+input:focus {
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
+}
+.liga {
+  width: 80%;
+  width: calc(100% - 2.5em);
+}
+.talign-right {
+  text-align: right;
+}
+.talign-center {
+  text-align: center;
+}
+.bgc1 {
+  background: #f1f1f1;
+}
+.fgc1 {
+  color: #999;
+}
+.fgc0 {
+  color: #000;
+}
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.mvm {
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+.mtn {
+  margin-top: 0;
+}
+.mtl, .mal {
+  margin-top: 1.5em;
+}
+.mbl, .mal {
+  margin-bottom: 1.5em;
+}
+.mal, .mhl {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+}
+.mhmm {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mls {
+  margin-left: .25em;
+}
+.ptl {
+  padding-top: 1.5em;
+}
+.pbs, .pvs {
+  padding-bottom: .25em;
+}
+.pvs, .pts {
+  padding-top: .25em;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: .25em .5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 32px;
+}
+.fs2 {
+  font-size: 14px;
+}
+.fs3 {
+  font-size: 14px;
+}
+.fs4 {
+  font-size: 8px;
+}
+

package/c/icomoon/demo-files/demo.js

@@ -0,0 +1,30 @@
+if (!('boxShadow' in document.body.style)) {
+    document.body.setAttribute('class', 'noBoxShadow');
+}
+
+document.body.addEventListener("click", function(e) {
+    var target = e.target;
+    if (target.tagName === "INPUT" &&
+        target.getAttribute('class').indexOf('liga') === -1) {
+        target.select();
+    }
+});
+
+(function() {
+    var fontSize = document.getElementById('fontSize'),
+        testDrive = document.getElementById('testDrive'),
+        testText = document.getElementById('testText');
+    function updateTest() {
+        testDrive.innerHTML = testText.value || String.fromCharCode(160);
+        if (window.icomoonLiga) {
+            window.icomoonLiga(testDrive);
+        }
+    }
+    function updateSize() {
+        testDrive.style.fontSize = fontSize.value + 'px';
+    }
+    fontSize.addEventListener('change', updateSize, false);
+    testText.addEventListener('input', updateTest, false);
+    testText.addEventListener('change', updateTest, false);
+    updateSize();
+}());