@topvisor/ui 0.0.9 → 0.0.11

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.
@@ -40,30 +40,25 @@ define(["exports", "vue"], function(exports, vue) {
40
40
  },
41
41
  setup(__props) {
42
42
  const props = __props;
43
- const style = vue.useCssModule();
44
43
  const tagName = vue.computed(() => props.href ? "a" : "button");
45
44
  const type = vue.computed(() => props.isSubmit ? "submit" : void 0);
46
- const classes = vue.computed(() => {
47
- return {
48
- ["g"]: true,
49
- ["g-active"]: props.isActive,
50
- ["g-disabled"]: props.disabled,
51
- [style["top-button"]]: true,
52
- [style["top-button-progress"]]: props.isProgress,
53
- [style[`g-size_${props.size}`]]: !!props.size,
54
- [style[`g-color_${props.color}`]]: true,
55
- [style[`g-style_${props.styling}`]]: !!props.styling
56
- };
57
- });
58
45
  return (_ctx, _cache) => {
59
46
  return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
60
- class: vue.normalizeClass(classes.value),
47
+ class: vue.normalizeClass({
48
+ ["top-active"]: props.isActive,
49
+ ["top-disabled"]: props.disabled,
50
+ [_ctx.$style["top-button"]]: true,
51
+ [_ctx.$style["top-button-progress"]]: props.isProgress,
52
+ [_ctx.$style[`top-size_${props.size}`]]: !!props.size,
53
+ [_ctx.$style[`top-color_${props.color}`]]: true,
54
+ [_ctx.$style[`top-style_${props.styling}`]]: !!props.styling
55
+ }),
61
56
  name: _ctx.name,
62
57
  title: _ctx.title,
63
58
  href: _ctx.href,
64
59
  type: type.value,
65
- "data-g-icon": _ctx.icon || void 0,
66
- "data-g-icon2": _ctx.icon2 || void 0,
60
+ "data-top-icon": _ctx.icon || void 0,
61
+ "data-top-icon2": _ctx.icon2 || void 0,
67
62
  disabled: _ctx.disabled || void 0,
68
63
  inProgress: _ctx.isProgress
69
64
  }, {
@@ -73,27 +68,27 @@ define(["exports", "vue"], function(exports, vue) {
73
68
  ])
74
69
  ]),
75
70
  _: 3
76
- }, 8, ["class", "name", "title", "href", "type", "data-g-icon", "data-g-icon2", "disabled", "inProgress"]);
71
+ }, 8, ["class", "name", "title", "href", "type", "data-top-icon", "data-top-icon2", "disabled", "inProgress"]);
77
72
  };
78
73
  }
79
74
  });
80
- const progress = "top-progress";
75
+ const progress = "_progress_1jgaf_1";
81
76
  const style0$1 = {
82
77
  "top-button": "top-button",
83
- "g-active": "g-active",
78
+ "top-active": "top-active",
84
79
  "top-button-progress": "top-button-progress",
85
80
  progress,
86
- "g-color_blue": "g-color_blue",
87
- "g-color_green": "g-color_green",
88
- "g-color_orange": "g-color_orange",
89
- "g-color_red": "g-color_red",
90
- "g-color_pink": "g-color_pink",
91
- "g-color_theme": "g-color_theme",
92
- "g-style_outline": "g-style_outline",
93
- "g-style_soft": "g-style_soft",
94
- "g-style_transparent": "g-style_transparent",
95
- "g-size_l": "g-size_l",
96
- "g-size_xl": "g-size_xl"
81
+ "top-color_blue": "top-color_blue",
82
+ "top-color_green": "top-color_green",
83
+ "top-color_orange": "top-color_orange",
84
+ "top-color_red": "top-color_red",
85
+ "top-color_pink": "top-color_pink",
86
+ "top-color_theme": "top-color_theme",
87
+ "top-style_outline": "top-style_outline",
88
+ "top-style_soft": "top-style_soft",
89
+ "top-style_transparent": "top-style_transparent",
90
+ "top-size_l": "top-size_l",
91
+ "top-size_xl": "top-size_xl"
97
92
  };
