0.8.51 • Published 11 months ago

sprintify-ui v0.8.51

Weekly downloads
-
License
-
Repository
-
Last release
11 months ago

About Sprintify UI

Sprintify UI is a Vue 3 components library for Vite projects using a Laravel backend.

Storybook Documentation https://sprintify-ui.witify.io

Getting started

Install

npm i sprintify-ui --save

Peer dependencies:

sprintify-ui is highly opinionated and requires multiple dependencies :

@vueuse/core axios lodash luxon pinia qs tailwindcss vue vue-router

To install them all :

npm i @vueuse/core axios lodash luxon pinia qs tailwindcss vue vue-router --save

Basic Configuration

import { createApp } from 'vue';
import axios from "axios";
import { createPinia } from "pinia";
import { createRouter, createWebHistory } from "vue-router";
import SprintifyUI from "sprintify-ui";
import { messages as SprintifyUIMessages } from "sprintify-ui";
import App from './App.vue';

// Import your TailwindCSS *before* importing Sprintify UI CSS
import "./assets/tailwind.css";

// Import Sprintify UI CSS
import "sprintify-ui/dist/style.css";

/** Axios */

const http = axios.create({
  useCredentials: true,
});

/** Vue Router */

const router = createRouter({
  routes: [],
  history: createWebHistory("admin"),
});

const app = createApp(App);

/** Vue Plugins */

app.use(router);
app.use(createPinia());

// Import Sprintify UI plugin
app.use(SprintifyUI, {
  http, // Default axios instance for <BaseAutocompleteFetch>, <BaseDataIterator>, etc...
  upload_url: "/api/files/upload", // Default upload URL for <BaseFileUploader>
});

app.mount("#app");

TailwindCSS

Make sure you have all the required tailwindCSS plugins installed:

npm i tailwindcss @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio -D

Update tailwind.config.js

Update your content list :

{
  content: [
    //...,
    "./node_modules/sprintify-ui/src/**/*.ts",
    "./node_modules/sprintify-ui/src/**/*.js",
    "./node_modules/sprintify-ui/src/**/*.vue",
  ],
}

Update your plugin list :

plugins: [
  //...,
  require("sprintify-ui/tailwindcss"),
  require("@tailwindcss/forms"),
  require("@tailwindcss/typography"),
  require("@tailwindcss/aspect-ratio"),
],

Configure using unplugin-vue-components

Add a custom resolver

Components({
  resolvers: [
    (componentName) => {
      if (componentName.startsWith("Base"))
        return { name: componentName, from: "sprintify-ui" };
    },
  ],
}),

Notifications and Dialogs

To use notifications and dialogs, your main layout must contain the <BaseAppSnackbars> and <BaseAppDialogs> components. These components will observe the Pinia store and render dialogs and notifications.

<template>
  <RouterView></RouterView>
  <BaseAppSnackbars />
  <BaseAppDialogs />
</template>

<script lang="ts" setup>
</script>

Custom snackbars and dialogs

You may 100% customize the look and feel of dialogs and snackbars by removing <BaseApp> and instead creating your own render logic. Here's a simple example to render snackbars:

<template>
  <Teleport to="body">
    <div class="pointer-events-none fixed inset-0 flex items-end justify-end p-6 md:p-8">
      <div class="w-full max-w-sm">
        <div v-for="snackbar in snackbars" :key="snackbar.id">
          <h2>{{ snackbar.title }}</h2>
          <p>{{ snackbar.text }}</p>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script lang="ts" setup>
import { useSnackbarsStore } from 'sprintify-ui';

const snackbarsStore = useSnackbarsStore();

const snackbars = computed(() => {
  return snackbarsStore.snackbars;
});
</script>

Configure countries and regions globally

In order to make BaseAddressForm work correctly, you must import countries and regions to Sprintify UI.

Each country must adhere to the following interface:

  • code: string
  • name: string

Each region must adhere to the following interface:

  • code: string
  • name: string
  • country_id: string
app.use(SprintifyUI, {
  http,
  // Import while initializing Sprintify UI
  countries: window.yourCountryList,
  regions: window.yourRegionList,
});

Using BaseAddressForm with Google Maps Autocomplete

Add this snippet to your HTML <head>. Replace YOUR_API_KEY with you API key.

