@ptlm-azulejo/loader 1.0.0-alpha.5

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.
Files changed (12) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/README.md +50 -0
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.d.ts.map +1 -0
  5. package/dist/index.js +75 -0
  6. package/dist/index.umd.cjs +1 -0
  7. package/dist/src/index.stories.d.ts +12 -0
  8. package/dist/src/index.stories.d.ts.map +1 -0
  9. package/dist/src/index.vue.d.ts +59 -0
  10. package/dist/src/index.vue.d.ts.map +1 -0
  11. package/dist/style.css +1 -0
  12. package/package.json +43 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,4 @@
1
+ # Change Log
2
+
3
+ All notable changes to this project will be documented in this file.
4
+ See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
package/README.md ADDED
@@ -0,0 +1,50 @@
1
+ # Loader
2
+
3
+ A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @ptlm-azulejo/loader @ptlm-azulejo/themes
9
+ # or
10
+ yarn add @ptlm-azulejo/loader @ptlm-azulejo/themes
11
+ ```
12
+
13
+ ## Styles & theming
14
+
15
+ The component reads theme CSS variables, so it needs `@ptlm-azulejo/themes`. Import a
16
+ brand preset (it bundles the base tokens) and the component styles, then set the
17
+ brand class on the root element:
18
+
19
+ ```js
20
+ import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // or /presets/adeo.css
21
+ import '@ptlm-azulejo/loader/style.css'
22
+ ```
23
+
24
+ ```html
25
+ <html class="preset-lm" data-theme="dark">
26
+ ```
27
+
28
+ > Without a preset **and** the `.preset-*` class, the component renders uncolored.
29
+ > See the [themes package](../themes/README.md) for brand switching, dark mode,
30
+ > and custom brands.
31
+
32
+ ## Props
33
+
34
+ | Name | Type | Default | Description |
35
+ | --- | --- | --- | --- |
36
+ | `appearance` | `"standard"` \| `"accent"` \| `"inverse"` | `"standard"` | Specifies the visual appearance of the loader. |
37
+ | `size` | `"xs"` \| `"s"` \| `"m"` \| `"l"` | `"m"` | Defines the size of the loader. |
38
+ | `text` | `string` | — | Text to display alongside the loader when using the loader inside an `Overlay`. |
39
+
40
+ ## Basic Usage
41
+
42
+ ```vue
43
+ <script setup>
44
+ import { AzLoader } from '@ptlm-azulejo/loader'
45
+ </script>
46
+
47
+ <template>
48
+ <AzLoader appearance="accent" text="Loading..." />
49
+ </template>
50
+ ```
package/dist/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default as AzLoader } from './src/index.vue';
2
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iBAAiB,CAAA"}
package/dist/index.js ADDED
@@ -0,0 +1,75 @@
1
+ import { defineComponent as d, computed as s, openBlock as r, createElementBlock as c, normalizeClass as p, createElementVNode as o, toDisplayString as u, createCommentVNode as _ } from "vue";
2
+ const x = { class: "az-loader__spinner" }, z = ["viewBox"], m = ["r"], h = {
3
+ key: 0,
4
+ class: "az-loader__text",
5
+ role: "status"
6
+ }, k = /* @__PURE__ */ d({
7
+ __name: "index",
8
+ props: {
9
+ appearance: { default: "standard" },
10
+ size: { default: "m" },
11
+ text: {}
12
+ },
13
+ setup(t) {
14
+ const a = t, l = s(() => ({
15
+ [`az-loader--${a.size}`]: a.size && a.size !== "m",
16
+ [`az-loader--${a.appearance}`]: a.appearance && a.appearance !== "standard",
17
+ "az-loader--text-visible": a.text
18
+ })), n = s(() => {
19
+ let e;
20
+ switch (a.size) {
21
+ case "xs":
22
+ e = "0 0 20 20";
23
+ break;
24
+ case "s":
25
+ e = "0 0 24 24";
26
+ break;
27
+ case "l":
28
+ e = "0 0 64 64";
29
+ break;
30
+ default:
31
+ e = "0 0 32 32";
32
+ }
33
+ return e;
34
+ }), i = s(() => {
35
+ let e;
36
+ switch (a.size) {
37
+ case "xs":
38
+ e = 6;
39
+ break;
40
+ case "s":
41
+ e = 6;
42
+ break;
43
+ case "l":
44
+ e = 19;
45
+ break;
46
+ default:
47
+ e = 9;
48
+ }
49
+ return e;
50
+ });
51
+ return (e, v) => (r(), c("div", {
52
+ class: p(["az-loader", l.value])
53
+ }, [
54
+ o("span", x, [
55
+ (r(), c("svg", {
56
+ class: "az-loader__icon",
57
+ xmlns: "http://www.w3.org/2000/svg",
58
+ viewBox: n.value,
59
+ "aria-hidden": "true"
60
+ }, [
61
+ o("circle", {
62
+ class: "az-loader__path",
63
+ cx: "50%",
64
+ cy: "50%",
65
+ r: i.value
66
+ }, null, 8, m)
67
+ ], 8, z))
68
+ ]),
69
+ t.text ? (r(), c("p", h, u(t.text), 1)) : _("", !0)
70
+ ], 2));
71
+ }
72
+ });
73
+ export {
74
+ k as AzLoader
75
+ };
package/dist/index.umd.cjs ADDED
@@ -0,0 +1 @@
1
+ (function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.loader={},s.Vue))})(this,function(s,e){"use strict";const c={class:"az-loader__spinner"},n=["viewBox"],r=["r"],l={key:0,class:"az-loader__text",role:"status"},i=e.defineComponent({__name:"index",props:{appearance:{default:"standard"},size:{default:"m"},text:{}},setup(o){const a=o,d=e.computed(()=>({[`az-loader--${a.size}`]:a.size&&a.size!=="m",[`az-loader--${a.appearance}`]:a.appearance&&a.appearance!=="standard","az-loader--text-visible":a.text})),p=e.computed(()=>{let t;switch(a.size){case"xs":t="0 0 20 20";break;case"s":t="0 0 24 24";break;case"l":t="0 0 64 64";break;default:t="0 0 32 32"}return t}),u=e.computed(()=>{let t;switch(a.size){case"xs":t=6;break;case"s":t=6;break;case"l":t=19;break;default:t=9}return t});return(t,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["az-loader",d.value])},[e.createElementVNode("span",c,[(e.openBlock(),e.createElementBlock("svg",{class:"az-loader__icon",xmlns:"http://www.w3.org/2000/svg",viewBox:p.value,"aria-hidden":"true"},[e.createElementVNode("circle",{class:"az-loader__path",cx:"50%",cy:"50%",r:u.value},null,8,r)],8,n))]),o.text?(e.openBlock(),e.createElementBlock("p",l,e.toDisplayString(o.text),1)):e.createCommentVNode("",!0)],2))}});s.AzLoader=i,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
package/dist/src/index.stories.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { Meta, StoryObj } from '@storybook/vue3';
2
+ import { default as Loader } from './index.vue';
3
+
4
+ declare const meta: Meta<typeof Loader>;
5
+ export default meta;
6
+ type Story = StoryObj<typeof meta>;
7
+ export declare const Standard: Story;
8
+ export declare const Accent: Story;
9
+ export declare const Inverse: Story;
10
+ export declare const Sizes: Story;
11
+ export declare const WithText: Story;
12
+ //# sourceMappingURL=index.stories.d.ts.map
package/dist/src/index.stories.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAqC7B,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAyBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}
package/dist/src/index.vue.d.ts ADDED
@@ -0,0 +1,59 @@
1
+ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
2
+ /**
3
+ * Specifies the visual appearance of the loader.
4
+ */
5
+ appearance?: "standard" | "accent" | "inverse";
6
+ /**
7
+ * Defines the size of the loader.
8
+ * @default 'm'
9
+ * @values 'xs', 's', 'm', 'l'
10
+ */
11
+ size?: "xs" | "s" | "m" | "l";
12
+ /**
13
+ * Text to display alongside the loader when using the loader inside an `Overlay`.
14
+ */
15
+ text?: string;
16
+ }>, {
17
+ appearance: string;
18
+ size: string;
19
+ }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
20
+ /**
21
+ * Specifies the visual appearance of the loader.
22
+ */
23
+ appearance?: "standard" | "accent" | "inverse";
24
+ /**
25
+ * Defines the size of the loader.
26
+ * @default 'm'
27
+ * @values 'xs', 's', 'm', 'l'
28
+ */
29
+ size?: "xs" | "s" | "m" | "l";
30
+ /**
31
+ * Text to display alongside the loader when using the loader inside an `Overlay`.
32
+ */
33
+ text?: string;
34
+ }>, {
35
+ appearance: string;
36
+ size: string;
37
+ }>>> & Readonly<{}>, {
38
+ appearance: "standard" | "accent" | "inverse";
39
+ size: "xs" | "s" | "m" | "l";
40
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
41
+ export default _default;
42
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
43
+ type __VLS_TypePropsToRuntimeProps<T> = {
44
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
45
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
46
+ } : {
47
+ type: import('vue').PropType<T[K]>;
48
+ required: true;
49
+ };
50
+ };
51
+ type __VLS_WithDefaults<P, D> = {
52
+ [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
53
+ default: D[K];
54
+ }> : P[K];
55
+ };
56
+ type __VLS_Prettify<T> = {
57
+ [K in keyof T]: T[K];
58
+ } & {};
59
+ //# sourceMappingURL=index.vue.d.ts.map
package/dist/src/index.vue.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../src/index.vue"],"names":[],"mappings":";IAqMI;;OAEG;iBACU,UAAU,GAAG,QAAQ,GAAG,SAAS;IAE9C;;;;OAIG;WACI,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;IAE7B;;OAEG;WACI,MAAM;;;;;IAfb;;OAEG;iBACU,UAAU,GAAG,QAAQ,GAAG,SAAS;IAE9C;;;;OAIG;WACI,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;IAE7B;;OAEG;WACI,MAAM;;;;;gBAZA,UAAU,GAAG,QAAQ,GAAG,SAAS;UAOvC,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;;AAhBjC,wBAuBG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
package/dist/style.css ADDED
@@ -0,0 +1 @@
1
+ /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */:root{--loader-color-standard:var(--color-text-secondary);--loader-color-accent:var(--color-text-accent);--loader-color-inverse:var(--color-text-primary-inverse)}.az-loader{color:var(--loader-color-standard);flex-direction:column;align-items:center;display:inline-flex}.az-loader__spinner{height:calc(var(--spacing,.25rem) * 8);width:calc(var(--spacing,.25rem) * 8)}.az-loader--xs .az-loader__spinner{height:calc(var(--spacing,.25rem) * 5);width:calc(var(--spacing,.25rem) * 5)}.az-loader--s .az-loader__spinner{height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6)}.az-loader--l .az-loader__spinner{height:calc(var(--spacing,.25rem) * 16);width:calc(var(--spacing,.25rem) * 16)}.az-loader__path{stroke-width:4px}.az-loader--xs .az-loader__path{stroke-width:2px}.az-loader--l .az-loader__path{stroke-width:8px}.az-loader__spinner:not(:only-child){margin-bottom:calc(var(--spacing,.25rem) * 4)}.az-loader__icon{transform-origin:50%;animation:2s linear infinite rotate-loader}.az-loader__path{fill:none;stroke:currentColor;stroke-dasharray:1 200;stroke-dashoffset:0;stroke-linecap:round;animation:2s ease-in-out infinite animate-dash-loader}.az-loader__text{font-size:var(--font-size-05);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));color:currentColor}.az-loader--accent{color:var(--loader-color-accent)}.az-loader--inverse{color:var(--loader-color-inverse)}.az-loader:not(.az-loader--text-visible) .az-loader__text{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1 200;stroke-dashoffset:0}50%{stroke-dasharray:89 200;stroke-dashoffset:-35px}to{stroke-dasharray:89 200;stroke-dashoffset:-124px}}
package/package.json ADDED
@@ -0,0 +1,43 @@
1
+ {
2
+ "name": "@ptlm-azulejo/loader",
3
+ "version": "1.0.0-alpha.5",
4
+ "type": "module",
5
+ "main": "./dist/index.umd.cjs",
6
+ "module": "./dist/index.js",
7
+ "types": "./dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "import": "./dist/index.js",
12
+ "require": "./dist/index.umd.cjs"
13
+ },
14
+ "./style.css": "./dist/style.css"
15
+ },
16
+ "scripts": {
17
+ "build": "vite build",
18
+ "test": "vitest --run --passWithNoTests",
19
+ "storybook": "storybook dev -p 6006",
20
+ "build-storybook": "storybook build"
21
+ },
22
+ "publishConfig": {
23
+ "access": "public",
24
+ "registry": "https://registry.npmjs.org"
25
+ },
26
+ "files": [
27
+ "dist/*"
28
+ ],
29
+ "devDependencies": {
30
+ "@ptlm-azulejo/themes": "*",
31
+ "@storybook/addon-essentials": "^7.0.0",
32
+ "@storybook/addon-interactions": "^7.0.0",
33
+ "@storybook/vue3": "^7.0.0",
34
+ "@storybook/vue3-vite": "^7.0.0",
35
+ "@tailwindcss/vite": "^4.0.0",
36
+ "storybook": "^7.0.0",
37
+ "tailwindcss": "^4.0.0",
38
+ "vue": "^3.3.4"
39
+ },
40
+ "peerDependencies": {
41
+ "vue": ">=3.0.0"
42
+ }
43
+ }