98
93
  const _export_sfc = (sfc, props) => {
99
94
  const target = sfc.__vccOpts || sfc;
@@ -105,47 +100,62 @@ define(["exports", "vue"], function(exports, vue) {
105
100
  const cssModules$1 = {
106
101
  "$style": style0$1
107
102
  };
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" }));
103
+ const button = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
104
+ const _hoisted_1 = ["name", "value", "checked", "indeterminate", "disabled"];
105
+ const _hoisted_2 = {
106
+ key: 0,
107
+ class: "top-checkbox_caption"
108
+ };
113
109
  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
114
- __name: "example",
110
+ __name: "checkbox",
115
111
  props: {
116
- text: { default: "Вы можете поменять этот текст в props.text" },
117
- color: {},
118
- isActive: { type: Boolean }
112
+ name: {},
113
+ value: {},
114
+ title: {},
115
+ checked: { type: Boolean },
116
+ disabled: { type: Boolean },
117
+ indeterminate: { type: Boolean },
118
+ isSwitcher: { type: Boolean }
119
119
  },
120
120
  setup(__props) {
121
- vue.useCssVars((_ctx) => ({
122
- "811e7836": _ctx.color
123
- }));
121
+ const props = __props;
124
122
  return (_ctx, _cache) => {
125
- return vue.openBlock(), vue.createElementBlock("div", {
123
+ return vue.openBlock(), vue.createElementBlock("label", {
126
124
  class: vue.normalizeClass({
127
- [_ctx.$style.example]: true,
128
- [_ctx.$style["g-active"]]: _ctx.isActive
125
+ ["top-el"]: true,
126
+ ["top-checkbox"]: true,
127
+ ["top-checkbox_" + props.name]: props.name !== "",
128
+ ["top-active"]: props.checked,
129
+ ["top-disabled"]: props.disabled
129
130
  })
130
- }, vue.toDisplayString(_ctx.text), 3);
131
+ }, [
132
+ vue.createElementVNode("input", {
133
+ type: "checkbox",
134
+ class: vue.normalizeClass(["top-el", {
135
+ ["top-checkbox_input"]: true,
136
+ ["top-checkbox_input-switcher"]: _ctx.isSwitcher
137
+ }]),
138
+ name: _ctx.name,
139
+ value: _ctx.value,
140
+ checked: _ctx.checked,
141
+ indeterminate: _ctx.indeterminate,
142
+ disabled: _ctx.disabled
143
+ }, null, 10, _hoisted_1),
144
+ _ctx.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true)
145
+ ], 2);
131
146
  };
132
147
  }
133
148
  });
134
- const example = "top-example";
135
149
  const style0 = {
136
- example,
137
- "g-active": "g-active"
150
+ "top-el": "top-el",
151
+ "top-checkbox_input-switcher": "top-checkbox_input-switcher"
138
152
  };
139
153
  const cssModules = {
140
154
  "$style": style0
141
155
  };
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;
156
+ const checkbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
157
+ exports.Button = button;
158
+ exports.Checkbox = checkbox;
149
159
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
150
160
  });
151
161
  //# sourceMappingURL=forms.amd.js.map
