@gospore/skeleton 1.0.1 → 1.0.2
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.
package/dist/skeleton.cjs.js
CHANGED
|
@@ -1,2 +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-
|
|
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-02c6dbbd`]]);exports.Skeleton=t;
|
|
2
2
|
//# sourceMappingURL=skeleton.cjs.js.map
|
package/dist/skeleton.cjs.js.map
CHANGED
|
@@ -1 +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
|
|
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 --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-light);\n\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n position: relative;\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::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-image: linear-gradient(\n 90deg,\n transparent 0%,\n transparent 30%,\n var(--skeleton-current-shimmer-highlight-color) 50%,\n transparent 70%,\n transparent 100%\n );\n transform: translateX(-100%);\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer::after {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-dark);\n\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\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 --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-light);\n\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n position: relative;\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::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-image: linear-gradient(\n 90deg,\n transparent 0%,\n transparent 30%,\n var(--skeleton-current-shimmer-highlight-color) 50%,\n transparent 70%,\n transparent 100%\n );\n transform: translateX(-100%);\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer::after {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-dark);\n\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\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
CHANGED
|
@@ -1,2 +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:
|
|
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-highlight-color-light:oklch(100% 0 0/.48);--skeleton-shimmer-highlight-color-dark:oklch(100% 0 0/.12);--skeleton-elevation-light:var(--elevation-raised-light);--skeleton-elevation-dark:var(--elevation-raised-dark);--skeleton-shimmer-duration:1.2s}.skeleton[data-v-02c6dbbd]{--skeleton-current-shimmer-highlight-color:var(--skeleton-shimmer-highlight-color-light);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;position:relative;overflow:hidden}.skeleton-circle[data-v-02c6dbbd]{aspect-ratio:1}.skeleton-elevated[data-v-02c6dbbd]{box-shadow:var(--skeleton-elevation-light)}.skeleton-shimmer[data-v-02c6dbbd]:after{content:"";border-radius:inherit;background-image:linear-gradient(90deg, transparent 0%, transparent 30%, var(--skeleton-current-shimmer-highlight-color) 50%, transparent 70%, transparent 100%);animation:skeleton-shimmer-02c6dbbd var(--skeleton-shimmer-duration) ease-in-out infinite;position:absolute;inset:0;transform:translate(-100%)}@keyframes skeleton-shimmer-02c6dbbd{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media (prefers-reduced-motion:reduce){.skeleton-shimmer[data-v-02c6dbbd]:after{animation:none}}[dark-mode=true] .skeleton[data-v-02c6dbbd]{--skeleton-current-shimmer-highlight-color:var(--skeleton-shimmer-highlight-color-dark);background-color:var(--skeleton-background-color-dark)}[dark-mode=true] .skeleton-elevated[data-v-02c6dbbd]{box-shadow:var(--skeleton-elevation-dark)}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/skeleton.es.js
CHANGED
package/dist/skeleton.es.js.map
CHANGED
|
@@ -1 +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
|
|
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 --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-light);\n\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n position: relative;\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::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-image: linear-gradient(\n 90deg,\n transparent 0%,\n transparent 30%,\n var(--skeleton-current-shimmer-highlight-color) 50%,\n transparent 70%,\n transparent 100%\n );\n transform: translateX(-100%);\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer::after {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-dark);\n\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\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 --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-light);\n\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n position: relative;\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::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-image: linear-gradient(\n 90deg,\n transparent 0%,\n transparent 30%,\n var(--skeleton-current-shimmer-highlight-color) 50%,\n transparent 70%,\n transparent 100%\n );\n transform: translateX(-100%);\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer::after {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-dark);\n\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\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
CHANGED
|
@@ -1,2 +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-
|
|
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-02c6dbbd`]])});
|
|
2
2
|
//# sourceMappingURL=skeleton.umd.js.map
|
package/dist/skeleton.umd.js.map
CHANGED
|
@@ -1 +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
|
|
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 --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-light);\n\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n position: relative;\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::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-image: linear-gradient(\n 90deg,\n transparent 0%,\n transparent 30%,\n var(--skeleton-current-shimmer-highlight-color) 50%,\n transparent 70%,\n transparent 100%\n );\n transform: translateX(-100%);\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer::after {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-dark);\n\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\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 --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-light);\n\n display: inline-block;\n flex: 0 0 auto;\n min-width: 0;\n max-width: 100%;\n position: relative;\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::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-image: linear-gradient(\n 90deg,\n transparent 0%,\n transparent 30%,\n var(--skeleton-current-shimmer-highlight-color) 50%,\n transparent 70%,\n transparent 100%\n );\n transform: translateX(-100%);\n animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;\n}\n\n@keyframes skeleton-shimmer {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .skeleton-shimmer::after {\n animation: none;\n }\n}\n\n[dark-mode=\"true\"] {\n .skeleton {\n --skeleton-current-shimmer-highlight-color: var(--skeleton-shimmer-highlight-color-dark);\n\n background-color: var(--skeleton-background-color-dark);\n }\n .skeleton-elevated {\n box-shadow: var(--skeleton-elevation-dark);\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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gospore/skeleton",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Gospore",
|
|
6
6
|
"files": [
|
|
@@ -33,5 +33,5 @@
|
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"vue": "^3.4.20"
|
|
35
35
|
},
|
|
36
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "82f0d0e48a98895ade179a9666c6e015a33a95b9"
|
|
37
37
|
}
|