hp-design-system 1.0.1 → 1.0.2

package/dist/hp-design-system.es.js

@@ -1,23 +1,265 @@
-import { defineComponent as o, openBlock as r, createElementBlock as c, toDisplayString as p } from "vue";
-const u = /* @__PURE__ */ o({
+import { computed as y, openBlock as c, createElementBlock as i, normalizeClass as m, normalizeStyle as d, createElementVNode as o, defineComponent as p, createVNode as h, createCommentVNode as k, toDisplayString as l, pushScopeId as g, popScopeId as P, createTextVNode as S } from "vue";
+const _ = ["xlink:href"], f = {
+  __name: "Icon",
+  props: {
+    name: {
+      type: String,
+      required: !0
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  },
+  setup(e) {
+    const n = e, t = y(() => ({
+      sm: "icon-small",
+      md: "icon-medium",
+      lg: "icon-large"
+    })[n.size] || "icon-medium");
+    return (a, r) => (c(), i("svg", {
+      class: m(["icon", t.value]),
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      style: d({ fill: e.color })
+    }, [
+      o("use", {
+        "xlink:href": `#icon-${e.name}`
+      }, null, 8, _)
+    ], 6));
+  }
+}, C = ["aria-label", "aria-disabled"], x = {
+  key: 0,
+  class: "button-icon"
+}, O = { class: "button-label" }, v = /* @__PURE__ */ p({
   __name: "Button",
   props: {
-    text: { type: String, required: !0 }
+    label: {
+      type: String,
+      required: !0
+    },
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    backgroundColor: {
+      type: String,
+      default: ""
+    },
+    labelColor: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    icon: {
+      type: String,
+      default: ""
+    },
+    iconPosition: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: n }) {
+    const t = e, a = n, r = (u) => {
+      t.disabled || a("click", u);
+    };
+    return (u, R) => (c(), i("button", {
+      class: "button",
+      "aria-label": e.ariaLabel || e.label,
+      onClick: r,
+      "aria-disabled": e.disabled
+    }, [
+      e.icon ? (c(), i("span", x, [
+        h(f, {
+          name: e.icon,
+          size: "sm",
+          color: "white"
+        }, null, 8, ["name"])
+      ])) : k("", !0),
+      o("span", O, l(e.label), 1)
+    ], 8, C));
+  }
+}), I = (e) => (g("data-v-7d29c03a"), e = e(), P(), e), w = ["checked"], B = /* @__PURE__ */ I(() => /* @__PURE__ */ o("label", {
+  class: "check",
+  for: "check"
+}, [
+  /* @__PURE__ */ o("span", null, [
+    /* @__PURE__ */ o("svg", {
+      width: "12px",
+      height: "9px",
+      viewbox: "0 0 12 9"
+    }, [
+      /* @__PURE__ */ o("polyline", { points: "1 5 4 8 11 1" })
+    ])
+  ])
+], -1)), H = { class: "checkbox-label" }, j = /* @__PURE__ */ p({
+  __name: "Checkbox",
+  props: {
+    checked: {
+      type: Boolean,
+      required: !1
+    },
+    label: {
+      type: String,
+      required: !1
+    },
+    backgroundColor: {
+      type: String,
+      required: !1
+    },
+    checkColor: {
+      type: String,
+      required: !1
+    },
+    borderColor: {
+      type: String,
+      required: !1
+    }
   },
-  setup(t) {
-    return (e, a) => (r(), c("button", null, p(t.text), 1));
+  setup(e) {
+    return (n, t) => (c(), i("div", {
+      class: "checkbox",
+      style: d({
+        "--background-color": e.backgroundColor || "#8f44fd",
+        "--border-color": e.borderColor || "#8f44fd",
+        "--check-color": e.checkColor || "#f9f9f9"
+      })
+    }, [
+      o("input", {
+        class: "input",
+        id: "check",
+        checked: e.checked,
+        type: "checkbox",
+        style: { display: "none" }
+      }, null, 8, w),
+      B,
+      o("span", H, l(e.label), 1)
+    ], 4));
+  }
+}), b = (e, n) => {
+  const t = e.__vccOpts || e;
+  for (const [a, r] of n)
+    t[a] = r;
+  return t;
+}, z = /* @__PURE__ */ b(j, [["__scopeId", "data-v-7d29c03a"]]), N = {
+  name: "Teste",
+  props: {
+    textProp: {
+      type: String,
+      default: "Hello Storybook"
+    },
+    booleanProp: {
+      type: Boolean,
+      default: !0
+    },
+    numberProp: {
+      type: Number,
+      default: 42
+    },
+    rangeProp: {
+      type: Number,
+      default: 50
+    },
+    radioProp: {
+      type: String,
+      default: "Option 1"
+    },
+    inlineRadioProp: {
+      type: String,
+      default: "Option 1"
+    },
+    checkProp: {
+      type: Array,
+      default: () => ["Option 1", "Option 3"]
+    },
+    inlineCheckProp: {
+      type: Array,
+      default: () => ["Option 1", "Option 3"]
+    },
+    selectProp: {
+      type: String,
+      default: "Option 2"
+    },
+    multiSelectProp: {
+      type: Array,
+      default: () => ["Option 1", "Option 2"]
+    },
+    objectProp: {
+      type: Object,
+      default: () => ({ key1: "value1", key2: "value2" })
+    },
+    arrayProp: {
+      type: Array,
+      default: () => ["Item 1", "Item 2"]
+    },
+    colorProp: {
+      type: String,
+      default: "#ff00ff"
+    },
+    dateProp: {
+      type: String,
+      default: (/* @__PURE__ */ new Date()).toISOString().substr(0, 10)
+    },
+    fileProp: {
+      type: Object,
+      default: null
+    }
   }
-}), n = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+};
+function q(e, n, t, a, r, u) {
+  return c(), i("div", null, [
+    o("h1", null, l(t.textProp), 1),
+    o("p", null, "Boolean: " + l(t.booleanProp), 1),
+    o("p", null, "Number: " + l(t.numberProp), 1),
+    o("p", null, "Range: " + l(t.rangeProp), 1),
+    o("p", null, "Radio: " + l(t.radioProp), 1),
+    o("p", null, "Inline Radio: " + l(t.inlineRadioProp), 1),
+    o("p", null, "Check: " + l(t.checkProp), 1),
+    o("p", null, "Inline Check: " + l(t.inlineCheckProp), 1),
+    o("p", null, "Select: " + l(t.selectProp), 1),
+    o("p", null, "Multi-Select: " + l(t.multiSelectProp), 1),
+    o("p", null, "Object: " + l(t.objectProp), 1),
+    o("p", null, "Array: " + l(t.arrayProp), 1),
+    o("p", null, [
+      S(" Color: "),
+      o("span", {
+        style: d({ backgroundColor: t.colorProp })
+      }, l(t.colorProp), 5)
+    ]),
+    o("p", null, "Date: " + l(t.dateProp), 1),
+    o("p", null, "File: " + l(t.fileProp ? t.fileProp.name : "No file selected"), 1)
+  ]);
+}
+const T = /* @__PURE__ */ b(N, [["render", q], ["__scopeId", "data-v-65be170a"]]), s = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  HpButton: u
+  HpButton: v,
+  HpCheckbox: z,
+  HpIcon: f,
+  HpTeste: T
 }, Symbol.toStringTag, { value: "Module" }));