@@ -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';\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
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';\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 } 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 tagName = computed(() => props.href ? 'a' : 'button');\r\n\r\nconst type = computed(() => props.isSubmit ? 'submit' : undefined);\r\n</script>\r\n\r\n<template>\r\n\t<component\r\n\t\t:is=\"tagName\"\r\n\t\t:class=\"{\r\n\t\t\t['top-active']: props.isActive,\r\n\t\t\t['top-disabled']: props.disabled,\r\n\t\t\t[$style['top-button']]: true,\r\n\t\t\t[$style['top-button-progress']]: props.isProgress,\r\n\t\t\t[$style[`top-size_${props.size}`]]: !!props.size,\r\n\t\t\t[$style[`top-color_${props.color}`]]: true,\r\n\t\t\t[$style[`top-style_${props.styling}`]]: !!props.styling,\r\n\t\t}\"\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-top-icon=\"icon || undefined\"\r\n\t\t:data-top-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(--top-shadow-darken-2);\r\n\t--top-button-box-shadow-active: var(--top-shadow-darken-3);\r\n\t--top-button-box-shadow-selected: var(--top-shadow-darken-3);\r\n\t--top-forms-border-width: 0px;\r\n\t--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));\r\n\t--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));\r\n}\r\n\r\n.top-button.top-size_l {\r\n\t--top-forms-padding: var(--top-forms-padding_l);\r\n\t--top-forms-base-height: var(--top-forms-base-height_l);\r\n}\r\n\r\n.top-button.top-size_xl {\r\n\t--top-forms-padding: var(--top-forms-padding_xl);\r\n\t--top-forms-base-height: var(--top-forms-base-height_xl);\r\n}\r\n\r\n.top-button-progress {}\r\n</style>"],"names":["COLOR","STYLING","SIZE","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,UAAUC,IAAAA,SAAS,MAAM,MAAM,OAAO,MAAM,QAAQ;AAE1D,YAAM,OAAOA,IAAAA,SAAS,MAAM,MAAM,WAAW,WAAW,MAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/l/forms/forms.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent, useCssModule, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot, createTextVNode, toDisplayString, useCssVars, createElementBlock } from "vue";
1
+ import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot, createTextVNode, toDisplayString, createElementBlock, createElementVNode, createCommentVNode } from "vue";
2
2
  var COLOR = /* @__PURE__ */ ((COLOR2) => {
3
3
  COLOR2["Theme"] = "theme";
4
4
  COLOR2["Blue"] = "blue";
@@ -39,30 +39,25 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
39
39
  },
40
40
  setup(__props) {
41
41
  const props = __props;
42
- const style = useCssModule();
43
42
  const tagName = computed(() => props.href ? "a" : "button");
44
43
  const type = computed(() => props.isSubmit ? "submit" : void 0);
45
- const classes = computed(() => {
46
- return {
47
- ["g"]: true,
48
- ["g-active"]: props.isActive,
49
- ["g-disabled"]: props.disabled,
50
- [style["top-button"]]: true,
51
- [style["top-button-progress"]]: props.isProgress,
52
- [style[`g-size_${props.size}`]]: !!props.size,
53
- [style[`g-color_${props.color}`]]: true,
54
- [style[`g-style_${props.styling}`]]: !!props.styling
55
- };
56
- });
57
44
  return (_ctx, _cache) => {
58
45
  return openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
59
- class: normalizeClass(classes.value),
46
+ class: normalizeClass({
47
+ ["top-active"]: props.isActive,
48
+ ["top-disabled"]: props.disabled,
49
+ [_ctx.$style["top-button"]]: true,
50
+ [_ctx.$style["top-button-progress"]]: props.isProgress,
51
+ [_ctx.$style[`top-size_${props.size}`]]: !!props.size,
52
+ [_ctx.$style[`top-color_${props.color}`]]: true,
53
+ [_ctx.$style[`top-style_${props.styling}`]]: !!props.styling
54
+ }),
60
55
  name: _ctx.name,
61
56
  title: _ctx.title,
62
57
  href: _ctx.href,
63
58
  type: type.value,
64
- "data-g-icon": _ctx.icon || void 0,
65
- "data-g-icon2": _ctx.icon2 || void 0,
59
+ "data-top-icon": _ctx.icon || void 0,
60
+ "data-top-icon2": _ctx.icon2 || void 0,
66
61
  disabled: _ctx.disabled || void 0,
67
62
  inProgress: _ctx.isProgress
68
63
  }, {
@@ -72,27 +67,27 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
72
67
  ])
73
68
  ]),
74
69
  _: 3
75
- }, 8, ["class", "name", "title", "href", "type", "data-g-icon", "data-g-icon2", "disabled", "inProgress"]);
70
+ }, 8, ["class", "name", "title", "href", "type", "data-top-icon", "data-top-icon2", "disabled", "inProgress"]);
76
71
  };
77
72
  }
78
73
  });
79
- const progress = "top-progress";
74
+ const progress = "_progress_1jgaf_1";
80
75
  const style0$1 = {
81
76
  "top-button": "top-button",
82
- "g-active": "g-active",
77
+ "top-active": "top-active",
83
78
  "top-button-progress": "top-button-progress",
84
79
  progress,
85
- "g-color_blue": "g-color_blue",
86
- "g-color_green": "g-color_green",
87
- "g-color_orange": "g-color_orange",
88
- "g-color_red": "g-color_red",
89
- "g-color_pink": "g-color_pink",
90
- "g-color_theme": "g-color_theme",
91
- "g-style_outline": "g-style_outline",
92
- "g-style_soft": "g-style_soft",
93
- "g-style_transparent": "g-style_transparent",
94
- "g-size_l": "g-size_l",
95
- "g-size_xl": "g-size_xl"
80
+ "top-color_blue": "top-color_blue",
81
+ "top-color_green": "top-color_green",
82
+ "top-color_orange": "top-color_orange",
83
+ "top-color_red": "top-color_red",
84
+ "top-color_pink": "top-color_pink",
85
+ "top-color_theme": "top-color_theme",
86
+ "top-style_outline": "top-style_outline",
87
+ "top-style_soft": "top-style_soft",
88
+ "top-style_transparent": "top-style_transparent",
89
+ "top-size_l": "top-size_l",
90
+ "top-size_xl": "top-size_xl"
96
91
  };
