gvf3n4ygn-test/__generated/registry-schemes/style-system/css/image.json

CLI for SIGMA-UI components.

{
  "name": "image",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "Image.vue",
      "content": "<script setup lang=\"ts\">\nimport { nextTick, ref, watch } from 'vue';\nimport { useForwardProps } from 'reka-ui';\nimport { ImageIcon, LoaderCircleIcon } from 'lucide-vue-next';\nimport { type ImageVariants, imageVariants } from '.';\n\ntype Emits = {\n  load: [];\n  error: [];\n};\n\nconst props = withDefaults(defineProps<{\n  src?: string;\n  alt?: string;\n  glow?: boolean;\n\n  shape?: ImageVariants['shape'];\n}>(), {\n  alt: 'image',\n  shape: 'rounded',\n});\n\nconst emit = defineEmits<Emits>();\n\ndefineSlots<{\n  fallback: () => any;\n}>();\n\nconst forwardedProps = useForwardProps(props);\n\nconst isError = ref(false);\nconst isLoading = ref(true);\n\nwatch(() => props.src, (value) => {\n  if (!value) {\n    nextTick(() => {\n      isError.value = true;\n      isLoading.value = false;\n    });\n  } else {\n    isError.value = false;\n    isLoading.value = true;\n  }\n}, { immediate: true });\n\nfunction onError() {\n  emit('error');\n  isError.value = true;\n}\n\nfunction onLoad() {\n  emit('load');\n  isError.value = false;\n  isLoading.value = false;\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      $attrs.class ?? '',\n      imageVariants({ shape }),\n      {\n        'sigma-ui-image--no-overflow': !glow,\n      },\n    ]\"\n    class=\"sigma-ui-image__container\"\n  >\n    <div\n      v-if=\"isError\"\n      class=\"sigma-ui-image__error animate-fade-in\"\n    >\n      <slot name=\"fallback\">\n        <div\n          class=\"sigma-ui-image__fallback-container\"\n        >\n          <ImageIcon class=\"sigma-ui-image__fallback-icon\" />\n          no photo\n        </div>\n      </slot>\n    </div>\n    <div\n      v-else\n      class=\"sigma-ui-image__loader\"\n    >\n      <div class=\"animate-fade-in\">\n        <LoaderCircleIcon\n          v-if=\"isLoading\"\n          class=\"sigma-ui-image__spinner\"\n        />\n      </div>\n      <img\n        v-show=\"!isLoading\"\n        v-if=\"glow && !isError && props.src\"\n        class=\"sigma-ui-image__img-glow animate-fade-in\"\n        v-bind=\"forwardedProps\"\n        @error=\"onError\"\n        @load=\"onLoad\"\n      >\n\n      <img\n        v-show=\"!isLoading\"\n        v-if=\"!isError && props.src\"\n        class=\"sigma-ui-image__img animate-fade-in\"\n        v-bind=\"forwardedProps\"\n        @error=\"onError\"\n        @load=\"onLoad\"\n      >\n    </div>\n  </div>\n</template>\n\n<style>\n.sigma-ui-image__container {\n  position: relative;\n}\n\n.sigma-ui-image {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: normal;\n  color: hsl(var(--foreground));\n  user-select: none;\n  flex-shrink: 0;\n  background-color: hsl(var(--secondary) / 90%);\n}\n\n.dark .sigma-ui-image {\n  background-color: hsl(var(--secondary) / 30%);\n}\n\n.sigma-ui-image--no-overflow {\n  overflow: hidden;\n}\n\n.sigma-ui-image__error,\n.sigma-ui-image__loader {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.sigma-ui-image__fallback-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  align-items: center;\n  justify-content: center;\n  color: hsl(var(--foreground) / 50%);\n}\n\n.sigma-ui-image__fallback-icon {\n  width: 50%;\n  max-width: 50px;\n  height: 50%;\n  max-height: 50px;\n}\n\n.sigma-ui-image__spinner {\n  animation: spin 1s linear infinite;\n  width: 20px;\n  height: 20px;\n}\n\n.sigma-ui-image__img-glow {\n  width: 110%;\n  height: 110%;\n  object-fit: cover;\n  position: absolute;\n  left: 0;\n  top: 0;\n  filter: blur(16px) brightness(200%) saturate(200%);\n  z-index: 1;\n}\n\n.sigma-ui-image__img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  position: relative;\n  z-index: 2;\n}\n\n@media (prefers-color-scheme: dark) {\n  .sigma-ui-image__img-glow {\n    filter: blur(16px) brightness(100%) saturate(200%);\n  }\n}\n\n.sigma-ui-image-rounded,\n.sigma-ui-image-rounded .sigma-ui-image__img,\n.sigma-ui-image-rounded .sigma-ui-image__img-glow {\n  border-radius: var(--radius);\n}\n\n.sigma-ui-image-circle,\n.sigma-ui-image-circle .sigma-ui-image__img,\n.sigma-ui-image-circle .sigma-ui-image__img-glow {\n  border-radius: 50%;\n}\n</style>\n"
    },
    {
      "name": "index.ts",
      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Image } from './Image.vue';\n\nexport const imageVariants = cva(\n  'sigma-ui-image',\n  {\n    variants: {\n      shape: {\n        rounded: 'sigma-ui-image-rounded',\n        circle: 'sigma-ui-image-circle',\n      },\n    },\n  },\n);\n\nexport type ImageVariants = VariantProps<typeof imageVariants>;\n"
    }
  ],
  "type": "components:ui"
}