-function l(t) {
-  Object.keys(n).forEach((e) => {
-    t.component(e, n[e]);
+function A(e) {
+  Object.keys(s).forEach((n) => {
+    e.component(n, s[n]);
   });
 }
-const s = { install: l };
+const D = { install: A };
 export {
-  u as HpButton,
-  s as default
+  v as HpButton,
+  z as HpCheckbox,
+  f as HpIcon,
+  T as HpTeste,
+  D as default
 };

package/dist/style.css

@@ -0,0 +1 @@
+.icon{width:2em;height:2em;fill:currentColor}.icon-small{width:1em;height:1em}.icon-medium{width:2em;height:2em}.icon-large{width:3em;height:3em}.button{display:flex;align-items:center;padding:12px 24px;border:0;border-radius:8px;min-width:120px;cursor:pointer;outline:none;font-size:17px;color:#fff;font-weight:600}.button:hover{transform:scale(1.0175)}.button:active{transform:scale(.985)}.button:focus{border:1px solid #333131}.button:disabled{cursor:not-allowed;opacity:.5}.button-icon{margin-right:.5rem}.button-label{display:block}.checkbox[data-v-7d29c03a]{display:flex;align-items:center;flex-direction:row}.checkbox .check[data-v-7d29c03a]{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer}.checkbox .check span[data-v-7d29c03a]{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox .check span[data-v-7d29c03a]:first-child{position:relative;width:24px;height:24px;border-radius:50%;transform:scale(1);vertical-align:middle;border:1px solid rgba(255,255,255,.1);transition:all .2s ease}.checkbox .check span:first-child svg[data-v-7d29c03a]{position:absolute;z-index:1;top:8px;left:6px;fill:none;stroke:var(--check-color, #f9f9f9);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox .check span[data-v-7d29c03a]:first-child:before{content:"";width:100%;height:100%;background:var(--background-color, #8f44fd);display:block;transform:scale(0);opacity:1;border-radius:50%;transition-delay:.2s}.checkbox .check:hover span[data-v-7d29c03a]:first-child{border-color:var(--border-color, #8f44fd)}.checkbox .input:checked+.check span[data-v-7d29c03a]:first-child{border-color:var(--border-color, #8f44fd);background:var(--background-color, #8f44fd);animation:check-7d29c03a .6s ease}.checkbox .input:checked+.check span:first-child svg[data-v-7d29c03a]{stroke-dashoffset:0}.checkbox .input:checked+.check span[data-v-7d29c03a]:first-child:before{transform:scale(2.2);opacity:0;transition:all .6s ease}.checkbox .input:checked+.check span[data-v-7d29c03a]:last-child{color:#ffffff1a;transition:all .3s ease}.checkbox .input:checked+.check span[data-v-7d29c03a]:last-child:after{transform:scaleX(1);transition:all .3s ease}@keyframes check-7d29c03a{50%{transform:scale(1.2)}}.checkbox-label[data-v-7d29c03a]{display:inline-block;margin-left:8px;color:var(--check-color, #f9f9f9);font-size:14px}div[data-v-65be170a]{padding:20px}

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

@@ -1,6 +1,6 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
+import type { Meta, StoryFn } from '@storybook/vue3';
 declare const meta: Meta;
 export default meta;
 export declare const Example: StoryFn<{
-    text: string;
+    label: string;
 }>;

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

@@ -1,12 +1,80 @@
 declare const _default: import("vue").DefineComponent<{
-    text: {
+    label: {
         type: StringConstructor;
         required: true;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    text: {
+    ariaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    iconPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
         type: StringConstructor;
         required: true;
     };
-}>>, {}, {}>;
+    ariaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    iconPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    ariaLabel: string;
+    backgroundColor: string;
+    labelColor: string;
+    size: string;
+    disabled: boolean;
+    icon: string;
+    iconPosition: string;
+}, {}>;
 export default _default;

package/dist/types/components/icons/Icon/Icon.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryFn<{
+    name: string;
+    size: string;
+    color: string;
+}>;

package/dist/types/components/icons/Icon/Icon.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    size: string;
+    color: string;
+    name: string;
+    $props: {
+        readonly size?: string | undefined;
+        readonly color?: string | undefined;
+        readonly name?: string | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/types/components/icons/iconList/IconList.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+interface IconListArgs {
+    color: string;
+}
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryFn<IconListArgs>;

package/dist/types/components/icons/iconList/IconList.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    color: string;
+    $props: {
+        readonly color?: string | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/types/components/icons/iconList/components/IconListButton.vue.d.ts

@@ -0,0 +1,58 @@
+declare const _default: import("vue").DefineComponent<{
+    isDarkMode: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    icons: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>) => U, thisArg?: any): Promise<Awaited<U>[]>;
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+    color: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    isDarkMode: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    icons: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>) => U, thisArg?: any): Promise<Awaited<U>[]>;
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+    color: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}, {}>;
+export default _default;

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

@@ -1,2 +1,5 @@
 import HpButton from './button/Button.vue';
-export { HpButton };
+import HpCheckbox from './inputs/checkbox/Checkbox.vue';
+import HpIcon from './icons//Icon/Icon.vue';
+import HpTeste from './teste/Teste.vue';
+export { HpButton, HpCheckbox, HpIcon, HpTeste };

package/dist/types/components/inputs/checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+declare const meta: Meta;
+export default meta;
+export declare const Example: StoryFn<{
+    checked: boolean;
+    label: string;
+    backgroundColor: string;
+    checkColor: string;
+    borderColor: string;
+}>;

package/dist/types/components/inputs/checkbox/Checkbox.vue.d.ts

@@ -0,0 +1,46 @@
+declare const _default: import("vue").DefineComponent<{
+    checked: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    label: {
+        type: StringConstructor;
+        required: false;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        required: false;
+    };
+    checkColor: {
+        type: StringConstructor;
+        required: false;
+    };
+    borderColor: {
+        type: StringConstructor;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    checked: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    label: {
+        type: StringConstructor;
+        required: false;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        required: false;
+    };
+    checkColor: {
+        type: StringConstructor;
+        required: false;
+    };
+    borderColor: {
+        type: StringConstructor;
+        required: false;
+    };
+}>>, {
+    checked: boolean;
+}, {}>;
+export default _default;

package/dist/types/components/teste/Teste.stories.d.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+declare const meta: Meta;
+export default meta;
+export declare const Primary: StoryFn<{
+    textProp: string;
+    booleanProp: boolean;
+    numberProp: number;
+    rangeProp: number;
+    radioProp: string;
+    inlineRadioProp: string;
+    checkProp: string[];
+    inlineCheckProp: string[];
+    selectProp: string;
+    multiSelectProp: string[];
+    objectProp: Record<string, any>;
+    arrayProp: any[];
+    colorProp: string;
+    dateProp: string;
+    fileProp: File | null;
+}>;
+export declare const Secondary: StoryFn<{
+    textProp: string;
+    booleanProp: boolean;
+    numberProp: number;
+    rangeProp: number;
+    radioProp: string;
+    inlineRadioProp: string;
+    checkProp: string[];
+    inlineCheckProp: string[];
+    selectProp: string;
+    multiSelectProp: string[];
+    objectProp: Record<string, any>;
+    arrayProp: any[];
+    colorProp: string;
+    dateProp: string;
+    fileProp: File | null;
+}>;