<script defer async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Using components

All components are globally available, you can use them without importation:

<template>
  <BaseAlert title="Test" color="danger"></BaseAlert>
</template>

<script lang="ts" setup>
</script>  

Make changes

Git add .

git add .

Commit

For your commit you must run the following code:

npm run commit

Release

To release (only from main after review)

npm run release

Push to git

git push --follow-tags origin main

Publish to npm

npm publish
0.8.51

11 months ago

0.8.50

11 months ago

0.8.49

11 months ago

0.8.45

1 year ago

0.8.44

1 year ago

0.8.47

1 year ago

0.8.46

1 year ago

0.8.41

1 year ago

0.8.40

1 year ago

0.8.43

1 year ago

0.8.42

1 year ago

0.8.48

1 year ago

0.8.38

1 year ago

0.8.39

1 year ago

0.8.9

1 year ago

0.8.8

1 year ago

0.8.5

1 year ago

0.8.4

1 year ago

0.8.7

1 year ago

0.8.6

1 year ago

0.8.1

1 year ago

0.8.0

1 year ago

0.8.3

1 year ago

0.8.2

1 year ago

0.7.11

1 year ago

0.7.12

1 year ago

0.8.34

1 year ago

0.8.33

1 year ago

0.8.35

1 year ago

0.8.30

1 year ago

0.8.32

1 year ago

0.8.31

1 year ago

0.8.37

1 year ago

0.8.23

1 year ago

0.8.22

1 year ago

0.8.25

1 year ago

0.8.24

1 year ago

0.8.21

1 year ago

0.8.20

1 year ago

0.8.27

1 year ago

0.8.26

1 year ago

0.8.29

1 year ago

0.8.28

1 year ago

0.8.12

1 year ago

0.8.11

1 year ago

0.8.14

1 year ago

0.8.13

1 year ago

0.8.10

1 year ago

0.8.19

1 year ago

0.8.16

1 year ago

0.8.15

1 year ago

0.8.18

1 year ago

0.8.17

1 year ago

0.7.10

1 year ago

0.7.9

1 year ago

0.7.8

1 year ago

0.7.7

1 year ago

0.7.6

1 year ago

0.7.5

1 year ago

0.7.4

1 year ago

0.7.3

1 year ago

0.7.2

1 year ago

0.7.1

1 year ago

0.7.0

1 year ago

0.6.87

1 year ago

0.6.86

1 year ago

0.6.88

1 year ago

0.6.83

1 year ago

0.6.85

1 year ago

0.6.84

1 year ago

0.6.82

2 years ago

0.6.81

2 years ago

0.6.80

2 years ago

0.6.78

2 years ago

0.6.76

2 years ago

0.6.75

2 years ago

0.6.77

2 years ago

0.6.74

2 years ago

0.6.73

2 years ago

0.6.69

2 years ago

0.6.72

2 years ago

0.6.71

2 years ago

0.6.70

2 years ago

0.6.67

2 years ago

0.6.68

2 years ago

0.6.65

2 years ago

0.6.64

2 years ago

0.6.66

2 years ago

0.6.63

2 years ago

0.6.62

2 years ago

0.6.61

2 years ago

0.6.60

2 years ago

0.6.53

2 years ago

0.6.56

2 years ago

0.6.55

2 years ago

0.6.58

2 years ago

0.6.57

2 years ago

0.6.59

2 years ago

0.6.52

2 years ago

0.6.51

2 years ago

0.6.50

2 years ago

0.6.48

2 years ago

0.6.43

2 years ago

0.6.45

2 years ago

0.6.44

2 years ago

0.6.47

2 years ago

0.6.46

2 years ago

0.6.42

2 years ago

0.6.41

2 years ago

0.6.40

2 years ago

0.6.39

2 years ago

0.6.36

2 years ago

0.6.35

2 years ago

0.6.38

2 years ago

0.6.37

2 years ago

0.6.34

2 years ago

0.6.33

2 years ago

0.6.32

2 years ago

0.6.31

2 years ago

0.6.30

2 years ago

0.6.29

2 years ago

0.6.28

2 years ago

0.6.27

2 years ago

0.6.26

2 years ago

0.6.21

2 years ago

0.6.20

2 years ago

