@huntflow/ui 0.0.16 → 0.0.18

package/README.md

@@ -4,6 +4,11 @@
   <img alt="" src="https://img.shields.io/npm/dm/@huntflow/ui.svg" />
 </a>
 
+<a href="https://deno.bundlejs.com/badge?q=@huntflow/ui@0.0.17&treeshake=[*]" target="\_parent">
+  <img alt="" src="https://deno.bundlejs.com/badge?q=@huntflow/ui@0.0.17&treeshake=[*]" />
+</a>
+
+
 **@huntflow/ui** — это библиотека компонентов, предназначенная для создания удобных, масштабируемых и согласованных пользовательских интерфейсов. Проект ориентирован на упрощение разработки и поддержания единого стиля интерфейса во всех продуктах компании.
 
 ## 🚀 Основные возможности
@@ -21,6 +26,12 @@
 npm install @huntflow/ui
 ```
 
+## 📚 Storybook
+
+```javascript
+npm run storybook
+```
+
 ##  Пример использования
 ```javascript
 

package/dist/components/button/button.vue.d.ts

@@ -0,0 +1,31 @@
+import { BaseButtonProps } from './types';
+declare function __VLS_template(): {
+    slots: {
+        leftIcon?(_: {
+            icon: import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+                [key: string]: any;
+            }>;
+        }): any;
+        default?(_: {}): any;
+        rightIcon?(_: {
+            icon: import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+                [key: string]: any;
+            }>;
+        }): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<BaseButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import('vue').PublicProps, Readonly<BaseButtonProps> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/button/types.d.ts

@@ -0,0 +1,35 @@
+import { VNode } from 'vue';
+export type BaseButtonProps = {
+    size?: ButtonSize;
+    className?: string;
+    type?: ButtonType;
+    leftIcon?: VNode;
+    rightIcon?: VNode;
+    block?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    active?: boolean;
+    name?: string;
+    circle?: boolean;
+    bordered?: boolean;
+    htmlType?: ButtonHTMLType;
+};
+export declare enum ButtonSize {
+    XS = "xs",
+    S = "s",
+    M = "m",
+    L = "l",
+    XL = "xl"
+}
+export declare enum ButtonType {
+    PRIMARY = "primary",
+    DANGER = "danger",
+    DEFAULT = "default",
+    TEXT = "text",
+    LINK = "link"
+}
+export declare enum ButtonHTMLType {
+    SUBMIT = "submit",
+    BUTTON = "button",
+    RESET = "reset"
+}

package/dist/components/input/input.vue.d.ts

