npm - @iankibetsh/vue-streamline - Versions diffs - 0.0.0 - Mend

@iankibetsh/vue-streamline 0.0.0

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.

Files changed (12) hide show

package/.vscode/extensions.json +3 -0
package/README.md +5 -0
package/index.html +12 -0
package/package.json +25 -0
package/public/vite.svg +1 -0
package/src/App.vue +23 -0
package/src/composables/useStreamline.js +51 -0
package/src/index.js +6 -0
package/src/main.js +5 -0
package/src/plugins/streamLine.js +8 -0
package/src/style.css +79 -0
package/vite.config.js +23 -0

package/.vscode/extensions.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/README.md ADDED Viewed

@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

package/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Streamline Framework</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "name": "@iankibetsh/vue-streamline",
+  "version": "0.0.0",
+  "description": "Vue library for streamlining laravel backend services with @iankibet/streamline composer package",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [],
+  "author": "Iankibet",
+  "license": "ISC",
+  "peerDependencies": {
+    "axios": "^1.7.3",
+    "vue": "^3.2.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.2",
+    "vite": "^5.4.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/public/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.vue ADDED Viewed

@@ -0,0 +1,23 @@
+<script setup>
+</script>
+<template>
+  <div>
+    <h1>Streamline Framework</h1>
+  </div>
+</template>
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>

package/src/composables/useStreamline.js ADDED Viewed

@@ -0,0 +1,51 @@
+import Axios from 'axios'
+import { inject } from 'vue'
+const useStreamline = stream => {
+    let formData = {}
+    // inject headers and apiEndpoint
+    const streamlineUrl = inject('streamlineUrl')
+    const streamlineHeaders = inject('streamlineHeaders')
+    const service = new Proxy({}, {
+        get(target, action) {
+            if (target[action]) {
+                return target[action]
+            }
+            return (...args) => {
+                const setDataActions = ['setFormData', 'setData']
+                if (setDataActions.includes(action)) {
+                    formData = args[0]
+                    return service
+                }
+                const config = {
+                    headers: {
+                        ...streamlineHeaders
+                    }
+                }
+                const axios =  Axios.create({
+                    baseURL: streamlineUrl,
+                    headers: {
+                        ...config.headers
+                    }
+                })
+                window.streamlineAxios = axios
+                return axios.post('/', {
+                    action,
+                    stream,
+                    ...formData,
+                    params: {
+                        ...args
+                    }
+                })
+            }
+        }
+    })
+    return {
+        service
+    }
+}
+export default useStreamline

package/src/index.js ADDED Viewed

@@ -0,0 +1,6 @@
+import useStreamline from './composables/useStreamline.js'
+import streamLine from './plugins/streamLine.js'
+export {
+    useStreamline,
+    streamLine
+}

package/src/main.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+createApp(App).mount('#app')

package/src/plugins/streamLine.js ADDED Viewed

@@ -0,0 +1,8 @@
+const streamLine = {
+    install(app, options) {
+        app.provide('streamlineUrl', options.streamlineUrl)
+        app.provide('streamlineHeaders', options.streamlineHeaders)
+    }
+}
+export default streamLine

package/src/style.css ADDED Viewed

@@ -0,0 +1,79 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+.card {
+  padding: 2em;
+}
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/vite.config.js ADDED Viewed

@@ -0,0 +1,23 @@
+// vite.config.js
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    lib: {
+      entry: './src/index.js',
+      name: 'VueStreamline',
+      fileName: (format) => `vue-streamline.${format}.js`,
+    },
+    rollupOptions: {
+      // Make sure to externalize deps that shouldn't be bundled into your library
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+});