0.6.23

2 years ago

0.6.22

2 years ago

0.6.7

2 years ago

0.6.6

2 years ago

0.6.9

2 years ago

0.6.8

2 years ago

0.6.25

2 years ago

0.6.24

2 years ago

0.6.10

2 years ago

0.6.12

2 years ago

0.6.11

2 years ago

0.6.18

2 years ago

0.6.17

2 years ago

0.6.19

2 years ago

0.6.14

2 years ago

0.6.13

2 years ago

0.6.16

2 years ago

0.6.15

2 years ago

0.6.3

2 years ago

0.6.2

2 years ago

0.6.5

2 years ago

0.6.4

2 years ago

0.6.1

2 years ago

0.5.10

2 years ago

0.5.11

2 years ago

0.5.12

2 years ago

0.4.10

2 years ago

0.4.11

2 years ago

0.5.4

2 years ago

0.5.3

2 years ago

0.5.6

2 years ago

0.5.2

2 years ago

0.6.0

2 years ago

0.4.9

2 years ago

0.4.8

2 years ago

0.5.8

2 years ago

0.5.7

2 years ago

0.5.9

2 years ago

0.4.7

2 years ago

0.4.6

2 years ago

0.2.27

2 years ago

0.2.26

2 years ago

0.2.25

2 years ago

0.2.24

2 years ago

0.2.23

2 years ago

0.2.22

2 years ago

0.2.21

2 years ago

0.2.19

2 years ago

0.2.18

2 years ago

0.2.17

2 years ago

0.2.16

2 years ago

0.2.15

2 years ago

0.2.14

2 years ago

0.2.13

2 years ago

0.2.12

2 years ago

0.2.11

2 years ago

0.2.10

2 years ago

0.4.5

2 years ago

0.4.4

2 years ago

0.1.18

2 years ago

0.4.1

2 years ago

0.4.0

2 years ago

0.4.3

2 years ago

0.4.2

2 years ago

0.2.30

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.2.29

2 years ago

0.2.28

2 years ago

0.2.7

2 years ago

0.2.6

2 years ago

0.2.9

2 years ago

0.2.3

2 years ago

0.2.5

2 years ago

0.2.4

2 years ago

0.0.204

3 years ago

0.0.203

3 years ago

0.0.202

3 years ago

0.0.201

3 years ago

0.0.200

3 years ago

0.1.10

3 years ago

0.1.11

3 years ago

0.1.12

3 years ago

0.1.13

3 years ago

0.1.14

3 years ago

0.1.15

2 years ago

0.0.197

3 years ago

0.0.196

3 years ago

0.0.195

3 years ago

0.0.194

3 years ago

0.0.199

3 years ago

0.0.198

3 years ago

0.0.193

3 years ago

0.0.192

3 years ago

0.0.191

3 years ago

0.0.190

3 years ago

0.0.159

3 years ago

0.0.158

3 years ago

0.0.153

3 years ago

0.0.157

3 years ago

0.0.156

3 years ago

0.0.155

3 years ago

0.0.154

3 years ago

0.0.169

3 years ago

0.0.164

3 years ago

0.0.163

3 years ago

0.0.162

3 years ago

0.0.161

3 years ago

0.0.168

3 years ago

0.0.167

3 years ago

0.0.166

3 years ago

0.0.165

3 years ago

0.0.160

3 years ago

0.0.175

3 years ago

0.0.174

3 years ago

0.0.173

3 years ago

0.0.172

3 years ago

0.0.179

3 years ago

0.0.178

3 years ago

0.0.177

3 years ago

0.0.176

3 years ago

0.0.171

3 years ago

0.0.170

3 years ago

0.0.186

3 years ago

0.0.185

3 years ago

0.0.184

3 years ago

0.0.183

3 years ago

0.0.189

3 years ago

0.0.188

3 years ago

0.0.187

3 years ago

0.0.182

3 years ago

0.0.181

3 years ago

0.0.180

3 years ago

0.1.16

2 years ago

0.1.17

2 years ago

0.1.0

3 years ago

0.1.2

3 years ago

0.1.8

3 years ago

0.1.7

3 years ago

0.1.9

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.0.152

3 years ago

0.0.151

3 years ago

0.0.150

3 years ago

