@gospore/skeleton 1.0.3 → 1.0.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.
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 --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,
|
|
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,KAAK,EACjC,OAAQ,EAAe,EAAM,MAAM,EACnC,aAAc,EAAM,OAAS,MAAQ,EAAe,EAAM,MAAM,CACpE,EAAE,EAEF,SAAS,EAAe,EAA0B,CAC9C,OAAO,OAAO,GAAU,SAAW,EAAQ,KAAO,CACtD,0DAtDM,OAAA,CARE,OAAA,EAAA,EAAA,gBAAK,CAAC,WAAU,mBACyB,EAAA,2BAAyC,EAAA,4BAA0C,EAAA,WAK3H,OAAA,EAAA,EAAA,gBAAO,EAAA,KAAK,EACb,cAAY"}
|
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 --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,
|
|
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,KAAK;GACjC,QAAQ,EAAe,EAAM,MAAM;GACnC,cAAc,EAAM,SAAS,QAAQ,EAAe,EAAM,MAAM;EACpE,EAAE;EAEF,SAAS,EAAe,GAA0B;GAC9C,OAAO,OAAO,KAAU,WAAW,IAAQ,OAAO;EACtD;yBA/DI,EASE,QAAA;GARE,OAAK,EAAA,CAAC,YAAU;uBACyB,EAAA;yBAAyC,EAAA;wBAA0C,EAAA;;GAK3H,OAAK,EAAE,EAAA,KAAK;GACb,eAAY"}
|
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 --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,
|
|
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,KAAK,EACjC,OAAQ,EAAe,EAAM,MAAM,EACnC,aAAc,EAAM,OAAS,MAAQ,EAAe,EAAM,MAAM,CACpE,EAAE,EAEF,SAAS,EAAe,EAA0B,CAC9C,OAAO,OAAO,GAAU,SAAW,EAAQ,KAAO,CACtD,0DAtDM,OAAA,CARE,OAAA,EAAA,EAAA,gBAAK,CAAC,WAAU,mBACyB,EAAA,2BAAyC,EAAA,4BAA0C,EAAA,WAK3H,OAAA,EAAA,EAAA,gBAAO,EAAA,KAAK,EACb,cAAY"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gospore/skeleton",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Gospore",
|
|
6
6
|
"files": [
|
|
@@ -26,12 +26,12 @@
|
|
|
26
26
|
"build": "vite build"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@vitejs/plugin-vue": "^6.0.
|
|
29
|
+
"@vitejs/plugin-vue": "^6.0.7",
|
|
30
30
|
"unplugin-vue-macros": "^2.14.5",
|
|
31
|
-
"vite": "^8.0.
|
|
31
|
+
"vite": "^8.0.13"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"vue": "^3.4.20"
|
|
35
35
|
},
|
|
36
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "30a6762b0abd75befa8073cca1057c183668e109"
|
|
37
37
|
}
|