@unsource/ui 1.0.0

package/README.md

@@ -0,0 +1,84 @@
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: My Module
+- Package name: my-module
+- Description: My new Nuxt module
+-->
+
+# My Module
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+My new Nuxt module for doing amazing things.
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
+<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+<!-- Highlight some of the features your module provide here -->
+- ⛰ &nbsp;Foo
+- 🚠 &nbsp;Bar
+- 🌲 &nbsp;Baz
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add my-module
+```
+
+That's it! You can now use My Module in your Nuxt app ✨
+
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  npm install
+  
+  # Generate type stubs
+  npm run dev:prepare
+  
+  # Develop with the playground
+  npm run dev
+  
+  # Build the playground
+  npm run dev:build
+  
+  # Run ESLint
+  npm run lint
+  
+  # Run Vitest
+  npm run test
+  npm run test:watch
+  
+  # Release new version
+  npm run release
+  ```
+
+</details>
+
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/my-module
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/my-module
+
+[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/my-module
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -0,0 +1,5 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+declare const _default: _nuxt_schema.NuxtModule<Record<string, string>, Record<string, string>, false>;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "unsource-ui",
+  "configKey": "unsourceUi",
+  "version": "1.0.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,41 @@
+import { defineNuxtModule, createResolver, addComponentsDir, installModule } from '@nuxt/kit';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "unsource-ui",
+    configKey: "unsourceUi"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  async setup(_options, _nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      // path of components
+      pathPrefix: false,
+      // Prefix component name by its path.
+      prefix: "",
+      // Prefix all matched components.
+      global: true
+      // Registers components to be globally available.
+    });
+    await installModule("@unocss/nuxt", {
+      configFile: "./runtime/uno.config.{mjs,js,ts}"
+    });
+    await installModule("@nuxt/icon");
+    _nuxt.options.modules.push(
+      "@unocss/nuxt",
+      "@nuxt/icon"
+    );
+    _nuxt.options.icon = {
+      customCollections: [
+        {
+          prefix: "my-icon",
+          dir: "./assets/icons"
+        }
+      ]
+    };
+  }
+});
+
+export { module as default };