0.0.149

3 years ago

0.0.148

3 years ago

0.0.147

3 years ago

0.0.146

3 years ago

0.0.145

3 years ago

0.0.144

3 years ago

0.0.143

3 years ago

0.0.142

3 years ago

0.0.141

3 years ago

0.0.140

3 years ago

0.0.139

3 years ago

0.0.138

3 years ago

0.0.137

3 years ago

0.0.136

3 years ago

0.0.135

3 years ago

0.0.134

3 years ago

0.0.133

3 years ago

0.0.132

3 years ago

0.0.131

3 years ago

0.0.130

3 years ago

0.0.129

3 years ago

0.0.128

3 years ago

0.0.127

3 years ago

0.0.126

3 years ago

0.0.125

3 years ago

0.0.124

3 years ago

0.0.123

3 years ago

0.0.122

3 years ago

0.0.121

3 years ago

0.0.120

3 years ago

0.0.119

3 years ago

0.0.118

3 years ago

0.0.117

3 years ago

0.0.116

3 years ago

0.0.115

3 years ago

0.0.114

3 years ago

0.0.113

3 years ago

0.0.112

3 years ago

0.0.111

3 years ago

0.0.110

3 years ago

0.0.109

3 years ago

0.0.108

3 years ago

0.0.107

3 years ago

0.0.106

3 years ago

0.0.105

3 years ago

0.0.104

3 years ago

0.0.103

3 years ago

0.0.102

3 years ago

0.0.101

3 years ago

0.0.100

3 years ago

0.0.99

3 years ago

0.0.97

3 years ago

0.0.96

3 years ago

0.0.95

3 years ago

0.0.94

3 years ago

0.0.93

3 years ago

0.0.92

3 years ago

0.0.91

3 years ago

0.0.90

3 years ago

0.0.89

3 years ago

0.0.88

3 years ago

0.0.87

3 years ago

0.0.86

3 years ago

0.0.85

3 years ago

0.0.84

3 years ago

0.0.83

3 years ago

0.0.82

3 years ago

0.0.81

3 years ago

0.0.80

3 years ago

0.0.79

3 years ago

0.0.78

3 years ago

0.0.77

3 years ago

0.0.76

3 years ago

0.0.75

3 years ago

0.0.74

3 years ago

0.0.73

3 years ago

0.0.72

3 years ago

0.0.71

3 years ago

0.0.70

3 years ago

0.0.69

3 years ago

0.0.68

3 years ago

0.0.67

3 years ago

0.0.66

3 years ago

0.0.65

3 years ago

0.0.64

3 years ago

0.0.63

3 years ago

0.0.62

3 years ago

0.0.61

3 years ago

0.0.60

3 years ago

0.0.59

3 years ago

0.0.58

3 years ago

0.0.57

3 years ago

0.0.56

3 years ago

0.0.55

3 years ago

0.0.54

3 years ago

0.0.53

3 years ago

0.0.52

3 years ago

0.0.51

3 years ago

0.0.50

3 years ago

0.0.49

3 years ago

0.0.48

3 years ago

0.0.47

3 years ago

0.0.46

3 years ago

0.0.45

3 years ago

0.0.44

3 years ago

0.0.43

3 years ago

0.0.42

3 years ago

0.0.41

3 years ago

0.0.40

3 years ago

0.0.39

3 years ago

0.0.38

3 years ago

0.0.37

3 years ago

0.0.36

3 years ago

0.0.35

3 years ago

0.0.34

3 years ago

0.0.33

3 years ago

0.0.32

3 years ago

0.0.31

3 years ago

0.0.30

3 years ago

0.0.29

3 years ago

0.0.28

3 years ago

0.0.27

3 years ago

0.0.26

3 years ago

0.0.25

3 years ago

0.0.24

3 years ago

0.0.23

3 years ago

0.0.22

3 years ago

0.0.21

3 years ago

0.0.20

3 years ago

0.0.19

3 years ago

0.0.18

3 years ago

0.0.17

3 years ago

0.0.16

3 years ago

0.0.15

3 years ago

0.0.14

3 years ago

0.0.13

3 years ago

0.0.12

3 years ago

0.0.11

3 years ago

0.0.10

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.1

3 years ago

0.0.0

3 years ago