97
92
  const _export_sfc = (sfc, props) => {
98
93
  const target = sfc.__vccOpts || sfc;
@@ -104,47 +99,62 @@ const _export_sfc = (sfc, props) => {
104
99
  const cssModules$1 = {
105
100
  "$style": style0$1
106
101
  };
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" }));
102
+ const button = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
103
+ const _hoisted_1 = ["name", "value", "checked", "indeterminate", "disabled"];
104
+ const _hoisted_2 = {
105
+ key: 0,
106
+ class: "top-checkbox_caption"
107
+ };
112
108
  const _sfc_main = /* @__PURE__ */ defineComponent({
113
- __name: "example",
109
+ __name: "checkbox",
114
110
  props: {
115
- text: { default: "Вы можете поменять этот текст в props.text" },
116
- color: {},
117
- isActive: { type: Boolean }
111
+ name: {},
112
+ value: {},
113
+ title: {},
114
+ checked: { type: Boolean },
115
+ disabled: { type: Boolean },
116
+ indeterminate: { type: Boolean },
117
+ isSwitcher: { type: Boolean }
118
118
  },
119
119
  setup(__props) {
120
- useCssVars((_ctx) => ({
121
- "811e7836": _ctx.color
122
- }));
120
+ const props = __props;
123
121
  return (_ctx, _cache) => {
124
- return openBlock(), createElementBlock("div", {
122
+ return openBlock(), createElementBlock("label", {
125
123
  class: normalizeClass({
126
- [_ctx.$style.example]: true,
127
- [_ctx.$style["g-active"]]: _ctx.isActive
124
+ ["top-el"]: true,
125
+ ["top-checkbox"]: true,
126
+ ["top-checkbox_" + props.name]: props.name !== "",
127
+ ["top-active"]: props.checked,
128
+ ["top-disabled"]: props.disabled
128
129
  })
129
- }, toDisplayString(_ctx.text), 3);
130
+ }, [
131
+ createElementVNode("input", {
132
+ type: "checkbox",
133
+ class: normalizeClass(["top-el", {
134
+ ["top-checkbox_input"]: true,
135
+ ["top-checkbox_input-switcher"]: _ctx.isSwitcher
136
+ }]),
137
+ name: _ctx.name,
138
+ value: _ctx.value,
139
+ checked: _ctx.checked,
140
+ indeterminate: _ctx.indeterminate,
141
+ disabled: _ctx.disabled
142
+ }, null, 10, _hoisted_1),
143
+ _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)
144
+ ], 2);
130
145
  };
131
146
  }
132
147
  });
133
- const example = "top-example";
134
148
  const style0 = {
135
- example,
136
- "g-active": "g-active"
149
+ "top-el": "top-el",
150
+ "top-checkbox_input-switcher": "top-checkbox_input-switcher"
137
151
  };
138
152
  const cssModules = {
139
153
  "$style": style0
140
154
  };
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" }));
155
+ const checkbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
146
156
  export {
147
- index$1 as Button,
148
- index as Example
157
+ button as Button,
158
+ checkbox as Checkbox
149
159
  };
150
160
  //# sourceMappingURL=forms.js.map
@@ -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';\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
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';\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 } 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 tagName = computed(() => props.href ? 'a' : 'button');\r\n\r\nconst type = computed(() => props.isSubmit ? 'submit' : undefined);\r\n</script>\r\n\r\n<template>\r\n\t<component\r\n\t\t:is=\"tagName\"\r\n\t\t:class=\"{\r\n\t\t\t['top-active']: props.isActive,\r\n\t\t\t['top-disabled']: props.disabled,\r\n\t\t\t[$style['top-button']]: true,\r\n\t\t\t[$style['top-button-progress']]: props.isProgress,\r\n\t\t\t[$style[`top-size_${props.size}`]]: !!props.size,\r\n\t\t\t[$style[`top-color_${props.color}`]]: true,\r\n\t\t\t[$style[`top-style_${props.styling}`]]: !!props.styling,\r\n\t\t}\"\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-top-icon=\"icon || undefined\"\r\n\t\t:data-top-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(--top-shadow-darken-2);\r\n\t--top-button-box-shadow-active: var(--top-shadow-darken-3);\r\n\t--top-button-box-shadow-selected: var(--top-shadow-darken-3);\r\n\t--top-forms-border-width: 0px;\r\n\t--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));\r\n\t--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));\r\n}\r\n\r\n.top-button.top-size_l {\r\n\t--top-forms-padding: var(--top-forms-padding_l);\r\n\t--top-forms-base-height: var(--top-forms-base-height_l);\r\n}\r\n\r\n.top-button.top-size_xl {\r\n\t--top-forms-padding: var(--top-forms-padding_xl);\r\n\t--top-forms-base-height: var(--top-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,UAAU,SAAS,MAAM,MAAM,OAAO,MAAM,QAAQ;AAE1D,UAAM,OAAO,SAAS,MAAM,MAAM,WAAW,WAAW,MAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}