@gospore/skeleton 1.0.1

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/LICENSE +0 -0
  2. package/README.md +7 -0
  3. package/dist/Skeleton.vue.d.ts +74 -0
  4. package/dist/index.d.ts +1 -0
  5. package/dist/skeleton.cjs.js +2 -0
  6. package/dist/skeleton.cjs.js.map +1 -0
  7. package/dist/skeleton.css +2 -0
  8. package/dist/skeleton.es.js +60 -0
  9. package/dist/skeleton.es.js.map +1 -0
  10. package/dist/skeleton.umd.js +2 -0
  11. package/dist/skeleton.umd.js.map +1 -0
  12. package/package.json +37 -0
package/LICENSE ADDED
File without changes
package/README.md ADDED
@@ -0,0 +1,7 @@
1
+ # @gospore/skeleton
2
+
3
+ Skeleton renders decorative loading geometry that stands in for content while asynchronous data is loading. Use it directly for custom loading layouts, or use package-owned skeleton compositions such as `AvatarItemSkeleton` and `CommentSkeleton` when an existing component has a matching loading shape.
4
+
5
+ ## Accessibility
6
+
7
+ Skeleton shapes are decorative and render `aria-hidden="true"`. Put `aria-busy`, `role="status"`, or visible loading copy on the surrounding region when the loading state needs to be announced.
package/dist/Skeleton.vue.d.ts ADDED
@@ -0,0 +1,74 @@
1
+ import type { PropType } from "vue";
2
+ type SkeletonDimension = string | number;
3
+ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
4
+ /** Sets the rendered width. Numbers are converted to px. */
5
+ width: {
6
+ type: PropType<SkeletonDimension>;
7
+ default: string;
8
+ };
9
+ /** Sets the rendered height. Numbers are converted to px. */
10
+ height: {
11
+ type: PropType<SkeletonDimension>;
12
+ default: string;
13
+ };
14
+ /** Sets the corner radius unless circle is true. */
15
+ radius: {
16
+ type: PropType<SkeletonDimension>;
17
+ default: string;
18
+ };
19
+ /** Renders a circular skeleton. */
20
+ circle: {
21
+ type: BooleanConstructor;
22
+ default: boolean;
23
+ };
24
+ /** Adds a raised shadow using elevation tokens. */
25
+ elevated: {
26
+ type: BooleanConstructor;
27
+ default: boolean;
28
+ };
29
+ /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */
30
+ shimmer: {
31
+ type: BooleanConstructor;
32
+ default: boolean;
33
+ };
34
+ }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
35
+ /** Sets the rendered width. Numbers are converted to px. */
36
+ width: {
37
+ type: PropType<SkeletonDimension>;
38
+ default: string;
39
+ };
40
+ /** Sets the rendered height. Numbers are converted to px. */
41
+ height: {
42
+ type: PropType<SkeletonDimension>;
43
+ default: string;
44
+ };
45
+ /** Sets the corner radius unless circle is true. */
46
+ radius: {
47
+ type: PropType<SkeletonDimension>;
48
+ default: string;
49
+ };
50
+ /** Renders a circular skeleton. */
51
+ circle: {
52
+ type: BooleanConstructor;
53
+ default: boolean;
54
+ };
55
+ /** Adds a raised shadow using elevation tokens. */
56
+ elevated: {
57
+ type: BooleanConstructor;
58
+ default: boolean;
59
+ };
60
+ /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */
61
+ shimmer: {
62
+ type: BooleanConstructor;
63
+ default: boolean;
64
+ };
65
+ }>> & Readonly<{}>, {
66
+ width: SkeletonDimension;
67
+ height: SkeletonDimension;
68
+ circle: boolean;
69
+ radius: SkeletonDimension;
70
+ elevated: boolean;
71
+ shimmer: boolean;
72
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
73
+ declare const _default: typeof __VLS_export;
74
+ export default _default;
package/dist/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as Skeleton } from "./Skeleton.vue";
package/dist/skeleton.cjs.js ADDED
@@ -0,0 +1,2 @@
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`vue`);var t=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,e.defineComponent)({name:`Skeleton`,__name:`Skeleton`,props:{width:{type:[String,Number],default:`100%`},height:{type:[String,Number],default:`1em`},radius:{type:[String,Number],default:`var(--skeleton-border-radius)`},circle:{type:Boolean,default:!1},elevated:{type:Boolean,default:!1},shimmer:{type:Boolean,default:!1}},setup(t){let n=t,r=(0,e.computed)(()=>({width:i(n.width),height:i(n.height),borderRadius:n.circle?`50%`:i(n.radius)}));function i(e){return typeof e==`number`?e+`px`:e}return(n,i)=>((0,e.openBlock)(),(0,e.createElementBlock)(`span`,{class:(0,e.normalizeClass)([`skeleton`,{"skeleton-circle":t.circle,"skeleton-elevated":t.elevated,"skeleton-shimmer":t.shimmer}]),style:(0,e.normalizeStyle)(r.value),"aria-hidden":`true`},null,6))}}),[[`__scopeId`,`data-v-af246a31`]]);exports.Skeleton=t;
2
+ //# sourceMappingURL=skeleton.cjs.js.map
package/dist/skeleton.cjs.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"skeleton.cjs.js","names":[],"sources":["../src/Skeleton.vue","../src/Skeleton.vue"],"sourcesContent":["<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n return typeof value === \"number\" ? value + \"px\" : value;\n}\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style scoped lang=\"less\">\n.skeleton {\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n vertical-align: middle;\n background-color: var(--skeleton-background-color-light);\n background-clip: padding-box;\n box-sizing: border-box;\n overflow: hidden;\n}\n.skeleton-circle {\n aspect-ratio: 1;\n}\n.skeleton-elevated {\n box-shadow: var(--skeleton-elevation-light);\n}\n.skeleton-shimmer {\n background-image: linear-gradient(\n 90deg,\n var(--skeleton-background-color-light) 0%,\n var(--skeleton-shimmer-color-light) 50%,\n var(--skeleton-background-color-light) 100%\n );\n background-size: 200% 100%;\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n background-position: 100% 0;\n }\n to {\n background-position: -100% 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\n }\n .skeleton-shimmer {\n background-image: linear-gradient(\n 90deg,\n var(--skeleton-background-color-dark) 0%,\n var(--skeleton-shimmer-color-dark) 50%,\n var(--skeleton-background-color-dark) 100%\n );\n }\n}\n</style>\n","<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n return typeof value === \"number\" ? value + \"px\" : value;\n}\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style scoped lang=\"less\">\n.skeleton {\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n vertical-align: middle;\n background-color: var(--skeleton-background-color-light);\n background-clip: padding-box;\n box-sizing: border-box;\n overflow: hidden;\n}\n.skeleton-circle {\n aspect-ratio: 1;\n}\n.skeleton-elevated {\n box-shadow: var(--skeleton-elevation-light);\n}\n.skeleton-shimmer {\n background-image: linear-gradient(\n 90deg,\n var(--skeleton-background-color-light) 0%,\n var(--skeleton-shimmer-color-light) 50%,\n var(--skeleton-background-color-light) 100%\n );\n background-size: 200% 100%;\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n background-position: 100% 0;\n }\n to {\n background-position: -100% 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\n }\n .skeleton-shimmer {\n background-image: linear-gradient(\n 90deg,\n var(--skeleton-background-color-dark) 0%,\n var(--skeleton-shimmer-color-dark) 50%,\n var(--skeleton-background-color-dark) 100%\n );\n }\n}\n</style>\n"],"mappings":"6eAuBA,IAAM,EAAQ,EAiCR,GAAA,EAAA,EAAA,eAAuC,CACzC,MAAO,EAAe,EAAM,MAAM,CAClC,OAAQ,EAAe,EAAM,OAAO,CACpC,aAAc,EAAM,OAAS,MAAQ,EAAe,EAAM,OAAO,CACpE,EAAE,CAEH,SAAS,EAAe,EAA0B,CAC9C,OAAO,OAAO,GAAU,SAAW,EAAQ,KAAO,2DArDhD,OAAA,CARE,OAAA,EAAA,EAAA,gBAAK,CAAC,WAAU,mBACyB,EAAA,2BAAyC,EAAA,4BAA0C,EAAA,WAK3H,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAK,CACb,cAAY"}
package/dist/skeleton.css ADDED
@@ -0,0 +1,2 @@
1
+ .theme{--skeleton-border-radius:var(--border-radius-regular);--skeleton-background-color-light:var(--color-skeleton-100-light);--skeleton-background-color-dark:var(--color-skeleton-100-dark);--skeleton-shimmer-color-light:var(--color-skeleton-200-light);--skeleton-shimmer-color-dark:var(--color-skeleton-200-dark);--skeleton-elevation-light:var(--elevation-raised-light);--skeleton-elevation-dark:var(--elevation-raised-dark);--skeleton-shimmer-duration:1.2s}.skeleton[data-v-af246a31]{vertical-align:middle;background-color:var(--skeleton-background-color-light);box-sizing:border-box;background-clip:padding-box;flex:none;min-width:0;max-width:100%;display:inline-block;overflow:hidden}.skeleton-circle[data-v-af246a31]{aspect-ratio:1}.skeleton-elevated[data-v-af246a31]{box-shadow:var(--skeleton-elevation-light)}.skeleton-shimmer[data-v-af246a31]{background-image:linear-gradient(90deg, var(--skeleton-background-color-light) 0%, var(--skeleton-shimmer-color-light) 50%, var(--skeleton-background-color-light) 100%);animation:skeleton-shimmer-af246a31 var(--skeleton-shimmer-duration) ease-in-out infinite;background-size:200% 100%}@keyframes skeleton-shimmer-af246a31{0%{background-position:100% 0}to{background-position:-100% 0}}@media (prefers-reduced-motion:reduce){.skeleton-shimmer[data-v-af246a31]{animation:none}}[dark-mode=true] .skeleton[data-v-af246a31]{background-color:var(--skeleton-background-color-dark)}[dark-mode=true] .skeleton-elevated[data-v-af246a31]{box-shadow:var(--skeleton-elevation-dark)}[dark-mode=true] .skeleton-shimmer[data-v-af246a31]{background-image:linear-gradient(90deg, var(--skeleton-background-color-dark) 0%, var(--skeleton-shimmer-color-dark) 50%, var(--skeleton-background-color-dark) 100%)}
2
+ /*$vite$:1*/
package/dist/skeleton.es.js ADDED
@@ -0,0 +1,60 @@
1
+ import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a } from "vue";
2
+ //#endregion
3
+ //#region src/Skeleton.vue
4
+ var o = /* @__PURE__ */ ((e, t) => {
5
+ let n = e.__vccOpts || e;
6
+ for (let [e, r] of t) n[e] = r;
7
+ return n;
8
+ })(/* @__PURE__ */ n({
9
+ name: "Skeleton",
10
+ __name: "Skeleton",
11
+ props: {
12
+ width: {
13
+ type: [String, Number],
14
+ default: "100%"
15
+ },
16
+ height: {
17
+ type: [String, Number],
18
+ default: "1em"
19
+ },
20
+ radius: {
21
+ type: [String, Number],
22
+ default: "var(--skeleton-border-radius)"
23
+ },
24
+ circle: {
25
+ type: Boolean,
26
+ default: !1
27
+ },
28
+ elevated: {
29
+ type: Boolean,
30
+ default: !1
31
+ },
32
+ shimmer: {
33
+ type: Boolean,
34
+ default: !1
35
+ }
36
+ },
37
+ setup(n) {
38
+ let o = n, s = e(() => ({
39
+ width: c(o.width),
40
+ height: c(o.height),
41
+ borderRadius: o.circle ? "50%" : c(o.radius)
42
+ }));
43
+ function c(e) {
44
+ return typeof e == "number" ? e + "px" : e;
45
+ }
46
+ return (e, o) => (a(), t("span", {
47
+ class: r(["skeleton", {
48
+ "skeleton-circle": n.circle,
49
+ "skeleton-elevated": n.elevated,
50
+ "skeleton-shimmer": n.shimmer
51
+ }]),
52
+ style: i(s.value),
53
+ "aria-hidden": "true"
54
+ }, null, 6));
55
+ }
56
+ }), [["__scopeId", "data-v-af246a31"]]);
57
+ //#endregion
58
+ export { o as Skeleton };
59
+
60
+ //# sourceMappingURL=skeleton.es.js.map
package/dist/skeleton.es.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"skeleton.es.js","names":[],"sources":["../src/Skeleton.vue","../src/Skeleton.vue"],"sourcesContent":["<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n return typeof value === \"number\" ? value + \"px\" : value;\n}\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style scoped lang=\"less\">\n.skeleton {\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n vertical-align: middle;\n background-color: var(--skeleton-background-color-light);\n background-clip: padding-box;\n box-sizing: border-box;\n overflow: hidden;\n}\n.skeleton-circle {\n aspect-ratio: 1;\n}\n.skeleton-elevated {\n box-shadow: var(--skeleton-elevation-light);\n}\n.skeleton-shimmer {\n background-image: linear-gradient(\n 90deg,\n var(--skeleton-background-color-light) 0%,\n var(--skeleton-shimmer-color-light) 50%,\n var(--skeleton-background-color-light) 100%\n );\n background-size: 200% 100%;\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n background-position: 100% 0;\n }\n to {\n background-position: -100% 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\n }\n .skeleton-shimmer {\n background-image: linear-gradient(\n 90deg,\n var(--skeleton-background-color-dark) 0%,\n var(--skeleton-shimmer-color-dark) 50%,\n var(--skeleton-background-color-dark) 100%\n );\n }\n}\n</style>\n","<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n return typeof value === \"number\" ? value + \"px\" : value;\n}\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style scoped lang=\"less\">\n.skeleton {\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n vertical-align: middle;\n background-color: var(--skeleton-background-color-light);\n background-clip: padding-box;\n box-sizing: border-box;\n overflow: hidden;\n}\n.skeleton-circle {\n aspect-ratio: 1;\n}\n.skeleton-elevated {\n box-shadow: var(--skeleton-elevation-light);\n}\n.skeleton-shimmer {\n background-image: linear-gradient(\n 90deg,\n var(--skeleton-background-color-light) 0%,\n var(--skeleton-shimmer-color-light) 50%,\n var(--skeleton-background-color-light) 100%\n );\n background-size: 200% 100%;\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n background-position: 100% 0;\n }\n to {\n background-position: -100% 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\n }\n .skeleton-shimmer {\n background-image: linear-gradient(\n 90deg,\n var(--skeleton-background-color-dark) 0%,\n var(--skeleton-shimmer-color-dark) 50%,\n var(--skeleton-background-color-dark) 100%\n );\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,IAAM,IAAQ,GAiCR,IAAQ,SAA+B;GACzC,OAAO,EAAe,EAAM,MAAM;GAClC,QAAQ,EAAe,EAAM,OAAO;GACpC,cAAc,EAAM,SAAS,QAAQ,EAAe,EAAM,OAAO;GACpE,EAAE;EAEH,SAAS,EAAe,GAA0B;GAC9C,OAAO,OAAO,KAAU,WAAW,IAAQ,OAAO;;yBA9DlD,EASE,QAAA;GARE,OAAK,EAAA,CAAC,YAAU;uBACyB,EAAA;yBAAyC,EAAA;wBAA0C,EAAA;;GAK3H,OAAK,EAAE,EAAA,MAAK;GACb,eAAY"}
package/dist/skeleton.umd.js ADDED
@@ -0,0 +1,2 @@
1
+ (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.skeleton={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`}),e.Skeleton=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({name:`Skeleton`,__name:`Skeleton`,props:{width:{type:[String,Number],default:`100%`},height:{type:[String,Number],default:`1em`},radius:{type:[String,Number],default:`var(--skeleton-border-radius)`},circle:{type:Boolean,default:!1},elevated:{type:Boolean,default:!1},shimmer:{type:Boolean,default:!1}},setup(e){let n=e,r=(0,t.computed)(()=>({width:i(n.width),height:i(n.height),borderRadius:n.circle?`50%`:i(n.radius)}));function i(e){return typeof e==`number`?e+`px`:e}return(n,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{class:(0,t.normalizeClass)([`skeleton`,{"skeleton-circle":e.circle,"skeleton-elevated":e.elevated,"skeleton-shimmer":e.shimmer}]),style:(0,t.normalizeStyle)(r.value),"aria-hidden":`true`},null,6))}}),[[`__scopeId`,`data-v-af246a31`]])});
2
+ //# sourceMappingURL=skeleton.umd.js.map
package/dist/skeleton.umd.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"skeleton.umd.js","names":[],"sources":["../src/Skeleton.vue","../src/Skeleton.vue"],"sourcesContent":["<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n return typeof value === \"number\" ? value + \"px\" : value;\n}\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style scoped lang=\"less\">\n.skeleton {\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n vertical-align: middle;\n background-color: var(--skeleton-background-color-light);\n background-clip: padding-box;\n box-sizing: border-box;\n overflow: hidden;\n}\n.skeleton-circle {\n aspect-ratio: 1;\n}\n.skeleton-elevated {\n box-shadow: var(--skeleton-elevation-light);\n}\n.skeleton-shimmer {\n background-image: linear-gradient(\n 90deg,\n var(--skeleton-background-color-light) 0%,\n var(--skeleton-shimmer-color-light) 50%,\n var(--skeleton-background-color-light) 100%\n );\n background-size: 200% 100%;\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n background-position: 100% 0;\n }\n to {\n background-position: -100% 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\n }\n .skeleton-shimmer {\n background-image: linear-gradient(\n 90deg,\n var(--skeleton-background-color-dark) 0%,\n var(--skeleton-shimmer-color-dark) 50%,\n var(--skeleton-background-color-dark) 100%\n );\n }\n}\n</style>\n","<template>\n <span\n class=\"skeleton\"\n :class=\"{\n 'skeleton-circle': circle,\n 'skeleton-elevated': elevated,\n 'skeleton-shimmer': shimmer,\n }\"\n :style=\"style\"\n aria-hidden=\"true\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport type { CSSProperties, PropType } from \"vue\";\n\ntype SkeletonDimension = string | number;\n\ndefineOptions({\n name: \"Skeleton\",\n});\n\nconst props = defineProps({\n /** Sets the rendered width. Numbers are converted to px. */\n width: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"100%\",\n },\n /** Sets the rendered height. Numbers are converted to px. */\n height: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"1em\",\n },\n /** Sets the corner radius unless circle is true. */\n radius: {\n type: [String, Number] as PropType<SkeletonDimension>,\n default: \"var(--skeleton-border-radius)\",\n },\n /** Renders a circular skeleton. */\n circle: {\n type: Boolean,\n default: false,\n },\n /** Adds a raised shadow using elevation tokens. */\n elevated: {\n type: Boolean,\n default: false,\n },\n /** Adds an optional shimmer animation. Disabled under prefers-reduced-motion. */\n shimmer: {\n type: Boolean,\n default: false,\n },\n});\n\nconst style = computed<CSSProperties>(() => ({\n width: toCssDimension(props.width),\n height: toCssDimension(props.height),\n borderRadius: props.circle ? \"50%\" : toCssDimension(props.radius),\n}));\n\nfunction toCssDimension(value: SkeletonDimension) {\n return typeof value === \"number\" ? value + \"px\" : value;\n}\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style scoped lang=\"less\">\n.skeleton {\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n vertical-align: middle;\n background-color: var(--skeleton-background-color-light);\n background-clip: padding-box;\n box-sizing: border-box;\n overflow: hidden;\n}\n.skeleton-circle {\n aspect-ratio: 1;\n}\n.skeleton-elevated {\n box-shadow: var(--skeleton-elevation-light);\n}\n.skeleton-shimmer {\n background-image: linear-gradient(\n 90deg,\n var(--skeleton-background-color-light) 0%,\n var(--skeleton-shimmer-color-light) 50%,\n var(--skeleton-background-color-light) 100%\n );\n background-size: 200% 100%;\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n background-position: 100% 0;\n }\n to {\n background-position: -100% 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\n }\n .skeleton-shimmer {\n background-image: linear-gradient(\n 90deg,\n var(--skeleton-background-color-dark) 0%,\n var(--skeleton-shimmer-color-dark) 50%,\n var(--skeleton-background-color-dark) 100%\n );\n }\n}\n</style>\n"],"mappings":"usBAuBA,IAAM,EAAQ,EAiCR,GAAA,EAAA,EAAA,eAAuC,CACzC,MAAO,EAAe,EAAM,MAAM,CAClC,OAAQ,EAAe,EAAM,OAAO,CACpC,aAAc,EAAM,OAAS,MAAQ,EAAe,EAAM,OAAO,CACpE,EAAE,CAEH,SAAS,EAAe,EAA0B,CAC9C,OAAO,OAAO,GAAU,SAAW,EAAQ,KAAO,2DArDhD,OAAA,CARE,OAAA,EAAA,EAAA,gBAAK,CAAC,WAAU,mBACyB,EAAA,2BAAyC,EAAA,4BAA0C,EAAA,WAK3H,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAK,CACb,cAAY"}
package/package.json ADDED
@@ -0,0 +1,37 @@
1
+ {
2
+ "name": "@gospore/skeleton",
3
+ "version": "1.0.1",
4
+ "description": "",
5
+ "author": "Gospore",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "type": "module",
10
+ "main": "./dist/skeleton.cjs.js",
11
+ "module": "./dist/skeleton.es.js",
12
+ "types": "./dist/index.d.ts",
13
+ "exports": {
14
+ ".": {
15
+ "import": "./dist/skeleton.es.js",
16
+ "require": "./dist/skeleton.cjs.js",
17
+ "types": "./dist/index.d.ts"
18
+ },
19
+ "./skeleton.css": "./dist/skeleton.css",
20
+ "./umd": {
21
+ "import": "./dist/skeleton.umd.js",
22
+ "require": "./dist/skeleton.umd.js"
23
+ }
24
+ },
25
+ "scripts": {
26
+ "build": "vite build"
27
+ },
28
+ "devDependencies": {
29
+ "@vitejs/plugin-vue": "^6.0.6",
30
+ "unplugin-vue-macros": "^2.14.5",
31
+ "vite": "^8.0.12"
32
+ },
33
+ "peerDependencies": {
34
+ "vue": "^3.4.20"
35
+ },
36
+ "gitHead": "964fb8688e7b2790778d07ecf3944381fcd11bfe"
37
+ }