package/dist/runtime/components/UnCard.d.vue.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    direction?: 'column' | 'row' | 'row-reverse' | 'column-reverse';
+    customClass?: Record<'main' | 'body' | 'title' | 'tags' | 'tag' | 'description' | 'footer' | 'image' | 'avatar', string>;
+};
+declare var __VLS_22: {}, __VLS_24: {}, __VLS_26: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_22) => any;
+} & {
+    footerStart?: (props: typeof __VLS_24) => any;
+} & {
+    footerEnd?: (props: typeof __VLS_26) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/UnCard.vue

@@ -0,0 +1,89 @@
+<template>
+  <NuxtLink
+    class="flex items-stretch bg-white rounded-2xl overflow-hidden"
+    :class="headerClass[direction]"
+    to="#"
+  >
+    <UnNuxtIcon
+      class="grow-1 basis-1"
+      :class="customClass.image"
+      name="https://picsum.photos/400/200"
+      icon-type="img"
+    />
+    <div
+      :class="customClass.main"
+      class="flex flex-col items-stretch grow-2.5 basis-2.5"
+    >
+      <div
+        :class="customClass.body"
+        class="flex gap-2 items-stretch p-3"
+      >
+        <UnNuxtIcon
+          :class="customClass.avatar"
+          :name="`https://s3.parand.app/files/parand/images/shop-logo.png`"
+          icon-type="img"
+          class="!object-cover shrink-0 w-14 h-14 aspect-square rounded-full border-(2 solid primary-500)"
+        />
+        <div class="flex justify-start flex-col gap-1 grow-1">
+          <h3
+            :class="customClass.title"
+            class="text-(lg gray-600) font-medium"
+          >{{ item.title }}</h3>
+          <small
+            :class="customClass.description"
+            class="text-(base gray-500)"
+          >{{ item.description }}</small>
+          <div
+            :class="customClass.tags"
+            class="flex items-center justify-start gap-2"
+          >
+            <UnChips
+              v-for="(tag, index) in item.tags"
+              :key="index"
+              :class="customClass.tag"
+              :label="tag.value"
+              :icon="tag.icon"
+              :variant="tag.variant || 'secondary'"
+              :mini="true"
+              class="!px-1"
+            />
+          </div>
+        </div>
+        <slot name="header" />
+      </div>
+      <div
+        v-if="$slots.footerStart || $slots.footerEnd"
+        :class="customClass.footer"
+        class="flex justify-between items-stretch border-t-(2 dashed border) p-3"
+      >
+        <slot name="footerStart" />
+        <slot name="footerEnd" />
+      </div>
+    </div>
+  </NuxtLink>
+</template>
+
+<script setup>
+const { direction = "row-reverse", customClass = {} } = defineProps({
+  direction: { type: String, required: false },
+  customClass: { type: Object, required: false }
+});
+const headerClass = {
+  "column": "flex-col",
+  "row": "flex-row",
+  "row-reverse": "flex-row-reverse",
+  "column-reverse": "flex-col-reverse"
+};
+const item = {
+  title: "\u062A\u0633\u062A",
+  description: "\u0644\u0648\u0631\u0645 \u0627\u06CC\u067E\u0633\u0648\u0645 \u0645\u062A\u0646 \u0633\u0627\u062E\u062A\u06AF\u06CC \u0628\u0627 \u062A\u0648\u0644\u06CC\u062F \u0633\u0627\u062F\u06AF\u06CC \u0646\u0627\u0645\u0641\u0647\u0648\u0645 \u0627\u0632 \u0635\u0646\u0639\u062A \u0686\u0627\u067E \u0648 \u0628\u0627 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0627\u0632 \u0637\u0631\u0627\u062D\u0627\u0646 \u06AF\u0631\u0627\u0641\u06CC\u06A9 \u0627\u0633\u062A ",
+  tags: [
+    {
+      value: "\u062A\u0633\u062A"
+    },
+    {
+      value: "\u062A\u0633\u062A"
+    }
+  ]
+};
+</script>

package/dist/runtime/components/UnCard.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    direction?: 'column' | 'row' | 'row-reverse' | 'column-reverse';
+    customClass?: Record<'main' | 'body' | 'title' | 'tags' | 'tag' | 'description' | 'footer' | 'image' | 'avatar', string>;
+};
+declare var __VLS_22: {}, __VLS_24: {}, __VLS_26: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_22) => any;
+} & {
+    footerStart?: (props: typeof __VLS_24) => any;
+} & {
+    footerEnd?: (props: typeof __VLS_26) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/UnChips.d.vue.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    label?: string;
+    icon?: string;
+    prependClass?: string;
+    prepend?: string;
+    variant?: string;
+    mini?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    variant: string;
+    mini: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnChips.vue

@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="flex items-center px-2 py-1 gap-1 rounded-full cursor-pointer shrink-0"
+    :class="classVariant"
+  >
+    <div
+      class="flex items-center justify-center"
+      :class="[prepend ? mini ? 'w-4' : 'w-8' : 'w-0', mini ? 'h-4' : 'h-8']"
+    >
+      <UnNuxtIcon
+        v-if="prepend"
+        :name="prepend"
+        class="text-base"
+        :class="prependClass"
+        @click="$emit('prependClick')"
+      />
+    </div>
+    <p class="text-xs">
+      {{ label }}
+    </p>
+    <UnNuxtIcon
+      v-if="icon"
+      :name="icon"
+      class="text-base"
+      @click="$emit('iconClick')"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  label: { type: String, required: false },
+  icon: { type: String, required: false },
+  prependClass: { type: String, required: false },
+  prepend: { type: String, required: false },
+  variant: { type: String, required: false, default: "danger" },
+  mini: { type: Boolean, required: false, default: false }
+});
+defineEmits(["prependClick", "iconClick"]);
+const variants = {
+  "success": "bg-success/10 text-success",
+  "success-fill": "bg-success text-white",
+  "danger": "bg-danger/10 text-danger",
+  "danger-fill": "bg-danger text-white",
+  "warning": "bg-warning/10 text-warning",
+  "warning-fill": "bg-warning text-white",
+  "primary": "bg-primary-500/10 text-primary-500",
+  "primary-fill": "bg-primary-500 text-white",
+  "primary-border": "bg-primary-500/10 text-primary-500 border-(1 solid primary-500)",
+  "secondary": "bg-gray-600/10 text-gray-600",
+  "secondary-fill": "bg-gray-600 text-white"
+};
+const classVariant = computed(() => variants?.[props.variant]);
+</script>

