@topvisor/ui 0.0.8 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -5
- package/c/Icon/Icon.amd.js +22 -0
- package/c/Icon/Icon.amd.js.map +1 -0
- package/c/Icon/Icon.js +22 -0
- package/c/Icon/Icon.js.map +1 -0
- package/c/README.md +86 -0
- package/c/button/button.amd.js +1 -1
- package/c/button/button.amd.js.map +1 -1
- package/c/button/button.js +1 -1
- package/c/button/button.js.map +1 -1
- package/c/example/example.amd.js +1 -1
- package/c/example/example.js +1 -1
- package/c/icomoon/demo-files/Read Me.txt +7 -0
- package/c/icomoon/demo-files/demo.css +161 -0
- package/c/icomoon/demo-files/demo.js +30 -0
- package/c/icomoon/demo.html +2931 -0
- package/c/icomoon/fonts/Topvisor-2.svg +232 -0
- package/c/icomoon/fonts/Topvisor-2.ttf +0 -0
- package/c/icomoon/fonts/Topvisor-2.woff +0 -0
- package/c/icomoon/selection.json +1 -0
- package/c/icomoon/style.css +644 -0
- package/c/style.css +23 -21
- package/core.css +398 -377
- package/dark.css +115 -115
- package/icomoon/Read Me.txt +7 -0
- package/icomoon/demo-files/Read Me.txt +7 -0
- package/icomoon/demo-files/demo.css +161 -0
- package/icomoon/demo-files/demo.js +30 -0
- package/icomoon/demo.html +2931 -0
- package/icomoon/fonts/Topvisor-2.svg +232 -0
- package/icomoon/fonts/Topvisor-2.ttf +0 -0
- package/icomoon/fonts/Topvisor-2.woff +0 -0
- package/icomoon/selection.json +1 -0
- package/icomoon/style.css +644 -0
- package/l/README.md +86 -0
- package/l/common/common.amd.js +22 -0
- package/l/common/common.amd.js.map +1 -0
- package/l/common/common.js +22 -0
- package/l/common/common.js.map +1 -0
- package/l/forms/forms.amd.js +51 -4
- package/l/forms/forms.amd.js.map +1 -1
- package/l/forms/forms.js +52 -4
- package/l/forms/forms.js.map +1 -1
- package/l/icomoon/demo-files/Read Me.txt +7 -0
- package/l/icomoon/demo-files/demo.css +161 -0
- package/l/icomoon/demo-files/demo.js +30 -0
- package/l/icomoon/demo.html +2931 -0
- package/l/icomoon/fonts/Topvisor-2.svg +232 -0
- package/l/icomoon/fonts/Topvisor-2.ttf +0 -0
- package/l/icomoon/fonts/Topvisor-2.woff +0 -0
- package/l/icomoon/selection.json +1 -0
- package/l/icomoon/style.css +644 -0
- package/l/style.css +23 -21
- package/light.css +128 -128
- package/package.json +1 -1
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
define(["vue"], function(vue) {
|
|
2
|
+
"use strict"; vue = vue ?? Vue;
|
|
3
|
+
const _hoisted_1 = ["data-g-icon", "data-g-icon2"];
|
|
4
|
+
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
5
|
+
__name: "icon",
|
|
6
|
+
props: {
|
|
7
|
+
icon: {},
|
|
8
|
+
icon2: {}
|
|
9
|
+
},
|
|
10
|
+
setup(__props) {
|
|
11
|
+
return (_ctx, _cache) => {
|
|
12
|
+
return vue.openBlock(), vue.createElementBlock("div", {
|
|
13
|
+
"data-g-icon": _ctx.icon,
|
|
14
|
+
"data-g-icon2": _ctx.icon2
|
|
15
|
+
}, null, 8, _hoisted_1);
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const icon_vue_vue_type_style_index_0_lang = "";
|
|
20
|
+
return _sfc_main;
|
|
21
|
+
});
|
|
22
|
+
//# sourceMappingURL=common.amd.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common.amd.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { defineComponent, openBlock, createElementBlock } from "vue";
|
|
2
|
+
const _hoisted_1 = ["data-g-icon", "data-g-icon2"];
|
|
3
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
4
|
+
__name: "icon",
|
|
5
|
+
props: {
|
|
6
|
+
icon: {},
|
|
7
|
+
icon2: {}
|
|
8
|
+
},
|
|
9
|
+
setup(__props) {
|
|
10
|
+
return (_ctx, _cache) => {
|
|
11
|
+
return openBlock(), createElementBlock("div", {
|
|
12
|
+
"data-g-icon": _ctx.icon,
|
|
13
|
+
"data-g-icon2": _ctx.icon2
|
|
14
|
+
}, null, 8, _hoisted_1);
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
const icon_vue_vue_type_style_index_0_lang = "";
|
|
19
|
+
export {
|
|
20
|
+
_sfc_main as default
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=common.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
|
package/l/forms/forms.amd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
define(["vue"], function(vue) {
|
|
1
|
+
define(["exports", "vue"], function(exports, vue) {
|
|
2
2
|
"use strict"; vue = vue ?? Vue;
|
|
3
3
|
var COLOR = /* @__PURE__ */ ((COLOR2) => {
|
|
4
4
|
COLOR2["Theme"] = "theme";
|
|
@@ -22,7 +22,7 @@ define(["vue"], function(vue) {
|
|
|
22
22
|
SIZE2["XL"] = "xl";
|
|
23
23
|
return SIZE2;
|
|
24
24
|
})(SIZE || {});
|
|
25
|
-
/* @__PURE__ */ vue.defineComponent({
|
|
25
|
+
const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
26
26
|
__name: "button",
|
|
27
27
|
props: {
|
|
28
28
|
color: { default: COLOR.Blue },
|
|
@@ -77,7 +77,7 @@ define(["vue"], function(vue) {
|
|
|
77
77
|
};
|
|
78
78
|
}
|
|
79
79
|
});
|
|
80
|
-
const progress = "
|
|
80
|
+
const progress = "_progress_1k69v_1";
|
|
81
81
|
const style0$1 = {
|
|
82
82
|
"top-button": "top-button",
|
|
83
83
|
"g-active": "g-active",
|
|
@@ -95,10 +95,57 @@ define(["vue"], function(vue) {
|
|
|
95
95
|
"g-size_l": "g-size_l",
|
|
96
96
|
"g-size_xl": "g-size_xl"
|
|
97
97
|
};
|
|
98
|
-
const
|
|
98
|
+
const _export_sfc = (sfc, props) => {
|
|
99
|
+
const target = sfc.__vccOpts || sfc;
|
|
100
|
+
for (const [key, val] of props) {
|
|
101
|
+
target[key] = val;
|
|
102
|
+
}
|
|
103
|
+
return target;
|
|
104
|
+
};
|
|
105
|
+
const cssModules$1 = {
|
|
106
|
+
"$style": style0$1
|
|
107
|
+
};
|
|
108
|
+
const Button = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
|
|
109
|
+
const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
110
|
+
__proto__: null,
|
|
111
|
+
default: Button
|
|
112
|
+
}, Symbol.toStringTag, { value: "Module" }));
|
|
113
|
+
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
114
|
+
__name: "example",
|
|
115
|
+
props: {
|
|
116
|
+
text: { default: "Вы можете поменять этот текст в props.text" },
|
|
117
|
+
color: {},
|
|
118
|
+
isActive: { type: Boolean }
|
|
119
|
+
},
|
|
120
|
+
setup(__props) {
|
|
121
|
+
vue.useCssVars((_ctx) => ({
|
|
122
|
+
"811e7836": _ctx.color
|
|
123
|
+
}));
|
|
124
|
+
return (_ctx, _cache) => {
|
|
125
|
+
return vue.openBlock(), vue.createElementBlock("div", {
|
|
126
|
+
class: vue.normalizeClass({
|
|
127
|
+
[_ctx.$style.example]: true,
|
|
128
|
+
[_ctx.$style["g-active"]]: _ctx.isActive
|
|
129
|
+
})
|
|
130
|
+
}, vue.toDisplayString(_ctx.text), 3);
|
|
131
|
+
};
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
const example = "_example_18dgo_2";
|
|
99
135
|
const style0 = {
|
|
100
136
|
example,
|
|
101
137
|
"g-active": "g-active"
|
|
102
138
|
};
|
|
139
|
+
const cssModules = {
|
|
140
|
+
"$style": style0
|
|
141
|
+
};
|
|
142
|
+
const Example = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
|
|
143
|
+
const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
144
|
+
__proto__: null,
|
|
145
|
+
default: Example
|
|
146
|
+
}, Symbol.toStringTag, { value: "Module" }));
|
|
147
|
+
exports.Button = index$1;
|
|
148
|
+
exports.Example = index;
|
|
149
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
103
150
|
});
|
|
104
151
|
//# sourceMappingURL=forms.amd.js.map
|
package/l/forms/forms.amd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"forms.amd.js","sources":["../../../src/components/forms/button/button.ts","../../../src/components/forms/button/button.vue"],"sourcesContent":["import type { VNode } from 'vue';\
|
|
1
|
+
{"version":3,"file":"forms.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/l/forms/forms.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, useCssModule, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
|
|
1
|
+
import { defineComponent, useCssModule, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot, createTextVNode, toDisplayString, useCssVars, createElementBlock } from "vue";
|
|
2
2
|
var COLOR = /* @__PURE__ */ ((COLOR2) => {
|
|
3
3
|
COLOR2["Theme"] = "theme";
|
|
4
4
|
COLOR2["Blue"] = "blue";
|
|
@@ -21,7 +21,7 @@ var SIZE = /* @__PURE__ */ ((SIZE2) => {
|
|
|
21
21
|
SIZE2["XL"] = "xl";
|
|
22
22
|
return SIZE2;
|
|
23
23
|
})(SIZE || {});
|
|
24
|
-
/* @__PURE__ */ defineComponent({
|
|
24
|
+
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
25
25
|
__name: "button",
|
|
26
26
|
props: {
|
|
27
27
|
color: { default: COLOR.Blue },
|
|
@@ -76,7 +76,7 @@ var SIZE = /* @__PURE__ */ ((SIZE2) => {
|
|
|
76
76
|
};
|
|
77
77
|
}
|
|
78
78
|
});
|
|
79
|
-
const progress = "
|
|
79
|
+
const progress = "_progress_1k69v_1";
|
|
80
80
|
const style0$1 = {
|
|
81
81
|
"top-button": "top-button",
|
|
82
82
|
"g-active": "g-active",
|
|
@@ -94,9 +94,57 @@ const style0$1 = {
|
|
|
94
94
|
"g-size_l": "g-size_l",
|
|
95
95
|
"g-size_xl": "g-size_xl"
|
|
96
96
|
};
|
|
97
|
-
const
|
|
97
|
+
const _export_sfc = (sfc, props) => {
|
|
98
|
+
const target = sfc.__vccOpts || sfc;
|
|
99
|
+
for (const [key, val] of props) {
|
|
100
|
+
target[key] = val;
|
|
101
|
+
}
|
|
102
|
+
return target;
|
|
103
|
+
};
|
|
104
|
+
const cssModules$1 = {
|
|
105
|
+
"$style": style0$1
|
|
106
|
+
};
|
|
107
|
+
const Button = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
|
|
108
|
+
const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
109
|
+
__proto__: null,
|
|
110
|
+
default: Button
|
|
111
|
+
}, Symbol.toStringTag, { value: "Module" }));
|
|
112
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
113
|
+
__name: "example",
|
|
114
|
+
props: {
|
|
115
|
+
text: { default: "Вы можете поменять этот текст в props.text" },
|
|
116
|
+
color: {},
|
|
117
|
+
isActive: { type: Boolean }
|
|
118
|
+
},
|
|
119
|
+
setup(__props) {
|
|
120
|
+
useCssVars((_ctx) => ({
|
|
121
|
+
"811e7836": _ctx.color
|
|
122
|
+
}));
|
|
123
|
+
return (_ctx, _cache) => {
|
|
124
|
+
return openBlock(), createElementBlock("div", {
|
|
125
|
+
class: normalizeClass({
|
|
126
|
+
[_ctx.$style.example]: true,
|
|
127
|
+
[_ctx.$style["g-active"]]: _ctx.isActive
|
|
128
|
+
})
|
|
129
|
+
}, toDisplayString(_ctx.text), 3);
|
|
130
|
+
};
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
const example = "_example_18dgo_2";
|
|
98
134
|
const style0 = {
|
|
99
135
|
example,
|
|
100
136
|
"g-active": "g-active"
|
|
101
137
|
};
|
|
138
|
+
const cssModules = {
|
|
139
|
+
"$style": style0
|
|
140
|
+
};
|
|
141
|
+
const Example = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
|
|
142
|
+
const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
143
|
+
__proto__: null,
|
|
144
|
+
default: Example
|
|
145
|
+
}, Symbol.toStringTag, { value: "Module" }));
|
|
146
|
+
export {
|
|
147
|
+
index$1 as Button,
|
|
148
|
+
index as Example
|
|
149
|
+
};
|
|
102
150
|
//# sourceMappingURL=forms.js.map
|
package/l/forms/forms.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"forms.js","sources":["../../../src/components/forms/button/button.ts","../../../src/components/forms/button/button.vue"],"sourcesContent":["import type { VNode } from 'vue';\
|
|
1
|
+
{"version":3,"file":"forms.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
|
|
2
|
+
|
|
3
|
+
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
|
|
4
|
+
|
|
5
|
+
You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
|
|
6
|
+
|
|
7
|
+
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.
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
body {
|
|
2
|
+
padding: 0;
|
|
3
|
+
margin: 0;
|
|
4
|
+
font-family: sans-serif;
|
|
5
|
+
font-size: 1em;
|
|
6
|
+
line-height: 1.5;
|
|
7
|
+
color: #555;
|
|
8
|
+
background: #fff;
|
|
9
|
+
}
|
|
10
|
+
h1 {
|
|
11
|
+
font-size: 1.5em;
|
|
12
|
+
font-weight: normal;
|
|
13
|
+
}
|
|
14
|
+
small {
|
|
15
|
+
font-size: .66666667em;
|
|
16
|
+
}
|
|
17
|
+
a {
|
|
18
|
+
color: #e74c3c;
|
|
19
|
+
text-decoration: none;
|
|
20
|
+
}
|
|
21
|
+
a:hover, a:focus {
|
|
22
|
+
box-shadow: 0 1px #e74c3c;
|
|
23
|
+
}
|
|
24
|
+
.bshadow0, input {
|
|
25
|
+
box-shadow: inset 0 -2px #e7e7e7;
|
|
26
|
+
}
|
|
27
|
+
input:hover {
|
|
28
|
+
box-shadow: inset 0 -2px #ccc;
|
|
29
|
+
}
|
|
30
|
+
input, fieldset {
|
|
31
|
+
font-family: sans-serif;
|
|
32
|
+
font-size: 1em;
|
|
33
|
+
margin: 0;
|
|
34
|
+
padding: 0;
|
|
35
|
+
border: 0;
|
|
36
|
+
}
|
|
37
|
+
input {
|
|
38
|
+
color: inherit;
|
|
39
|
+
line-height: 1.5;
|
|
40
|
+
height: 1.5em;
|
|
41
|
+
padding: .25em 0;
|
|
42
|
+
}
|
|
43
|
+
input:focus {
|
|
44
|
+
outline: none;
|
|
45
|
+
box-shadow: inset 0 -2px #449fdb;
|
|
46
|
+
}
|
|
47
|
+
.glyph {
|
|
48
|
+
font-size: 16px;
|
|
49
|
+
width: 15em;
|
|
50
|
+
padding-bottom: 1em;
|
|
51
|
+
margin-right: 4em;
|
|
52
|
+
margin-bottom: 1em;
|
|
53
|
+
float: left;
|
|
54
|
+
overflow: hidden;
|
|
55
|
+
}
|
|
56
|
+
.liga {
|
|
57
|
+
width: 80%;
|
|
58
|
+
width: calc(100% - 2.5em);
|
|
59
|
+
}
|
|
60
|
+
.talign-right {
|
|
61
|
+
text-align: right;
|
|
62
|
+
}
|
|
63
|
+
.talign-center {
|
|
64
|
+
text-align: center;
|
|
65
|
+
}
|
|
66
|
+
.bgc1 {
|
|
67
|
+
background: #f1f1f1;
|
|
68
|
+
}
|
|
69
|
+
.fgc1 {
|
|
70
|
+
color: #999;
|
|
71
|
+
}
|
|
72
|
+
.fgc0 {
|
|
73
|
+
color: #000;
|
|
74
|
+
}
|
|
75
|
+
p {
|
|
76
|
+
margin-top: 1em;
|
|
77
|
+
margin-bottom: 1em;
|
|
78
|
+
}
|
|
79
|
+
.mvm {
|
|
80
|
+
margin-top: .75em;
|
|
81
|
+
margin-bottom: .75em;
|
|
82
|
+
}
|
|
83
|
+
.mtn {
|
|
84
|
+
margin-top: 0;
|
|
85
|
+
}
|
|
86
|
+
.mtl, .mal {
|
|
87
|
+
margin-top: 1.5em;
|
|
88
|
+
}
|
|
89
|
+
.mbl, .mal {
|
|
90
|
+
margin-bottom: 1.5em;
|
|
91
|
+
}
|
|
92
|
+
.mal, .mhl {
|
|
93
|
+
margin-left: 1.5em;
|
|
94
|
+
margin-right: 1.5em;
|
|
95
|
+
}
|
|
96
|
+
.mhmm {
|
|
97
|
+
margin-left: 1em;
|
|
98
|
+
margin-right: 1em;
|
|
99
|
+
}
|
|
100
|
+
.mls {
|
|
101
|
+
margin-left: .25em;
|
|
102
|
+
}
|
|
103
|
+
.ptl {
|
|
104
|
+
padding-top: 1.5em;
|
|
105
|
+
}
|
|
106
|
+
.pbs, .pvs {
|
|
107
|
+
padding-bottom: .25em;
|
|
108
|
+
}
|
|
109
|
+
.pvs, .pts {
|
|
110
|
+
padding-top: .25em;
|
|
111
|
+
}
|
|
112
|
+
.unit {
|
|
113
|
+
float: left;
|
|
114
|
+
}
|
|
115
|
+
.unitRight {
|
|
116
|
+
float: right;
|
|
117
|
+
}
|
|
118
|
+
.size1of2 {
|
|
119
|
+
width: 50%;
|
|
120
|
+
}
|
|
121
|
+
.size1of1 {
|
|
122
|
+
width: 100%;
|
|
123
|
+
}
|
|
124
|
+
.clearfix:before, .clearfix:after {
|
|
125
|
+
content: " ";
|
|
126
|
+
display: table;
|
|
127
|
+
}
|
|
128
|
+
.clearfix:after {
|
|
129
|
+
clear: both;
|
|
130
|
+
}
|
|
131
|
+
.hidden-true {
|
|
132
|
+
display: none;
|
|
133
|
+
}
|
|
134
|
+
.textbox0 {
|
|
135
|
+
width: 3em;
|
|
136
|
+
background: #f1f1f1;
|
|
137
|
+
padding: .25em .5em;
|
|
138
|
+
line-height: 1.5;
|
|
139
|
+
height: 1.5em;
|
|
140
|
+
}
|
|
141
|
+
#testDrive {
|
|
142
|
+
display: block;
|
|
143
|
+
padding-top: 24px;
|
|
144
|
+
line-height: 1.5;
|
|
145
|
+
}
|
|
146
|
+
.fs0 {
|
|
147
|
+
font-size: 16px;
|
|
148
|
+
}
|
|
149
|
+
.fs1 {
|
|
150
|
+
font-size: 32px;
|
|
151
|
+
}
|
|
152
|
+
.fs2 {
|
|
153
|
+
font-size: 14px;
|
|
154
|
+
}
|
|
155
|
+
.fs3 {
|
|
156
|
+
font-size: 14px;
|
|
157
|
+
}
|
|
158
|
+
.fs4 {
|
|
159
|
+
font-size: 8px;
|
|
160
|
+
}
|
|
161
|
+
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
if (!('boxShadow' in document.body.style)) {
|
|
2
|
+
document.body.setAttribute('class', 'noBoxShadow');
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
document.body.addEventListener("click", function(e) {
|
|
6
|
+
var target = e.target;
|
|
7
|
+
if (target.tagName === "INPUT" &&
|
|
8
|
+
target.getAttribute('class').indexOf('liga') === -1) {
|
|
9
|
+
target.select();
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
(function() {
|
|
14
|
+
var fontSize = document.getElementById('fontSize'),
|
|
15
|
+
testDrive = document.getElementById('testDrive'),
|
|
16
|
+
testText = document.getElementById('testText');
|
|
17
|
+
function updateTest() {
|
|
18
|
+
testDrive.innerHTML = testText.value || String.fromCharCode(160);
|
|
19
|
+
if (window.icomoonLiga) {
|
|
20
|
+
window.icomoonLiga(testDrive);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
function updateSize() {
|
|
24
|
+
testDrive.style.fontSize = fontSize.value + 'px';
|
|
25
|
+
}
|
|
26
|
+
fontSize.addEventListener('change', updateSize, false);
|
|
27
|
+
testText.addEventListener('input', updateTest, false);
|
|
28
|
+
testText.addEventListener('change', updateTest, false);
|
|
29
|
+
updateSize();
|
|
30
|
+
}());
|