@@ -0,0 +1,28 @@
+import { BaseInputProps } from './types.ts';
+declare let __VLS_typeProps: BaseInputProps;
+type __VLS_PublicProps = {
+    modelValue?: string;
+} & typeof __VLS_typeProps;
+declare function __VLS_template(): {
+    slots: {
+        prefix?(_: {}): any;
+        suffix?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    enter: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onEnter?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/input/types.d.ts

@@ -0,0 +1,27 @@
+export type BaseInputProps = {
+    value: string;
+    type?: InputType;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    label?: string;
+    placeholder?: string;
+    loading?: boolean;
+    error?: string | null | void;
+    size?: InputSize;
+    className?: string;
+};
+export declare enum InputSize {
+    XS = "xs",
+    S = "s",
+    M = "m",
+    L = "l",
+    XL = "xl"
+}
+export declare enum InputType {
+    TEXT = "text",
+    PASSWORD = "password",
+    EMAIL = "email",
+    TEL = "tel",
+    SEARCH = "search"
+}

package/dist/main.d.ts

@@ -1 +1,4 @@
-export { default as TestButton } from './components/TestButton/TestButton.vue';
+export { default as BaseInput } from './components/input/input.vue';
+export { type BaseInputProps } from './components/input/types.ts';
+export { default as BaseButton } from './components/button/button.vue';
+export { type BaseButtonProps } from './components/button/types.ts';

package/dist/ui.es.js

@@ -1,22 +1,201 @@
-(function(){"use strict";var n;try{if(typeof document<"u"){var e=document.createElement("style");e.nonce=(n=document.head.querySelector("meta[property=csp-nonce]"))==null?void 0:n.content,e.appendChild(document.createTextNode("#baseButton{padding:1rem 2rem;cursor:pointer;border:none;background-color:var(--02dc2362);font-size:var(--0b00b891)}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-import { defineComponent as n, useCssVars as r, computed as c, openBlock as u, createElementBlock as l, renderSlot as a } from "vue";
-const p = { id: "baseButton" }, f = /* @__PURE__ */ n({
-  __name: "TestButton",
+(function(){"use strict";var r;try{if(typeof document<"u"){var o=document.createElement("style");o.nonce=(r=document.head.querySelector("meta[property=csp-nonce]"))==null?void 0:r.content,o.appendChild(document.createTextNode("._wrapper_hww12_1{display:flex;flex-direction:column}._label_hww12_6{margin-bottom:4px;font-size:14px;color:#333}._container_hww12_12{position:relative;display:flex;align-items:center}._input_hww12_18{flex:1;padding:8px 12px;font-size:14px;border:1px solid #ced4da;border-radius:12px;outline:none;transition:border-color .3s}._xs_hww12_28{padding:4px 8px;font-size:12px}._s_hww12_33{padding:6px 10px;font-size:13px}._m_hww12_38{padding:8px 12px;font-size:14px}._l_hww12_6{padding:10px 14px;font-size:16px}._xl_hww12_48{padding:12px 16px;font-size:18px}input:focus{border-color:#007bff}._disabled_hww12_57{background-color:#e9ecef;cursor:not-allowed}._error_hww12_62{border-color:#dc3545}._error_hww12_62{margin-top:4px;font-size:12px;color:#dc3545}._prefix_hww12_72,._suffix_hww12_73{position:absolute;display:flex;align-items:center;color:#6c757d}._prefix_hww12_72{left:8px}._suffix_hww12_73{right:8px}._loading_hww12_88{cursor:wait}._spinner_hww12_92{position:absolute;right:8px;width:16px;height:16px;border:2px solid rgba(0,0,0,.2);border-top-color:#007bff;border-radius:50%;animation:_spin_hww12_92 .6s linear infinite}@keyframes _spin_hww12_92{to{transform:rotate(360deg)}}._button_den84_1{position:relative;display:inline-flex;align-items:center;font-weight:500;justify-content:center;border:none;border-radius:var(--hf-button-border-radius);cursor:pointer;transition:background-color .3s,box-shadow .3s}._button_den84_1:focus{outline:none}._primary_den84_19{color:var(--hf-button-primary-text-color);border:1px solid var(--hf-button-primary-background-color);background-color:var(--hf-button-primary-background-color)}._primary_den84_19:hover{background-color:var(--hf-button-primary-hover-background-color)}._primary_den84_19:focus{box-shadow:0 0 0 3px var(--hf-button-primary-focus-color)}._primary_den84_19._bordered_den84_34{background-color:#fff;color:var(--hf-button-primary-background-color);border:1px solid var(--hf-button-primary-background-color)}._danger_den84_40{color:var(--hf-button-danger-text-color);background-color:var(--hf-button-danger-background-color)}._danger_den84_40:hover{background-color:var(--hf-button-danger-hover-background-color)}._danger_den84_40:focus{box-shadow:0 0 0 3px var(--hf-button-danger-focus-color)}._danger_den84_40._bordered_den84_34{background-color:#fff;color:var(--hf-button-danger-background-color);border:1px solid var(--hf-button-danger-background-color)}._default_den84_59{background-color:#fff;color:var(--hf-button-default-text-color);border:1px solid var(--hf-button-default-border-color)}._default_den84_59:hover{background-color:var(--hf-button-default-hover-background-color)}._default_den84_59:focus{box-shadow:0 0 0 3px var(--hf-button-default-focus-color)}._text_den84_73{background-color:#fff;color:#000}._link_den84_78{background-color:#fff;color:#007bff;text-decoration:underline}._block_den84_84{width:100%}._disabled_den84_88{background-color:#e9ecef;color:#6c757d;cursor:not-allowed}._loading_den84_94{cursor:wait}._circle_den84_98{border-radius:100%;padding:0!important}._bordered_den84_34{border:1px solid currentColor}._icon_den84_107{display:flex;align-items:center}._iconLeft_den84_112{margin-right:8px}._iconRight_den84_116{margin-left:8px}._xs_den84_120{padding:4px 8px;font-size:12px}._s_den84_125{padding:6px 12px;font-size:14px;line-height:20px}._m_den84_131{padding:6px 12px;font-size:15px;line-height:24px}._l_den84_78{padding:16px 32px;font-size:18px}._xl_den84_142{padding:20px 40px;font-size:20px}._spinner_den84_147{display:inline-block;position:absolute;right:0;left:0;margin:0 auto;width:16px;height:16px;border:2px solid rgba(0,0,0,.2);border-top-color:#007bff;border-radius:50%;animation:_spin_den84_147 .6s linear infinite}@keyframes _spin_den84_147{to{transform:rotate(360deg)}}")),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { defineComponent as y, mergeModels as w, useModel as I, computed as k, openBlock as r, createElementBlock as i, normalizeClass as l, unref as t, toDisplayString as g, createCommentVNode as d, createElementVNode as h, renderSlot as _, Fragment as B } from "vue";
+const M = "_wrapper_hww12_1", N = "_label_hww12_6", E = "_container_hww12_12", R = "_input_hww12_18", V = "_xs_hww12_28", C = "_s_hww12_33", X = "_m_hww12_38", A = "_l_hww12_6", D = "_xl_hww12_48", F = "_disabled_hww12_57", K = "_error_hww12_62", T = "_prefix_hww12_72", U = "_suffix_hww12_73", G = "_loading_hww12_88", P = "_spinner_hww12_92", Y = "_spin_hww12_92", a = {
+  wrapper: M,
+  label: N,
+  container: E,
+  input: R,
+  xs: V,
+  s: C,
+  m: X,
+  l: A,
+  xl: D,
+  disabled: F,
+  error: K,
+  prefix: T,
+  suffix: U,
+  loading: G,
+  spinner: P,
+  spin: Y
+};
+var $ = /* @__PURE__ */ ((e) => (e.XS = "xs", e.S = "s", e.M = "m", e.L = "l", e.XL = "xl", e))($ || {});
+const j = ["for"], q = ["id", "value", "name", "type", "disabled", "placeholder"], ue = /* @__PURE__ */ y({
+  name: "BaseInput",
+  __name: "input",
+  props: /* @__PURE__ */ w({
+    value: {},
+    type: {},
+    id: {},
+    name: {},
+    disabled: { type: Boolean },
+    label: {},
+    placeholder: {},
+    loading: { type: Boolean },
+    error: {},
+    size: {},
+    className: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ w(["update:modelValue", "enter"], ["update:modelValue"]),
+  setup(e, { emit: u }) {
+    const n = e, b = I(e, "modelValue"), p = u, c = (s) => {
+      const f = s.target;
+      p("update:modelValue", f.value);
+    }, m = (s) => {
+      s.key === "Enter" && p("enter");
+    }, L = k(() => [
+      a.input,
+      a[n.size || $.M],
+      {
+        [a.disabled]: n.disabled,
+        [a.error]: n.error,
+        [a.loading]: n.loading
+      },
+      n.className
+    ]);
+    return (s, f) => (r(), i("div", {
+      class: l(t(a).wrapper)
+    }, [
+      s.label ? (r(), i("label", {
+        key: 0,
+        for: s.id,
+        class: l(t(a).label)
+      }, g(s.label), 11, j)) : d("", !0),
+      h("div", {
+        class: l(t(a).container)
+      }, [
+        s.$slots.prefix ? (r(), i("span", {
+          key: 0,
+          class: l(t(a).prefix)
+        }, [
+          _(s.$slots, "prefix")
+        ], 2)) : d("", !0),
+        h("input", {
+          id: s.id,
+          value: b.value,
+          name: s.name,
+          type: s.type || "text",
+          disabled: s.disabled || s.loading,
+          placeholder: s.placeholder,
+          class: l(L.value),
+          onInput: c,
+          onKeydown: m
+        }, null, 42, q),
+        s.$slots.suffix ? (r(), i("span", {
+          key: 1,
+          class: l(t(a).suffix)
+        }, [
+          _(s.$slots, "suffix")
+        ], 2)) : d("", !0),
+        s.loading ? (r(), i("span", {
+          key: 2,
+          class: l(t(a).spinner)
+        }, null, 2)) : d("", !0)
+      ], 2),
+      s.error ? (r(), i("p", {
+        key: 1,
+        class: l(t(a).error)
+      }, g(s.error), 3)) : d("", !0)
+    ], 2));
+  }
+}), H = "_button_den84_1", J = "_primary_den84_19", O = "_bordered_den84_34", Q = "_danger_den84_40", W = "_text_den84_73", Z = "_link_den84_78", S = "_block_den84_84", z = "_disabled_den84_88", ee = "_loading_den84_94", ne = "_circle_den84_98", se = "_icon_den84_107", oe = "_iconLeft_den84_112", le = "_iconRight_den84_116", te = "_xs_den84_120", ae = "_s_den84_125", re = "_m_den84_131", ie = "_l_den84_78", de = "_xl_den84_142", ce = "_spinner_den84_147", _e = "_spin_den84_147", o = {
+  button: H,
+  primary: J,
+  bordered: O,
+  danger: Q,
+  default: "_default_den84_59",
+  text: W,
+  link: Z,
+  block: S,
+  disabled: z,
+  loading: ee,
+  circle: ne,
+  icon: se,
+  iconLeft: oe,
+  iconRight: le,
+  xs: te,
+  s: ae,
+  m: re,
+  l: ie,
+  xl: de,
+  spinner: ce,
+  spin: _e
+};
+var x = /* @__PURE__ */ ((e) => (e.XS = "xs", e.S = "s", e.M = "m", e.L = "l", e.XL = "xl", e))(x || {}), v = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.DANGER = "danger", e.DEFAULT = "default", e.TEXT = "text", e.LINK = "link", e))(v || {});
+const pe = ["name", "type", "disabled"], be = /* @__PURE__ */ y({
+  name: "BaseButton",
+  __name: "button",
   props: {
-    size: { default: 16 },
-    color: { default: "skyblue" }
+    size: {},
+    className: {},
+    type: {},
+    leftIcon: {},
+    rightIcon: {},
+    block: { type: Boolean },
+    disabled: { type: Boolean },
+    loading: { type: Boolean },
+    active: { type: Boolean },
+    name: {},
+    circle: { type: Boolean },
+    bordered: { type: Boolean },
+    htmlType: {}
   },
-  setup(t) {
-    r((e) => ({
-      "02dc2362": e.color,
-      "0b00b891": s.value
-    }));
-    const o = t, s = c(() => `${o.size}px`);
-    return (e, d) => (u(), l("button", p, [
-      a(e.$slots, "default")
-    ]));
+  emits: ["click"],
+  setup(e, { emit: u }) {
+    const n = e, b = u, p = k(() => [
+      o.button,
+      o[n.size || x.M],
+      o[n.type || v.DEFAULT],
+      {
+        [o.block]: n.block,
+        [o.disabled]: n.disabled || n.loading,
+        [o.loading]: n.loading,
+        [o.active]: n.active,
+        [o.circle]: n.circle,
+        [o.bordered]: n.bordered
+      },
+      n.className
+    ]);
+    return (c, m) => (r(), i("button", {
+      name: n.name,
+      class: l(p.value),
+      type: n.htmlType,
+      disabled: n.disabled || n.loading,
+      onClick: m[0] || (m[0] = () => b("click"))
+    }, [
+      n.loading ? (r(), i("span", {
+        key: 0,
+        class: l(t(o).spinner)
+      }, null, 2)) : (r(), i(B, { key: 1 }, [
+        n.leftIcon ? (r(), i("span", {
+          key: 0,
+          class: l([t(o).icon, t(o).iconLeft])
+        }, [
+          _(c.$slots, "leftIcon", {
+            icon: n.leftIcon
+          })
+        ], 2)) : d("", !0),
+        c.$slots.default ? (r(), i("span", {
+          key: 1,
+          class: l(t(o).content)
+        }, [
+          _(c.$slots, "default")
+        ], 2)) : d("", !0),
+        n.rightIcon ? (r(), i("span", {
+          key: 2,
+          class: l([t(o).icon, t(o).iconRight])
+        }, [
+          _(c.$slots, "rightIcon", {
+            icon: n.rightIcon
+          })
+        ], 2)) : d("", !0)
+      ], 64))
+    ], 10, pe));
   }
 });
 export {
-  f as TestButton
+  be as BaseButton,
+  ue as BaseInput
 };

package/dist/ui.umd.js

@@ -1,2 +1,2 @@
-(function(){"use strict";var n;try{if(typeof document<"u"){var e=document.createElement("style");e.nonce=(n=document.head.querySelector("meta[property=csp-nonce]"))==null?void 0:n.content,e.appendChild(document.createTextNode("#baseButton{padding:1rem 2rem;cursor:pointer;border:none;background-color:var(--02dc2362);font-size:var(--0b00b891)}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.ui={},t.Vue))})(this,function(t,e){"use strict";const n={id:"baseButton"},s=e.defineComponent({__name:"TestButton",props:{size:{default:16},color:{default:"skyblue"}},setup(i){e.useCssVars(o=>({"02dc2362":o.color,"0b00b891":d.value}));const u=i,d=e.computed(()=>`${u.size}px`);return(o,c)=>(e.openBlock(),e.createElementBlock("button",n,[e.renderSlot(o.$slots,"default")]))}});t.TestButton=s,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
+(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.ui={},a.Vue))})(this,function(a,e){"use strict";var p=document.createElement("style");p.textContent=`._wrapper_hww12_1{display:flex;flex-direction:column}._label_hww12_6{margin-bottom:4px;font-size:14px;color:#333}._container_hww12_12{position:relative;display:flex;align-items:center}._input_hww12_18{flex:1;padding:8px 12px;font-size:14px;border:1px solid #ced4da;border-radius:12px;outline:none;transition:border-color .3s}._xs_hww12_28{padding:4px 8px;font-size:12px}._s_hww12_33{padding:6px 10px;font-size:13px}._m_hww12_38{padding:8px 12px;font-size:14px}._l_hww12_6{padding:10px 14px;font-size:16px}._xl_hww12_48{padding:12px 16px;font-size:18px}input:focus{border-color:#007bff}._disabled_hww12_57{background-color:#e9ecef;cursor:not-allowed}._error_hww12_62{border-color:#dc3545}._error_hww12_62{margin-top:4px;font-size:12px;color:#dc3545}._prefix_hww12_72,._suffix_hww12_73{position:absolute;display:flex;align-items:center;color:#6c757d}._prefix_hww12_72{left:8px}._suffix_hww12_73{right:8px}._loading_hww12_88{cursor:wait}._spinner_hww12_92{position:absolute;right:8px;width:16px;height:16px;border:2px solid rgba(0,0,0,.2);border-top-color:#007bff;border-radius:50%;animation:_spin_hww12_92 .6s linear infinite}@keyframes _spin_hww12_92{to{transform:rotate(360deg)}}._button_den84_1{position:relative;display:inline-flex;align-items:center;font-weight:500;justify-content:center;border:none;border-radius:var(--hf-button-border-radius);cursor:pointer;transition:background-color .3s,box-shadow .3s}._button_den84_1:focus{outline:none}._primary_den84_19{color:var(--hf-button-primary-text-color);border:1px solid var(--hf-button-primary-background-color);background-color:var(--hf-button-primary-background-color)}._primary_den84_19:hover{background-color:var(--hf-button-primary-hover-background-color)}._primary_den84_19:focus{box-shadow:0 0 0 3px var(--hf-button-primary-focus-color)}._primary_den84_19._bordered_den84_34{background-color:#fff;color:var(--hf-button-primary-background-color);border:1px solid var(--hf-button-primary-background-color)}._danger_den84_40{color:var(--hf-button-danger-text-color);background-color:var(--hf-button-danger-background-color)}._danger_den84_40:hover{background-color:var(--hf-button-danger-hover-background-color)}._danger_den84_40:focus{box-shadow:0 0 0 3px var(--hf-button-danger-focus-color)}._danger_den84_40._bordered_den84_34{background-color:#fff;color:var(--hf-button-danger-background-color);border:1px solid var(--hf-button-danger-background-color)}._default_den84_59{background-color:#fff;color:var(--hf-button-default-text-color);border:1px solid var(--hf-button-default-border-color)}._default_den84_59:hover{background-color:var(--hf-button-default-hover-background-color)}._default_den84_59:focus{box-shadow:0 0 0 3px var(--hf-button-default-focus-color)}._text_den84_73{background-color:#fff;color:#000}._link_den84_78{background-color:#fff;color:#007bff;text-decoration:underline}._block_den84_84{width:100%}._disabled_den84_88{background-color:#e9ecef;color:#6c757d;cursor:not-allowed}._loading_den84_94{cursor:wait}._circle_den84_98{border-radius:100%;padding:0!important}._bordered_den84_34{border:1px solid currentColor}._icon_den84_107{display:flex;align-items:center}._iconLeft_den84_112{margin-right:8px}._iconRight_den84_116{margin-left:8px}._xs_den84_120{padding:4px 8px;font-size:12px}._s_den84_125{padding:6px 12px;font-size:14px;line-height:20px}._m_den84_131{padding:6px 12px;font-size:15px;line-height:24px}._l_den84_78{padding:16px 32px;font-size:18px}._xl_den84_142{padding:20px 40px;font-size:20px}._spinner_den84_147{display:inline-block;position:absolute;right:0;left:0;margin:0 auto;width:16px;height:16px;border:2px solid rgba(0,0,0,.2);border-top-color:#007bff;border-radius:50%;animation:_spin_den84_147 .6s linear infinite}@keyframes _spin_den84_147{to{transform:rotate(360deg)}}
+/*$vite$:1*/`,document.head.appendChild(p);const l={wrapper:"_wrapper_hww12_1",label:"_label_hww12_6",container:"_container_hww12_12",input:"_input_hww12_18",xs:"_xs_hww12_28",s:"_s_hww12_33",m:"_m_hww12_38",l:"_l_hww12_6",xl:"_xl_hww12_48",disabled:"_disabled_hww12_57",error:"_error_hww12_62",prefix:"_prefix_hww12_72",suffix:"_suffix_hww12_73",loading:"_loading_hww12_88",spinner:"_spinner_hww12_92",spin:"_spin_hww12_92"};var f=(o=>(o.XS="xs",o.S="s",o.M="m",o.L="l",o.XL="xl",o))(f||{});const x=["for"],h=["id","value","name","type","disabled","placeholder"],u=e.defineComponent({name:"BaseInput",__name:"input",props:e.mergeModels({value:{},type:{},id:{},name:{},disabled:{type:Boolean},label:{},placeholder:{},loading:{type:Boolean},error:{},size:{},className:{}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["update:modelValue","enter"],["update:modelValue"]),setup(o,{emit:c}){const n=o,_=e.useModel(o,"modelValue"),d=c,i=r=>{const g=r.target;d("update:modelValue",g.value)},s=r=>{r.key==="Enter"&&d("enter")},y=e.computed(()=>[l.input,l[n.size||f.M],{[l.disabled]:n.disabled,[l.error]:n.error,[l.loading]:n.loading},n.className]);return(r,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(l).wrapper)},[r.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:r.id,class:e.normalizeClass(e.unref(l).label)},e.toDisplayString(r.label),11,x)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(e.unref(l).container)},[r.$slots.prefix?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(e.unref(l).prefix)},[e.renderSlot(r.$slots,"prefix")],2)):e.createCommentVNode("",!0),e.createElementVNode("input",{id:r.id,value:_.value,name:r.name,type:r.type||"text",disabled:r.disabled||r.loading,placeholder:r.placeholder,class:e.normalizeClass(y.value),onInput:i,onKeydown:s},null,42,h),r.$slots.suffix?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(e.unref(l).suffix)},[e.renderSlot(r.$slots,"suffix")],2)):e.createCommentVNode("",!0),r.loading?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(e.unref(l).spinner)},null,2)):e.createCommentVNode("",!0)],2),r.error?(e.openBlock(),e.createElementBlock("p",{key:1,class:e.normalizeClass(e.unref(l).error)},e.toDisplayString(r.error),3)):e.createCommentVNode("",!0)],2))}}),t={button:"_button_den84_1",primary:"_primary_den84_19",bordered:"_bordered_den84_34",danger:"_danger_den84_40",default:"_default_den84_59",text:"_text_den84_73",link:"_link_den84_78",block:"_block_den84_84",disabled:"_disabled_den84_88",loading:"_loading_den84_94",circle:"_circle_den84_98",icon:"_icon_den84_107",iconLeft:"_iconLeft_den84_112",iconRight:"_iconRight_den84_116",xs:"_xs_den84_120",s:"_s_den84_125",m:"_m_den84_131",l:"_l_den84_78",xl:"_xl_den84_142",spinner:"_spinner_den84_147",spin:"_spin_den84_147"};var b=(o=>(o.XS="xs",o.S="s",o.M="m",o.L="l",o.XL="xl",o))(b||{}),m=(o=>(o.PRIMARY="primary",o.DANGER="danger",o.DEFAULT="default",o.TEXT="text",o.LINK="link",o))(m||{});const w=["name","type","disabled"],k=e.defineComponent({name:"BaseButton",__name:"button",props:{size:{},className:{},type:{},leftIcon:{},rightIcon:{},block:{type:Boolean},disabled:{type:Boolean},loading:{type:Boolean},active:{type:Boolean},name:{},circle:{type:Boolean},bordered:{type:Boolean},htmlType:{}},emits:["click"],setup(o,{emit:c}){const n=o,_=c,d=e.computed(()=>[t.button,t[n.size||b.M],t[n.type||m.DEFAULT],{[t.block]:n.block,[t.disabled]:n.disabled||n.loading,[t.loading]:n.loading,[t.active]:n.active,[t.circle]:n.circle,[t.bordered]:n.bordered},n.className]);return(i,s)=>(e.openBlock(),e.createElementBlock("button",{name:n.name,class:e.normalizeClass(d.value),type:n.htmlType,disabled:n.disabled||n.loading,onClick:s[0]||(s[0]=()=>_("click"))},[n.loading?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(e.unref(t).spinner)},null,2)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[n.leftIcon?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([e.unref(t).icon,e.unref(t).iconLeft])},[e.renderSlot(i.$slots,"leftIcon",{icon:n.leftIcon})],2)):e.createCommentVNode("",!0),i.$slots.default?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(e.unref(t).content)},[e.renderSlot(i.$slots,"default")],2)):e.createCommentVNode("",!0),n.rightIcon?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass([e.unref(t).icon,e.unref(t).iconRight])},[e.renderSlot(i.$slots,"rightIcon",{icon:n.rightIcon})],2)):e.createCommentVNode("",!0)],64))],10,w))}});a.BaseButton=k,a.BaseInput=u,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -2,7 +2,7 @@
   "name": "@huntflow/ui",
   "description": "HuntFlow UiKit, icons, utils library",
   "private": false,
