@topvisor/ui 0.9.2 → 0.9.4

package/formsExt/formsExt.js

@@ -1,13 +1,12 @@
-import { defineComponent as G, ref as f, watch as w, toRef as k, computed as C, openBlock as n, createElementBlock as m, normalizeClass as v, toDisplayString as y, createCommentVNode as b, createElementVNode as h, createVNode as A, withKeys as V, withModifiers as _, createBlock as E, withCtx as $, createTextVNode as T, mergeProps as g, renderSlot as I, Fragment as M, renderList as H, withDirectives as z, vModelRadio as N } from "vue";
-import { T as P, B, _ as K, I as R } from "../.chunks/forms-64632f73.es.js";
-import("../core/core.js").then((u) => {
-  const p = ["../assets/formsExt.css"].map((t) => import.meta.resolve(t));
-  u.default.Page.addCss(p);
-});
-const U = {
+import { insertToPage as I } from "../utils/css.js";
+import { defineComponent as G, ref as f, watch as K, toRef as k, computed as C, openBlock as n, createElementBlock as p, normalizeClass as v, toDisplayString as y, createCommentVNode as b, createElementVNode as h, createVNode as A, withKeys as V, withModifiers as _, createBlock as E, withCtx as T, createTextVNode as $, mergeProps as w, renderSlot as H, Fragment as z, renderList as N, withDirectives as P, vModelRadio as S } from "vue";
+import { T as U, B, _ as g, I as R } from "../.chunks/forms-9516aa6c.es.js";
+const M = ["../assets/formsExt.css"].map((u) => import.meta.resolve(u));
+await I(M);
+const X = {
   key: 0,
   class: "top-editArea_title"
-}, X = { class: "top-editArea_footer" }, D = /* @__PURE__ */ G({
+}, D = { class: "top-editArea_footer" }, F = /* @__PURE__ */ G({
   __name: "editArea",
   props: {
     modelValue: {},
@@ -26,33 +25,33 @@ const U = {
     hint: {}
   },
   emits: ["update:modelValue", "cancel"],
-  setup(u, { emit: p }) {
-    const t = u, r = p, d = f(""), l = f(t.modelValue);
-    w(k(t, "modelValue"), () => {
-      l.value = t.modelValue;
+  setup(u, { emit: m }) {
+    const l = u, r = m, s = f(""), a = f(l.modelValue);
+    K(k(l, "modelValue"), () => {
+      a.value = l.modelValue;
     });
-    const o = C(() => l.value !== t.modelValue), s = (e) => {
+    const o = C(() => a.value !== l.modelValue), d = (e) => {
       r("update:modelValue", e);
-    }, a = () => {
-      r("cancel"), l.value = t.modelValue;
+    }, t = () => {
+      r("cancel"), a.value = l.modelValue;
     };
-    return (e, i) => (n(), m("div", {
+    return (e, i) => (n(), p("div", {
       class: v({
         "top-editArea": !0,
         "top-editArea-attachedToKeyboard": e.attachToKeyboard
       })
     }, [
-      e.title ? (n(), m("div", U, y(e.title), 1)) : b("", !0),
+      e.title ? (n(), p("div", X, y(e.title), 1)) : b("", !0),
       h("div", {
         class: v({
           "top-editArea_form": !0,
           "top-error": e.isError,
-          "top-focus": d.value == "focus"
+          "top-focus": s.value == "focus"
         })
       }, [
-        A(P, {
-          modelValue: l.value,
-          "onUpdate:modelValue": i[0] || (i[0] = (c) => l.value = c),
+        A(U, {
+          modelValue: a.value,
+          "onUpdate:modelValue": i[0] || (i[0] = (c) => a.value = c),
           name: e.name,
           placeholder: e.placeholder,
           rows: e.rows,
@@ -63,33 +62,33 @@ const U = {
           isError: e.isError,
           hint: e.hint,
           class: "top-editArea_element",
-          onFocus: i[1] || (i[1] = (c) => d.value = "focus"),
-          onBlur: i[2] || (i[2] = (c) => d.value = ""),
+          onFocus: i[1] || (i[1] = (c) => s.value = "focus"),
+          onBlur: i[2] || (i[2] = (c) => s.value = ""),
           onKeyup: [
-            V(a, ["esc"]),
-            i[3] || (i[3] = V(_((c) => s(l.value), ["ctrl"]), ["enter"]))
+            V(t, ["esc"]),
+            i[3] || (i[3] = V(_((c) => d(a.value), ["ctrl"]), ["enter"]))
           ]
-        }, null, 8, ["modelValue", "name", "placeholder", "rows", "minHeight", "expandable", "disabled", "readonly", "isError", "hint", "onKeyup"]),
-        h("div", X, [
+        }, null, 8, ["modelValue", "name", "placeholder", "rows", "minHeight", "expandable", "disabled", "readonly", "isError", "hint"]),
+        h("div", D, [
           o.value && (!e.attachToKeyboard || e.modelValue) ? (n(), E(B, {
             key: 0,
             class: "top-editArea_button",
             color: "theme",
             icon: e.attachToKeyboard ? "" : "",
-            onClick: a
+            onClick: t
           }, {
-            default: $(() => [
-              T(y(e.attachToKeyboard ? "" : e.cancelText), 1)
+            default: T(() => [
+              $(y(e.attachToKeyboard ? "" : e.cancelText), 1)
             ]),
             _: 1
           }, 8, ["icon"])) : b("", !0),
           A(B, {
             class: "top-editArea_button",
             icon: e.attachToKeyboard ? "" : "",
-            onClick: i[4] || (i[4] = (c) => s(l.value))
+            onClick: i[4] || (i[4] = (c) => d(a.value))
           }, {
-            default: $(() => [
-              T(y(e.attachToKeyboard ? "" : e.submitText), 1)
+            default: T(() => [
+              $(y(e.attachToKeyboard ? "" : e.submitText), 1)
             ]),
             _: 1
           }, 8, ["icon"])
@@ -97,7 +96,7 @@ const U = {
       ], 2)
     ], 2));
   }
-}), F = {
+}), L = {
   "top-editArea": "top-editArea",
   "top-editArea_title": "top-editArea_title",
   "top-editArea_form": "top-editArea_form",
@@ -106,9 +105,9 @@ const U = {
   "top-textarea_textarea": "top-textarea_textarea",
   "top-editArea_footer": "top-editArea_footer",
   "top-editArea-attachedToKeyboard": "top-editArea-attachedToKeyboard"
-}, S = {
-  $style: F
-}, te = /* @__PURE__ */ K(D, [["__cssModules", S]]), L = { class: "top-editInput" }, j = /* @__PURE__ */ G({
+}, j = {
+  $style: L
+}, re = /* @__PURE__ */ g(F, [["__cssModules", j]]), q = { class: "top-editInput" }, J = /* @__PURE__ */ G({
   __name: "editInput",
   props: {
     modelValue: {},
@@ -116,42 +115,42 @@ const U = {
     button: {}
   },
   emits: ["update:modelValue"],
-  setup(u, { emit: p }) {
-    const t = u, r = f(t.modelValue);
-    w(k(t.modelValue), () => {
-      r.value = t.modelValue;
+  setup(u, { emit: m }) {
+    const l = u, r = f(l.modelValue);
+    K(k(l.modelValue), () => {
+      r.value = l.modelValue;
     });
-    const d = p, l = () => {
-      d("update:modelValue", r.value);
+    const s = m, a = () => {
+      s("update:modelValue", r.value);
     };
-    return (o, s) => (n(), m("div", L, [
-      A(R, g(o.input, {
-        onKeydownCapture: s[0] || (s[0] = V(_((a) => r.value = o.modelValue, ["stop"]), ["esc"])),
-        onKeydown: V(_(l, ["stop"]), ["enter"]),
+    return (o, d) => (n(), p("div", q, [
+      A(R, w(o.input, {
+        onKeydownCapture: d[0] || (d[0] = V(_((t) => r.value = o.modelValue, ["stop"]), ["esc"])),
+        onKeydown: V(_(a, ["stop"]), ["enter"]),
         modelValue: r.value,
-        "onUpdate:modelValue": s[1] || (s[1] = (a) => r.value = a)
+        "onUpdate:modelValue": d[1] || (d[1] = (t) => r.value = t)
       }), null, 16, ["onKeydown", "modelValue"]),
-      r.value !== o.modelValue ? (n(), E(B, g({
+      r.value !== o.modelValue ? (n(), E(B, w({
         key: 0,
         icon: "",
         styling: "soft"
-      }, o.button, { onClick: l }), {
-        default: $(() => [
-          I(o.$slots, "default")
+      }, o.button, { onClick: a }), {
+        default: T(() => [
+          H(o.$slots, "default")
         ]),
         _: 3
       }, 16)) : b("", !0)
     ]));
   }
-}), q = {
+}), O = {
   "top-editInput": "top-editInput",
   "top-input": "top-input"
-}, J = {
-  $style: q
-}, ae = /* @__PURE__ */ K(j, [["__cssModules", J]]), O = ["data-top-icon", "onClick"], Q = {
+}, Q = {
+  $style: O
+}, se = /* @__PURE__ */ g(J, [["__cssModules", Q]]), W = ["data-top-icon", "onClick"], Y = {
   key: 0,
   class: "top-radioGroup_circle"
-}, W = ["value", "disabled"], Y = /* @__PURE__ */ G({
+}, Z = ["value", "disabled"], x = /* @__PURE__ */ G({
   __name: "radioGroup",
   props: {
     modelValue: {},
@@ -161,16 +160,16 @@ const U = {
     isError: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(u, { emit: p }) {
-    const t = u, r = p, d = C({
+  setup(u, { emit: m }) {
+    const l = u, r = m, s = C({
       get() {
-        return t.modelValue;
+        return l.modelValue;
       },
       set(o) {
         r("update:modelValue", o);
       }
-    }), l = "radioGroup-" + Math.random();
-    return (o, s) => (n(), m("div", {
+    }), a = "radioGroup-" + Math.random();
+    return (o, d) => (n(), p("div", {
       class: v({
         "top-radioGroup": !0,
         "top-scrollBarXHidding": !0,
@@ -178,34 +177,34 @@ const U = {
         "top-error": o.isError
       })
     }, [
-      (n(!0), m(M, null, H(o.radiosProps, (a) => (n(), m("label", {
+      (n(!0), p(z, null, N(o.radiosProps, (t) => (n(), p("label", {
         class: v({
-          "top-radioGroup_item-selected": a.value === d.value,
+          "top-radioGroup_item-selected": t.value === s.value,
           "top-radioGroup_item": !0,
           "top-forms-focusable": !0,
-          "top-disabled": a.disabled
+          "top-disabled": t.disabled
         }),
-        "data-top-icon": a.icon,
-        onClick: (e) => d.value = a.value
+        "data-top-icon": t.icon,
+        onClick: (e) => s.value = t.value
       }, [
-        T(y(a.title) + " ", 1),
-        o.showIndicator ? (n(), m("span", Q)) : b("", !0),
-        z(h("input", {
-          "onUpdate:modelValue": s[0] || (s[0] = (e) => d.value = e),
-          name: l,
+        $(y(t.title) + " ", 1),
+        o.showIndicator ? (n(), p("span", Y)) : b("", !0),
+        P(h("input", {
+          "onUpdate:modelValue": d[0] || (d[0] = (e) => s.value = e),
+          name: a,
           type: "radio",
           class: v({
             "top-unvisible": !0
           }),
-          value: a.value,
-          disabled: a.disabled
-        }, null, 8, W), [
-          [N, d.value]
+          value: t.value,
+          disabled: t.disabled
+        }, null, 8, Z), [
+          [S, s.value]
         ])
-      ], 10, O))), 256))
+      ], 10, W))), 256))
     ], 2));
   }
-}), Z = {
+}), ee = {
   "top-scrollBarXHidding": "top-scrollBarXHidding",
   "top-radioGroup": "top-radioGroup",
   "top-radioGroup_item": "top-radioGroup_item",
@@ -213,12 +212,12 @@ const U = {
   "top-radioGroup_circle": "top-radioGroup_circle",
   "top-disabled": "top-disabled",
   "top-error": "top-error"
-}, x = {
-  $style: Z
-}, le = /* @__PURE__ */ K(Y, [["__cssModules", x]]);
+}, oe = {
+  $style: ee
+}, de = /* @__PURE__ */ g(x, [["__cssModules", oe]]);
 export {
-  te as EditArea,
-  ae as EditInput,
-  le as RadioGroup
+  re as EditArea,
+  se as EditInput,
+  de as RadioGroup
 };
 //# sourceMappingURL=formsExt.js.map

package/formsExt/formsExt.js.map

@@ -1 +1 @@
-{"version":3,"file":"formsExt.js","sources":["../../src/components/formsExt/editArea/editArea.vue","../../src/components/formsExt/editInput/editInput.vue","../../src/components/formsExt/radioGroup/radioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, toRef, watch, computed } from 'vue';\nimport Button from '@/components/forms/button/button.vue';\nimport type { Props, Emits } from './editArea';\nimport Textarea from '@/components/forms/textarea/textarea.vue';\n\n// TODO: добавить переменную top-forms-fixed-height и использовать ее при добавлении отступов у страницы\n\nconst props = withDefaults(defineProps<Props>(), {\n\tcancelText: 'Отмена',\n\tsubmitText: 'Отправить',\n\texpandable: true,\n});\n\nconst emit = defineEmits<Emits>();\n\nconst state = ref('');\n\n/**\n * Локальное значение modelValue, будет проброшено вверх только в случае отправки формы\n */\nconst localValue = ref(props.modelValue);\n\nwatch(toRef(props, 'modelValue'), () => {\n\tlocalValue.value = props.modelValue;\n});\n\nconst isChanged = computed(() => localValue.value !== props.modelValue);\n\nconst submit = (value: string) => {\n\temit('update:modelValue', value);\n};\n\nconst cancel = () => {\n\temit('cancel');\n\n\t// сброс введенного значения\n\tlocalValue.value = props.modelValue;\n};\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t'top-editArea': true,\n\t\t\t'top-editArea-attachedToKeyboard': attachToKeyboard,\n\t\t}\"\n\t>\n\t\t<div\n\t\t\tv-if=\"title\"\n\t\t\tclass=\"top-editArea_title\"\n\t\t>\n\t\t\t{{ title }}\n\t\t</div>\n\n\t\t<div\n\t\t\t:class=\"{\n\t\t\t\t'top-editArea_form': true,\n\t\t\t\t'top-error': isError,\n\t\t\t\t'top-focus': state == 'focus',\n\t\t\t}\"\n\t\t>\n\t\t\t<Textarea\n\t\t\t\tv-model=\"localValue\"\n\t\t\t\t:name=\"name\"\n\t\t\t\t:placeholder=\"placeholder\"\n\t\t\t\t:rows=\"rows\"\n\t\t\t\t:minHeight=\"minHeight\"\n\t\t\t\t:expandable=\"expandable\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:readonly=\"readonly\"\n\t\t\t\t:isError=\"isError\"\n\t\t\t\t:hint=\"hint\"\n\t\t\t\tclass=\"top-editArea_element\"\n\t\t\t\t@focus=\"state = 'focus'\"\n\t\t\t\t@blur=\"state = ''\"\n\t\t\t\t@keyup.esc=\"cancel\"\n\t\t\t\t@keyup.ctrl.enter=\"submit(localValue)\"\n\t\t\t/>\n\n\t\t\t<div class=\"top-editArea_footer\">\n\t\t\t\t<Button\n\t\t\t\t\tv-if=\"isChanged && (!attachToKeyboard || modelValue)\"\n\t\t\t\t\tclass=\"top-editArea_button\"\n\t\t\t\t\tcolor=\"theme\"\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\n\t\t\t\t\t@click=\"cancel\"\n\t\t\t\t>\n\t\t\t\t\t{{ attachToKeyboard ? '' : cancelText }}\n\t\t\t\t</Button>\n\n\t\t\t\t<Button\n\t\t\t\t\tclass=\"top-editArea_button\"\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\n\t\t\t\t\t@click=\"submit(localValue)\"\n\t\t\t\t>\n\t\t\t\t\t{{ attachToKeyboard ? '' : submitText }}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<style module>\n.top-editArea {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 6px;\n}\n\n.top-editArea_title {\n\tfont-size: 12px;\n}\n\n.top-editArea_form {\n\tbackground: var(--top-forms-background-color);\n\toutline-color: var(--color-theme-75);\n\toutline-offset: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.top-editArea_form:hover {\n\tbackground: var(--top-forms-background-color-hover);\n}\n\n/* textarea в EditArea */\n.top-textarea {\n\twidth: 100%;\n}\n\n.top-editArea_element.top-textarea_textarea {\n\tborder: none;\n\toutline: none;\n\tanimation: none;\n}\n\n/* footer */\n.top-editArea_footer {\n\tpadding: var(--top-forms-padding);\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\tgap: var(--top-forms-padding);\n}\n\n/* attachedToKeyboard */\n.top-editArea-attachedToKeyboard {\n\tbackground: var(--top-forms-background-color);\n\tmargin-bottom: env(keyboard-inset-height, 0);\n\tposition: fixed;\n\tbottom: 0;\n\tright: 0;\n\tleft: 0;\n\tz-index: 2;\n\tgap: 0;\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_form {\n\tborder-radius: 0;\n\tborder: none;\n\tborder-top: 1px solid var(--top-forms-border-color);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_title {\n\tborder-top: 1px solid var(--color-line-2-opacity);\n\tpadding: var(--top-forms-padding);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\n\tborder-radius: 100%;\n}\n</style>","<script setup lang=\"ts\">\nimport { ref, toRef, watch } from 'vue';\nimport type { Props, Emits } from './editInput';\nimport Input from '@/components/forms/input/input.vue';\nimport Button from '@/components/forms/button/button.vue';\n\nconst props = defineProps<Props>();\n\nconst intermediateValue = ref(props.modelValue);\n\nwatch(toRef(props.modelValue), () => {\n\tintermediateValue.value = props.modelValue;\n});\n\nconst emit = defineEmits<Emits>();\n\nconst submit = () => {\n\temit('update:modelValue', intermediateValue.value);\n};\n</script>\n\n<template>\n\t<div class=\"top-editInput\">\n\t\t<Input\n\t\t\t:=\"input\"\n\t\t\t@keydown.esc.capture.stop=\"intermediateValue = modelValue\"\n\t\t\t@keydown.enter.stop=\"submit\"\n\t\t\tv-model=\"intermediateValue\"\n\t\t/>\n\n\t\t<Button\n\t\t\tv-if=\"intermediateValue !== modelValue\"\n\t\t\ticon=\"\"\n\t\t\tstyling=\"soft\"\n\t\t\t:=\"button\"\n\t\t\t@click=\"submit\"\n\t\t>\n\t\t\t<!-- @slot Слот Button -->\n\t\t\t<slot></slot>\n\t\t</Button>\n\t</div>\n</template>\n\n<style module>\n.top-editInput {\n\twidth: 220px;\n\tflex-grow: 1;\n\tdisplay: flex;\n\talign-items: flex-end;\n\tgap: var(--top-gap-1);\n}\n\n.top-editInput .top-input {\n\twidth: unset;\n\tflex-grow: 1;\n}\n</style>","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { Props, Emits } from './radioGroup';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tsize: 's',\n});\n\nconst emit = defineEmits<Emits>();\n\nconst localValue = computed({\n\tget() {\n\t\treturn props.modelValue;\n\t},\n\n\tset(value) {\n\t\temit('update:modelValue', value);\n\t},\n});\n\nconst uid = 'radioGroup-' + Math.random();\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t['top-radioGroup']: true,\n\t\t\t['top-scrollBarXHidding']: true,\n\t\t\t['top-size_' + size]: !!size,\n\t\t\t['top-error']: isError,\n\t\t}\"\n\t>\n\t\t<label\n\t\t\tv-for=\"item of radiosProps\"\n\t\t\t:class=\"{\n\t\t\t\t['top-radioGroup_item-selected']: item.value === localValue,\n\t\t\t\t['top-radioGroup_item']: true,\n\t\t\t\t['top-forms-focusable']: true,\n\t\t\t\t['top-disabled']: item.disabled,\n\t\t\t}\"\n\t\t\t:data-top-icon=\"item.icon\"\n\t\t\t@click=\"localValue = item.value\"\n\t\t>\n\t\t\t{{ item.title }}\n\n\t\t\t<span\n\t\t\t\tv-if=\"showIndicator\"\n\t\t\t\tclass=\"top-radioGroup_circle\"\n\t\t\t></span>\n\n\t\t\t<!-- Для нативной навигации -->\n\t\t\t<input\n\t\t\t\tv-model=\"localValue\"\n\t\t\t\t:name=\"uid\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t['top-unvisible']: true,\n\t\t\t\t}\"\n\t\t\t\t:value=\"item.value\"\n\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t/>\n\t\t</label>\n\t</div>\n</template>\n\n<style module>\n@import \"./styles/top-scrollBar.css\";\n\n.top-radioGroup {\n\tuser-select: none;\n\tbox-sizing: border-box;\n\tborder-radius: 8px;\n\tbackground-color: var(--color-theme-50);\n\theight: var(--top-forms-base-height);\n\tpadding: 2px;\n\tgap: 2px;\n\tdisplay: flex;\n\talign-items: flex-start;\n}\n\n.top-radioGroup_item {\n\tcursor: pointer;\n\tbox-sizing: border-box;\n\tborder-radius: 6px;\n\theight: calc(var(--top-forms-base-height) - 4px);\n\tpadding: 0 16px;\n\tfont-weight: 600;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-grow: 1;\n\tgap: 4px;\n}\n\n.top-radioGroup_item:hover {\n\tbackground-color: var(--color-theme-25);\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\n}\n\n/* selected */\n.top-radioGroup_item-selected {\n\tpointer-events: none;\n\tbackground-color: var(--color-bg-3);\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\n}\n\n/* circle */\n.top-radioGroup_circle {\n\tcontent: \"\";\n\tbox-sizing: border-box;\n\tborder: 1px solid var(--color-line-3-opacity);\n\tborder-radius: 50%;\n\tpadding: 3px;\n\tmargin-left: auto;\n\twidth: calc(var(--top-forms-option-height) - 3px * 2);\n\theight: calc(var(--top-forms-option-height) - 3px * 2);\n}\n\n.top-radioGroup_item:hover .top-radioGroup_circle:before {\n\tborder-color: var(--color-primary);\n}\n\n/* circle selected */\n.top-radioGroup_item-selected .top-radioGroup_circle {\n\tborder-color: var(--color-primary);\n\tborder-width: 5px;\n}\n\n.top-radioGroup_item-selected:hover .top-radioGroup_circle {\n\tborder-color: var(--color-primary-2);\n}\n\n/* top-disabled */\n.top-radioGroup_item.top-disabled {\n\t--top-icon-color: var(--color-text-3);\n\n\tcolor: var(--color-text-3);\n}\n\n.top-radioGroup_item.top-disabled .top-radioGroup_circle {\n\tborder-color: var(--color-theme-400);\n\tbackground-color: var(--color-theme-50);\n}\n\n/* top-error  */\n.top-radioGroup.top-error .top-radioGroup_item:not(.top-disabled) .top-radioGroup_circle {\n\tborder-color: var(--color-negative);\n}\n</style>"],"names":["props","__props","emit","__emit","state","ref","localValue","watch","toRef","isChanged","computed","submit","value","cancel","intermediateValue","uid"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAAA,IAAAC,GAMAC,IAAAC,GAEAC,IAAAC,EAAA,EAAA,GAKAC,IAAAD,EAAAL,EAAA,UAAA;AAEA,IAAAO,EAAAC,EAAAR,GAAA,YAAA,GAAA,MAAA;AACC,MAAAM,EAAA,QAAAN,EAAA;AAAA,IAAyB,CAAA;AAG1B,UAAAS,IAAAC,EAAA,MAAAJ,EAAA,UAAAN,EAAA,UAAA,GAEAW,IAAA,CAAAC,MAAA;AACC,MAAAV,EAAA,qBAAAU,CAAA;AAAA,IAA+B,GAGhCC,IAAA,MAAA;AACC,MAAAX,EAAA,QAAA,GAGAI,EAAA,QAAAN,EAAA;AAAA,IAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/B1B,UAAAA,IAAAC,GAEAa,IAAAT,EAAAL,EAAA,UAAA;AAEA,IAAAO,EAAAC,EAAAR,EAAA,UAAA,GAAA,MAAA;AACC,MAAAc,EAAA,QAAAd,EAAA;AAAA,IAAgC,CAAA;AAGjC,UAAAE,IAAAC,GAEAQ,IAAA,MAAA;AACC,MAAAT,EAAA,qBAAAY,EAAA,KAAA;AAAA,IAAiD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACblD,UAAAd,IAAAC,GAIAC,IAAAC,GAEAG,IAAAI,EAAA;AAAA,MAA4B,MAAA;AAE1B,eAAAV,EAAA;AAAA,MAAa;AAAA,MACd,IAAAY,GAAA;AAGC,QAAAV,EAAA,qBAAAU,CAAA;AAAA,MAA+B;AAAA,IAChC,CAAA,GAGDG,IAAA,gBAAA,KAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"formsExt.js","sources":["../../src/components/formsExt/editArea/editArea.vue","../../src/components/formsExt/editInput/editInput.vue","../../src/components/formsExt/radioGroup/radioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, computed } from 'vue';\r\nimport Button from '@/components/forms/button/button.vue';\r\nimport type { Props, Emits } from './editArea';\r\nimport Textarea from '@/components/forms/textarea/textarea.vue';\r\n\r\n// TODO: добавить переменную top-forms-fixed-height и использовать ее при добавлении отступов у страницы\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcancelText: 'Отмена',\r\n\tsubmitText: 'Отправить',\r\n\texpandable: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst state = ref('');\r\n\r\n/**\r\n * Локальное значение modelValue, будет проброшено вверх только в случае отправки формы\r\n */\r\nconst localValue = ref(props.modelValue);\r\n\r\nwatch(toRef(props, 'modelValue'), () => {\r\n\tlocalValue.value = props.modelValue;\r\n});\r\n\r\nconst isChanged = computed(() => localValue.value !== props.modelValue);\r\n\r\nconst submit = (value: string) => {\r\n\temit('update:modelValue', value);\r\n};\r\n\r\nconst cancel = () => {\r\n\temit('cancel');\r\n\r\n\t// сброс введенного значения\r\n\tlocalValue.value = props.modelValue;\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\t:class=\"{\r\n\t\t\t'top-editArea': true,\r\n\t\t\t'top-editArea-attachedToKeyboard': attachToKeyboard,\r\n\t\t}\"\r\n\t>\r\n\t\t<div\r\n\t\t\tv-if=\"title\"\r\n\t\t\tclass=\"top-editArea_title\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</div>\r\n\r\n\t\t<div\r\n\t\t\t:class=\"{\r\n\t\t\t\t'top-editArea_form': true,\r\n\t\t\t\t'top-error': isError,\r\n\t\t\t\t'top-focus': state == 'focus',\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<Textarea\r\n\t\t\t\tv-model=\"localValue\"\r\n\t\t\t\t:name=\"name\"\r\n\t\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t\t:rows=\"rows\"\r\n\t\t\t\t:minHeight=\"minHeight\"\r\n\t\t\t\t:expandable=\"expandable\"\r\n\t\t\t\t:disabled=\"disabled\"\r\n\t\t\t\t:readonly=\"readonly\"\r\n\t\t\t\t:isError=\"isError\"\r\n\t\t\t\t:hint=\"hint\"\r\n\t\t\t\tclass=\"top-editArea_element\"\r\n\t\t\t\t@focus=\"state = 'focus'\"\r\n\t\t\t\t@blur=\"state = ''\"\r\n\t\t\t\t@keyup.esc=\"cancel\"\r\n\t\t\t\t@keyup.ctrl.enter=\"submit(localValue)\"\r\n\t\t\t/>\r\n\r\n\t\t\t<div class=\"top-editArea_footer\">\r\n\t\t\t\t<Button\r\n\t\t\t\t\tv-if=\"isChanged && (!attachToKeyboard || modelValue)\"\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\tcolor=\"theme\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"cancel\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : cancelText }}\r\n\t\t\t\t</Button>\r\n\r\n\t\t\t\t<Button\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"submit(localValue)\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : submitText }}\r\n\t\t\t\t</Button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n.top-editArea {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: 6px;\r\n}\r\n\r\n.top-editArea_title {\r\n\tfont-size: 12px;\r\n}\r\n\r\n.top-editArea_form {\r\n\tbackground: var(--top-forms-background-color);\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n\r\n.top-editArea_form:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n/* textarea в EditArea */\r\n.top-textarea {\r\n\twidth: 100%;\r\n}\r\n\r\n.top-editArea_element.top-textarea_textarea {\r\n\tborder: none;\r\n\toutline: none;\r\n\tanimation: none;\r\n}\r\n\r\n/* footer */\r\n.top-editArea_footer {\r\n\tpadding: var(--top-forms-padding);\r\n\tdisplay: flex;\r\n\tjustify-content: flex-end;\r\n\tgap: var(--top-forms-padding);\r\n}\r\n\r\n/* attachedToKeyboard */\r\n.top-editArea-attachedToKeyboard {\r\n\tbackground: var(--top-forms-background-color);\r\n\tmargin-bottom: env(keyboard-inset-height, 0);\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tright: 0;\r\n\tleft: 0;\r\n\tz-index: 2;\r\n\tgap: 0;\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_form {\r\n\tborder-radius: 0;\r\n\tborder: none;\r\n\tborder-top: 1px solid var(--top-forms-border-color);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_title {\r\n\tborder-top: 1px solid var(--color-line-2-opacity);\r\n\tpadding: var(--top-forms-padding);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\r\n\tborder-radius: 100%;\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { ref, toRef, watch } from 'vue';\r\nimport type { Props, Emits } from './editInput';\r\nimport Input from '@/components/forms/input/input.vue';\r\nimport Button from '@/components/forms/button/button.vue';\r\n\r\nconst props = defineProps<Props>();\r\n\r\nconst intermediateValue = ref(props.modelValue);\r\n\r\nwatch(toRef(props.modelValue), () => {\r\n\tintermediateValue.value = props.modelValue;\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst submit = () => {\r\n\temit('update:modelValue', intermediateValue.value);\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<div class=\"top-editInput\">\r\n\t\t<Input\r\n\t\t\t:=\"input\"\r\n\t\t\t@keydown.esc.capture.stop=\"intermediateValue = modelValue\"\r\n\t\t\t@keydown.enter.stop=\"submit\"\r\n\t\t\tv-model=\"intermediateValue\"\r\n\t\t/>\r\n\r\n\t\t<Button\r\n\t\t\tv-if=\"intermediateValue !== modelValue\"\r\n\t\t\ticon=\"\"\r\n\t\t\tstyling=\"soft\"\r\n\t\t\t:=\"button\"\r\n\t\t\t@click=\"submit\"\r\n\t\t>\r\n\t\t\t<!-- @slot Слот Button -->\r\n\t\t\t<slot></slot>\r\n\t\t</Button>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n.top-editInput {\r\n\twidth: 220px;\r\n\tflex-grow: 1;\r\n\tdisplay: flex;\r\n\talign-items: flex-end;\r\n\tgap: var(--top-gap-1);\r\n}\r\n\r\n.top-editInput .top-input {\r\n\twidth: unset;\r\n\tflex-grow: 1;\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props, Emits } from './radioGroup';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tsize: 's',\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst localValue = computed({\r\n\tget() {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\r\n\tset(value) {\r\n\t\temit('update:modelValue', value);\r\n\t},\r\n});\r\n\r\nconst uid = 'radioGroup-' + Math.random();\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\t:class=\"{\r\n\t\t\t['top-radioGroup']: true,\r\n\t\t\t['top-scrollBarXHidding']: true,\r\n\t\t\t['top-size_' + size]: !!size,\r\n\t\t\t['top-error']: isError,\r\n\t\t}\"\r\n\t>\r\n\t\t<label\r\n\t\t\tv-for=\"item of radiosProps\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-radioGroup_item-selected']: item.value === localValue,\r\n\t\t\t\t['top-radioGroup_item']: true,\r\n\t\t\t\t['top-forms-focusable']: true,\r\n\t\t\t\t['top-disabled']: item.disabled,\r\n\t\t\t}\"\r\n\t\t\t:data-top-icon=\"item.icon\"\r\n\t\t\t@click=\"localValue = item.value\"\r\n\t\t>\r\n\t\t\t{{ item.title }}\r\n\r\n\t\t\t<span\r\n\t\t\t\tv-if=\"showIndicator\"\r\n\t\t\t\tclass=\"top-radioGroup_circle\"\r\n\t\t\t></span>\r\n\r\n\t\t\t<!-- Для нативной навигации -->\r\n\t\t\t<input\r\n\t\t\t\tv-model=\"localValue\"\r\n\t\t\t\t:name=\"uid\"\r\n\t\t\t\ttype=\"radio\"\r\n\t\t\t\t:class=\"{\r\n\t\t\t\t\t['top-unvisible']: true,\r\n\t\t\t\t}\"\r\n\t\t\t\t:value=\"item.value\"\r\n\t\t\t\t:disabled=\"item.disabled\"\r\n\t\t\t/>\r\n\t\t</label>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n@import \"./styles/top-scrollBar.css\";\r\n\r\n.top-radioGroup {\r\n\tuser-select: none;\r\n\tbox-sizing: border-box;\r\n\tborder-radius: 8px;\r\n\tbackground-color: var(--color-theme-50);\r\n\theight: var(--top-forms-base-height);\r\n\tpadding: 2px;\r\n\tgap: 2px;\r\n\tdisplay: flex;\r\n\talign-items: flex-start;\r\n}\r\n\r\n.top-radioGroup_item {\r\n\tcursor: pointer;\r\n\tbox-sizing: border-box;\r\n\tborder-radius: 6px;\r\n\theight: calc(var(--top-forms-base-height) - 4px);\r\n\tpadding: 0 16px;\r\n\tfont-weight: 600;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tflex-grow: 1;\r\n\tgap: 4px;\r\n}\r\n\r\n.top-radioGroup_item:hover {\r\n\tbackground-color: var(--color-theme-25);\r\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\r\n}\r\n\r\n/* selected */\r\n.top-radioGroup_item-selected {\r\n\tpointer-events: none;\r\n\tbackground-color: var(--color-bg-3);\r\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\r\n}\r\n\r\n/* circle */\r\n.top-radioGroup_circle {\r\n\tcontent: \"\";\r\n\tbox-sizing: border-box;\r\n\tborder: 1px solid var(--color-line-3-opacity);\r\n\tborder-radius: 50%;\r\n\tpadding: 3px;\r\n\tmargin-left: auto;\r\n\twidth: calc(var(--top-forms-option-height) - 3px * 2);\r\n\theight: calc(var(--top-forms-option-height) - 3px * 2);\r\n}\r\n\r\n.top-radioGroup_item:hover .top-radioGroup_circle:before {\r\n\tborder-color: var(--color-primary);\r\n}\r\n\r\n/* circle selected */\r\n.top-radioGroup_item-selected .top-radioGroup_circle {\r\n\tborder-color: var(--color-primary);\r\n\tborder-width: 5px;\r\n}\r\n\r\n.top-radioGroup_item-selected:hover .top-radioGroup_circle {\r\n\tborder-color: var(--color-primary-2);\r\n}\r\n\r\n/* top-disabled */\r\n.top-radioGroup_item.top-disabled {\r\n\t--top-icon-color: var(--color-text-3);\r\n\r\n\tcolor: var(--color-text-3);\r\n}\r\n\r\n.top-radioGroup_item.top-disabled .top-radioGroup_circle {\r\n\tborder-color: var(--color-theme-400);\r\n\tbackground-color: var(--color-theme-50);\r\n}\r\n\r\n/* top-error  */\r\n.top-radioGroup.top-error .top-radioGroup_item:not(.top-disabled) .top-radioGroup_circle {\r\n\tborder-color: var(--color-negative);\r\n}\r\n</style>"],"names":["props","__props","emit","__emit","state","ref","localValue","watch","toRef","isChanged","computed","submit","value","cancel","intermediateValue","uid"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAAA,IAAAC,GAMAC,IAAAC,GAEAC,IAAAC,EAAA,EAAA,GAKAC,IAAAD,EAAAL,EAAA,UAAA;AAEA,IAAAO,EAAAC,EAAAR,GAAA,YAAA,GAAA,MAAA;AACC,MAAAM,EAAA,QAAAN,EAAA;AAAA,IAAyB,CAAA;AAG1B,UAAAS,IAAAC,EAAA,MAAAJ,EAAA,UAAAN,EAAA,UAAA,GAEAW,IAAA,CAAAC,MAAA;AACC,MAAAV,EAAA,qBAAAU,CAAA;AAAA,IAA+B,GAGhCC,IAAA,MAAA;AACC,MAAAX,EAAA,QAAA,GAGAI,EAAA,QAAAN,EAAA;AAAA,IAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/B1B,UAAAA,IAAAC,GAEAa,IAAAT,EAAAL,EAAA,UAAA;AAEA,IAAAO,EAAAC,EAAAR,EAAA,UAAA,GAAA,MAAA;AACC,MAAAc,EAAA,QAAAd,EAAA;AAAA,IAAgC,CAAA;AAGjC,UAAAE,IAAAC,GAEAQ,IAAA,MAAA;AACC,MAAAT,EAAA,qBAAAY,EAAA,KAAA;AAAA,IAAiD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACblD,UAAAd,IAAAC,GAIAC,IAAAC,GAEAG,IAAAI,EAAA;AAAA,MAA4B,MAAA;AAE1B,eAAAV,EAAA;AAAA,MAAa;AAAA,MACd,IAAAY,GAAA;AAGC,QAAAV,EAAA,qBAAAU,CAAA;AAAA,MAA+B;AAAA,IAChC,CAAA,GAGDG,IAAA,gBAAA,KAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/icomoon/demo-files/demo.css

@@ -1,161 +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;
-}
-
+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;
+}
+