ui-thing 0.1.51 → 0.1.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.1.51",
+  "version": "0.1.52",
   "description": "CLI used to add Nuxt 3 components to a project",
   "keywords": [
     "cli",
@@ -59,13 +59,13 @@
     "@types/figlet": "^1.7.0",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.15",
-    "@types/node": "^22.13.0",
+    "@types/node": "^22.13.1",
     "@types/prompts": "^2.4.9",
-    "@vitest/coverage-v8": "^3.0.4",
+    "@vitest/coverage-v8": "^3.0.5",
     "magicast": "^0.3.5",
     "tsup": "^8.3.6",
     "typescript": "^5.7.3",
-    "vitest": "^3.0.4"
+    "vitest": "^3.0.5"
   },
   "publishConfig": {
     "access": "public"

package/src/comps.ts

@@ -1459,6 +1459,21 @@ export default [
     composables: [],
     plugins: [],
   },
+  {
+    name: "Loader",
+    value: "loader",
+    files: [
+      {
+        fileName: "Loader.vue",
+        dirPath: "app/components/Ui",
+        fileContent:
+          '<template>\n  <TransitionFade :duration="500" appear tag="template">\n    <Teleport v-if="fullPage && open" to="#teleports">\n      <div :class="loaderStyles().backdrop({ class: backdropClass, fullPage })">\n        <Icon :class="loaderStyles().icon({ class: props.class })" :name="props.icon" />\n        <slot :open>{{ text }}</slot>\n      </div>\n    </Teleport>\n    <div\n      v-if="!fullPage && open"\n      :class="loaderStyles().backdrop({ class: props.backdropClass, fullPage })"\n    >\n      <Icon :class="loaderStyles().icon({ class: props.class })" :name="props.icon" />\n      <slot :open>{{ text }}</slot>\n    </div>\n  </TransitionFade>\n</template>\n\n<script lang="ts">\n  import { useMagicKeys } from "@vueuse/core";\n  import { useBodyScrollLock } from "radix-vue";\n  import type { PrimitiveProps } from "radix-vue";\n\n  export type LoaderProps = PrimitiveProps & {\n    /**\n     * The icon to display in the loader.\n     *\n     * @default "svg-spinners:bars-rotate-fade"\n     */\n    icon?: string;\n    /**\n     * The class to apply to the loader Icon\n     */\n    class?: any;\n    /**\n     * The class to apply to the backdrop\n     */\n    backdropClass?: any;\n    /**\n     * Whether the loader should take up the full page.\n     *\n     * When this is `true`, the loader will be displayed in a fixed position that covers the entire page. You can press the `esc` key to close the loader.\n     */\n    fullPage?: boolean;\n    /**\n     * Whether to lock the scroll when the loader is open.\n     *\n     * @default true\n     */\n    lockScroll?: boolean;\n    /**\n     * The role of the component.\n     *\n     * @default "progressbar"\n     */\n    role?: string;\n    /**\n     * The text to display in the loader.\n     *\n     * This is displayed below the loader icon.\n     */\n    text?: string;\n    /**\n     * Whether to close the loader when the `esc` key is pressed.\n     *\n     * @default true\n     */\n    closeOnEscape?: boolean;\n  };\n\n  export const loaderStyles = tv({\n    slots: {\n      icon: "size-5",\n      backdrop: "flex flex-col items-center justify-center gap-3",\n    },\n    variants: {\n      fullPage: {\n        true: {\n          backdrop:\n            "pointer-events-auto fixed inset-0 z-[999] size-full bg-background/80 backdrop-blur-md",\n        },\n        false: {\n          backdrop: "relative",\n        },\n      },\n    },\n  });\n</script>\n\n<script lang="ts" setup>\n  defineOptions({ inheritAttrs: false });\n  const props = withDefaults(defineProps<LoaderProps>(), {\n    icon: "svg-spinners:bars-rotate-fade",\n    role: "progressbar",\n    closeOnEscape: true,\n  });\n\n  const open = defineModel<boolean>({ default: true });\n  const isLocked = useBodyScrollLock();\n\n  const { escape } = useMagicKeys();\n\n  watchEffect(() => {\n    if (props.fullPage && open.value && escape?.value && props.closeOnEscape) {\n      open.value = false;\n    }\n    if (props.lockScroll && !open.value) {\n      isLocked.value = false;\n    }\n    if (props.lockScroll && open.value) {\n      isLocked.value = true;\n    }\n  });\n</script>\n',
+      },
+    ],
+    utils: [],
+    composables: [],
+    plugins: [],
+  },
   {
     name: "Menubar",
     value: "menubar",