-  "version": "0.0.16",
+  "version": "0.0.18",
   "author": {
     "name": "HuntFlow Developer",
     "nickname": "developer",
@@ -12,7 +12,10 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "eslint './src/**/*.{js,vue,ts}' --quiet"
   },
   "publishConfig": {
     "access": "public"
@@ -51,12 +54,41 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@eslint/js": "^9.17.0",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/vue3": "^8.4.7",
+    "@storybook/vue3-vite": "^8.4.7",
+    "@types/eslint": "^9.6.1",
     "@types/node": "^22.10.1",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
     "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/eslint-config-typescript": "^14.1.4",
+    "autoprefixer": "^10.4.20",
+    "css-has-pseudo": "^7.0.2",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jest": "^28.9.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.32.0",
+    "postcss": "^8.4.49",
+    "postcss-loader": "^8.1.1",
+    "postcss-nesting": "^13.0.1",
+    "prettier": "^3.4.2",
+    "storybook": "^8.4.7",
+    "stylelint": "^16.12.0",
+    "stylelint-config-recommended": "^14.0.1",
     "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.1",
     "vite": "^5.4.10",
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-eslint2": "^5.0.3",
     "vue-tsc": "^2.1.8"
   }
 }

package/dist/components/TestButton/TestButton.vue.d.ts

@@ -1,23 +0,0 @@
-type TestButtonProps = {
-    size?: number;
-    color?: string;
-};
-declare function __VLS_template(): {
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    attrs: Partial<{}>;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<TestButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TestButtonProps> & Readonly<{}>, {
-    size: number;
-    color: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};