Merge pull request #5 from MADE-Apps/feature/assets

Added image and background image components

Author: jamesmcroft

.github/workflows/made-vue-image.yml

@@ -0,0 +1,68 @@
+name: made-vue-image
+
+on:
+  push:
+    tags:
+    - v*
+    branches:
+    - main
+    paths:
+    - made-vue-image/**
+    - build/**
+    - .github/workflows/made-vue-image.yml
+  pull_request:
+    branches:
+    - main
+    paths:
+    - made-vue-image/**
+    - build/**
+    - .github/workflows/made-vue-image.yml
+  workflow_dispatch:
+
+defaults:
+  run:
+    working-directory: made-vue-image
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Get source
+        uses: actions/checkout@v2
+
+      - name: Get Build Version
+        run: |
+          Import-Module ..\build\GetBuildVersion.psm1
+          $version = GetBuildVersion -VersionString $Env:GITHUB_REF
+          echo "BUILD_VERSION=$version" | Out-File -FilePath $Env:GITHUB_ENV -Encoding utf-8 -Append
+          Write-Host $version
+        shell: pwsh
+      
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Restore dependencies
+        run: npm install
+
+      - name: Update Version
+        run: npm version $BUILD_VERSION --no-git-tag-version --allow-same-version
+
+      - name: Build
+        run: npm run build
+
+      - name: Copy package.json to dist
+        run: cp "package.json" "./dist/package.json"
+
+      - name: Copy README.md to dist
+        run: cp "README.md" "./dist/README.md"
+
+      - name: Publish
+        if: startsWith(github.ref, 'refs/tags/v')
+        working-directory: made-vue-image/dist
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

assets/Logo.afdesign

@@ -0,0 +1,82 @@
+<img src="https://github.com/MADE-Apps/MADE-Vue/blob/main/assets/ProjectBanner.png" alt="MADE Vue project banner" />
+
+# MADE Vue - Image
+
+[![License - MIT](https://img.shields.io/badge/License-MIT-yellow)](https://github.com/MADE-Apps/MADE-Vue/blob/main/LICENSE)
+[![Build - GitHub Actions](https://github.com/MADE-Apps/MADE-Vue/actions/workflows/made-vue-image.yml/badge.svg)](https://github.com/MADE-Apps/MADE-Vue/actions/workflows/made-vue-image.yml)
+[![Source - npmjs](https://img.shields.io/npm/v/made-vue-image)](https://www.npmjs.com/package/made-vue-image)
+[![npm](https://img.shields.io/npm/dt/made-vue-image)](https://www.npmjs.com/package/made-vue-image)
+
+A Vue 3 image and background image component, allowing an image to be downloaded while showing a loading indicator, showing a placeholder image if the source image fails to load.
+
+## Usage
+
+To customize the image or background image component, you'll want to import the scss styling:
+
+```
+import "made-vue-image/styles.scss";
+```
+
+In your main file, you can import the component:
+
+```
+import { createApp } from "vue";
+import App from "./App.vue";
+
+import Image from "made-vue-image";
+
+const app = createApp(App);
+...
+app.use(Image);
+...
+app.mount("#app");
+```
+
+You can then reference the image and background image components in your app:
+
+```
+<template>
+  <div>
+    <m-image
+      :src="imageSrc"
+      :alt="imageAlt"
+      :placeholderSrc="placeholderSrc"
+      :placeholderAlt="placeholderAlt"
+      class="my-image mb-3"
+    />
+
+    <m-image-bg
+      :src="imageSrc"
+      :placeholderSrc="placeholderSrc"
+      class="my-image"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "Page",
+  data() {
+    return {
+      imageSrc: "https://placekitten.com/300/200",
+      imageAlt: "A cute kitten",
+      placeholderSrc: "https://via.placeholder.com/300x200/fff.png",
+      placeholderAlt: "Image placeholder",
+    };
+  },
+});
+</script>
+
+<style>
+.mb-3 {
+  margin-bottom: 1rem;
+}
+
+.my-image {
+  width: 300px;
+  height: 200px;
+}
+</style>
+```

assets/ProjectIcon.png

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="shortcut icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Image</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>