package/dist/runtime/components/UnChips.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    label?: string;
+    icon?: string;
+    prependClass?: string;
+    prepend?: string;
+    variant?: string;
+    mini?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    variant: string;
+    mini: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnNuxtIcon.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    name?: string | null;
+    iconType?: string;
+    filled?: boolean;
+    alt?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnNuxtIcon.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    v-if="iconType === 'img' || name?.split('.')[1]"
+    class="relative overflow-hidden"
+  >
+    <div
+      v-if="!loaded"
+      class="absolute inset-0 bg-gray-200 animate-pulse z-0"
+    />
+    <img
+      :src="name?.includes('http') ? name : '/images/' + (name || 'noimage.jpg')"
+      :alt="alt || 'NoImg'"
+      loading="lazy"
+      class="block w-full h-full object-cover transition-opacity duration-300 z-10"
+      :class="loaded ? 'opacity-100' : 'opacity-0'"
+      @load="loaded = true"
+    >
+  </div>
+  <Icon
+    v-else-if="name"
+    class="text-2xl overflow-hidden"
+    :name="name"
+  />
+</template>
+
+<script setup>
+const props = defineProps({
+  name: { type: [String, null], required: false },
+  iconType: { type: String, required: false },
+  filled: { type: Boolean, required: false },
+  alt: { type: String, required: false }
+});
+const iconType = props.iconType || "icon";
+const loaded = ref(false);
+</script>

package/dist/runtime/components/UnNuxtIcon.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    name?: string | null;
+    iconType?: string;
+    filled?: boolean;
+    alt?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugin.js

@@ -0,0 +1,4 @@
+import { defineNuxtPlugin } from "#app";
+export default defineNuxtPlugin((_nuxtApp) => {
+  console.log("Plugin injected by my-module!");
+});

package/dist/runtime/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json",
+}

package/dist/runtime/uno.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("unocss").UserConfig<object>;
+export default _default;

package/dist/runtime/uno.config.js

@@ -0,0 +1,60 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetWind4,
+  transformerDirectives,
+  transformerVariantGroup
+} from "unocss";
+import { presetScrollbar } from "unocss-preset-scrollbar";
+export default defineConfig({
+  theme: {
+    colors: {
+      border: "#cccdd5",
+      danger: "#e60c21",
+      warning: "#ffc600",
+      success: "#35d123",
+      secondary: {
+        500: "#fdf037"
+      },
+      primary: "#1270da",
+      text: {
+        head: "#4D4444"
+      },
+      gray: {
+        200: "#949494",
+        500: "#696969",
+        600: "#1e1e1e"
+      }
+    },
+    boxShadow: {
+      navbar: "0 1px 10px 0px #f79520",
+      header: "0 1px 10px 0px #cccdd5"
+    },
+    gridTemplateColumn: {
+      "fill-45": "repeat(auto-fill, minmax(4rem, 1fr))",
+      "fill-60": "repeat(auto-fill, minmax(6rem, 1fr))",
+      "fill-90": "repeat(auto-fill, minmax(22.5rem, 1fr))",
+      "fill-120": "repeat(auto-fill, minmax(30rem, 1fr))"
+    },
+    fontSize: {
+      "2xs": "10px"
+    }
+  },
+  shortcuts: {},
+  transformers: [
+    transformerVariantGroup(),
+    transformerDirectives({
+      // the defaults
+      applyVariable: ["--at-apply", "--uno-apply", "--uno"]
+      // or disable with:
+      // applyVariable: false
+    })
+  ],
+  presets: [
+    presetWind4(),
+    presetAttributify(),
+    presetScrollbar({
+      noCompatible: false
+    })
+  ]
+});

package/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.mjs'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.mjs'

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@unsource/ui",
+  "version": "1.0.0",
+  "private": false,
+  "description": "My new Nuxt module",
+  "repository": "your-org/my-module",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "npm run dev:prepare && nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^4.1.3",
+    "unocss-preset-scrollbar": "^3.2.0"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^2.6.5",
+    "@nuxt/eslint-config": "^1.9.0",
+    "@nuxt/icon": "1.15.0",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.1.3",
+    "@nuxt/test-utils": "^3.19.2",
+    "@types/node": "latest",
+    "@unhead/vue": "^1.11.20",
+    "@unocss/nuxt": "^66.5.3",
+    "changelogen": "^0.6.2",
+    "eslint": "^9.37.0",
+    "nuxt": "^3.19.3",
+    "typescript": "~5.9.3",
+    "unocss": "^66.5.3",
+    "vitest": "^3.2.4",
+    "vue-tsc": "^3.1.0"
+  }
+}