├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── oruga-tailwindcss.css
    │   └── tailwindcss.css
    ├── components
    │   ├── DarkModeSwitch.vue
    │   ├── MainHeader.vue
    │   ├── RecipeImage.vue
    │   ├── RecipeUploader.vue
    │   └── RecipesFinder.vue
    ├── main.ts
    ├── recipe.ts
    ├── router
    │   └── index.ts
    ├── shims-tsx.d.ts
    ├── shims-vue.d.ts
    └── views
    │   └── Home.vue
├── tailwind.config.js
├── tsconfig.json
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended',
 9 |     '@vue/typescript/recommended'
10 |   ],
11 |   parserOptions: {
12 |     ecmaVersion: 2020
13 |   },
14 |   rules: {
15 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Oruga TailwindCSS Demo
 2 | 
 3 | This simple demo made using the upcoming [Oruga](https://github.com/oruga-ui/oruga) release shows how to customize `Oruga UI` with `TailwindCSS 2` and use components like Input, Radio, Loading, Switch, Collapse and so on!
 4 | 
 5 | - [Online demo](https://oruga-tailwindcss-demo.netlify.app)
 6 | - [Oruga Documentation preview](https://oruga-documentation-preview.netlify.app)
 7 | 
 8 | You can find common style for Oruga UI components in `src/assets/oruga-tailwind.css`
 9 | 
10 | ## Project setup
11 | ```
12 | npm install
13 | ```
14 | 
15 | ### Compiles and hot-reloads for development
16 | ```
17 | npm run serve
18 | ```
19 | 
20 | ### Compiles and minifies for production
21 | ```
22 | npm run build
23 | ```
24 | 
25 | ### Lints and fixes files
26 | ```
27 | npm run lint
28 | ```
29 | 
30 | ### Customize configuration
31 | See [Configuration Reference](https://cli.vuejs.org/config/).
32 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@oruga-ui/oruga-tailwind",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@fortawesome/fontawesome-svg-core": "^1.2.29",
12 |     "@fortawesome/free-brands-svg-icons": "^5.15.1",
13 |     "@fortawesome/free-solid-svg-icons": "^5.13.1",
14 |     "@fortawesome/vue-fontawesome": "^0.1.10",
15 |     "@oruga-ui/oruga": "^0.5.5",
16 |     "autoprefixer": "^9.8.6",
17 |     "core-js": "^3.6.5",
18 |     "postcss": "^7.0.36",
19 |     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
20 |     "vue": "^2.6.11",
21 |     "vue-class-component": "^7.2.3",
22 |     "vue-property-decorator": "^8.4.2",
23 |     "vue-router": "^3.2.0",
24 |     "vuex": "^3.5.1"
25 |   },
26 |   "devDependencies": {
27 |     "@typescript-eslint/eslint-plugin": "^2.33.0",
28 |     "@typescript-eslint/parser": "^2.33.0",
29 |     "@vue/cli-plugin-babel": "^4.4.0",
30 |     "@vue/cli-plugin-eslint": "^4.4.0",
31 |     "@vue/cli-plugin-router": "^4.4.0",
32 |     "@vue/cli-plugin-typescript": "^4.4.0",
33 |     "@vue/cli-service": "^4.4.0",
34 |     "@vue/eslint-config-typescript": "^5.0.2",
35 |     "eslint": "^6.7.2",
36 |     "eslint-plugin-vue": "^6.2.2",
37 |     "typescript": "~3.9.3",
38 |     "vue-template-compiler": "^2.6.11"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | const autoprefixer = require('autoprefixer');
 2 | const tailwindcss = require('tailwindcss')('./tailwind.config.js');
 3 | 
 4 | module.exports = {
 5 |   plugins: [
 6 |     tailwindcss,
 7 |     autoprefixer,
 8 |   ]
 9 | };
10 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oruga-ui/demo-tailwindcss/7e9bfa6c8ed062197a3b14c05ca44c3d9843358a/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div id="app" class="container mx-auto px-8 sm:px-4">
3 |     <main-header />
4 |     <router-view />
5 |   </div>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/src/assets/oruga-tailwindcss.css:
--------------------------------------------------------------------------------
 1 | /* Button */
 2 | 
 3 | .btn {
 4 |   @apply font-bold py-2 px-4 text-highlight bg-highlight-background dark:text-highlight-dark dark:bg-highlight-background-dark rounded;
 5 | }
 6 | 
 7 | 
 8 | /* Field */
 9 | 
10 | .field-label {
11 |   @apply block text-sm font-bold mb-2 text-main dark:text-main-dark;
12 | }
13 | 
14 | .field-danger {
15 |   @apply text-red-500;
16 | }
17 | 
18 | 
19 | /* Input */
20 | 
21 | .input {
22 |   @apply shadow appearance-none border w-full py-2 px-3 leading-tight text-main dark:text-main-dark dark:bg-main;
23 | }
24 | 
25 | .input-danger {
26 |   @apply border-highlight;
27 | }
28 | 
29 | 
30 | /* Switch */
31 | 
32 | .switch {
33 |   @apply bg-black dark:bg-highlight-dark;
34 | }
35 | 
36 | .switch-label {
37 |   @apply hidden;
38 | }
39 | 
40 | /* Dropdown */
41 | 
42 | .dropdown-menu {
43 |   @apply shadow-lg rounded-sm z-10 bg-main-dark text-main dark:text-main-dark dark:bg-main z-50 w-full;
44 | }
45 | 
46 | .dropdown-item {
47 |   @apply cursor-pointer text-main dark:text-main-dark dark:bg-main w-full p-1;
48 | }
49 | 
50 | .dropdown-item-active {
51 |   @apply text-highlight bg-highlight-background dark:text-highlight-dark dark:bg-highlight-background-dark;
52 | }
53 | 
54 | 
55 | /* Loading */
56 | 
57 | .loading-background {
58 |   @apply bg-gray-50 dark:bg-gray-700 opacity-75;
59 | }
60 | 
61 | 
62 | /* Radio */
63 | 
64 | .radio {
65 |   @apply font-bold py-2 px-4 rounded text-main dark:text-main-dark;
66 |   min-width: 6rem;
67 | }
68 | 
69 | .radio-check {
70 |   @apply hidden;
71 | }
72 | 
73 | .radio-checked {
74 |   @apply text-highlight bg-highlight-background dark:text-highlight-dark dark:bg-highlight-background-dark;
75 | }
76 | 
77 | .radio-label {
78 |   @apply w-full text-center p-0;
79 | }
80 | 


--------------------------------------------------------------------------------
/src/assets/tailwindcss.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   body {
 7 |     @apply bg-white dark:bg-gray-900;
 8 |   }
 9 | 
10 |   h1 {
11 |     @apply text-4xl sm:text-6xl lg:text-7xl leading-none font-extrabold tracking-tight text-primary dark:text-primary-dark mt-10 mb-8 sm:mt-14 sm:mb-10;
12 |   }
13 | 
14 |   h2 {
15 |     @apply text-3xl text-primary dark:text-primary-dark;
16 |   }
17 | 
18 |   h3 {
19 |     @apply text-lg text-primary dark:text-primary-dark;
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/DarkModeSwitch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="text-gray-400 flex items-center">
 3 |     <o-icon icon="sun" :class="{'text-highlight-background' : !darkMode}"></o-icon>
 4 |     <o-switch size="small" class="mx-1" v-model="darkMode"></o-switch>
 5 |     <o-icon icon="moon" :class="{'text-highlight-background-dark' : darkMode}"></o-icon>
 6 |   </div>
 7 | </template>
 8 | <script lang="ts">
 9 | import Vue from "vue";
10 | 
11 | export default Vue.extend({
12 |   name: "DarkModeSwitch",
13 |   data() {
14 |     return {
15 |       darkMode: null as any,
16 |     };
17 |   },
18 |   mounted() {
19 |     this.darkMode =
20 |       localStorage.theme == "dark"
21 |         ? true
22 |         : localStorage.theme == "light"
23 |         ? false
24 |         : window.matchMedia("(prefers-color-scheme: dark)").matches;
25 |   },
26 |   watch: {
27 |     darkMode(isDarkNow, wasDarkBefore) {
28 |       if (wasDarkBefore !== null) {
29 |         localStorage.theme = isDarkNow ? "dark" : "light";
30 |       }
31 |       setTimeout(() => {
32 |         let html = document.querySelector("html")!;
33 |         if (isDarkNow) {
34 |           html.classList.add("dark");
35 |         } else {
36 |           html.classList.remove("dark");
37 |         }
38 |       }, 300);
39 | 
40 |     },
41 |   },
42 | });
43 | </script>
44 | 


--------------------------------------------------------------------------------
/src/components/MainHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="border-b border-gray-200 py-6 flex items-center justify-between mb-16 sm:mb-20 -mx-4 sm:mx-0 sm:px-0"
 4 |   >
 5 |     <div class="flex items-center">
 6 |       <img class="w-14" src="https://oruga.io/logo.png" />
 7 |       <o-icon
 8 |         class="text-red-500 dark:text-primary"
 9 |         icon="heart"
10 |         size="large"
11 |       ></o-icon>
12 |       <img
13 |         class="w-14"
14 |         src="https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg"
15 |       />
16 |     </div>
17 |     <div class="flex">
18 |       <dark-mode-switch />
19 |       <a
20 |         target="blank"
21 |         class="transition duration-500 opacity-40 hover:opacity-100 text-main dark:text-main-dark"
22 |         href="https://github.com/oruga-ui/demo-tailwindcss"
23 |       >
24 |         <o-icon class="ml-4" pack="fab" icon="github" size="large"></o-icon>
25 |       </a>
26 |     </div>
27 |   </div>
28 | </template>
29 | 


--------------------------------------------------------------------------------
/src/components/RecipeImage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <img
 3 |     :src="src"
 4 |     :alt="alt"
 5 |     class="flex-none w-20 h-20 rounded-lg object-cover"
 6 |   />
 7 | </template>
 8 | <script lang="ts">
 9 | import Vue from "vue";
10 | 
11 | export default Vue.extend({
12 |   name: "RecipeImage",
13 |   props: {
14 |     src: {
15 |       type: String,
16 |     },
17 |     alt: {
18 |       type: String
19 |     }
20 |   }
21 | })
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/components/RecipeUploader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <form
  3 |     class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:shadow-md rounded sm:px-8 sm:pt-6 pb-8 mb-4 text-main"
  4 |   >
  5 |     <div class="mb-4 col-start-1 md:col-end-3">
  6 |       <o-field
  7 |         label="Title"
  8 |         label-for="name"
  9 |         :variant="errors.title ? 'danger' : ''"
 10 |         :message="errors.title"
 11 |       >
 12 |         <o-input
 13 |           id="title"
 14 |           type="text"
 15 |           placeholder="Name of your recipe (e.g. Pizza)"
 16 |           v-model="recipe.title"
 17 |         />
 18 |       </o-field>
 19 |     </div>
 20 |     <div class="mb-4 col-start-1 md:col-end-3">
 21 |       <o-field
 22 |         label="Author"
 23 |         label-for="author"
 24 |         :variant="errors.author ? 'danger' : ''"
 25 |         :message="errors.author"
 26 |       >
 27 |         <o-input
 28 |           id="author"
 29 |           type="text"
 30 |           placeholder="Author name (e.g. Nick Cave)"
 31 |           v-model="recipe.author"
 32 |         />
 33 |       </o-field>
 34 |     </div>
 35 |     <div class="mb-4 col-start-1">
 36 |       <o-field
 37 |         label="Time (in minutes)"
 38 |         label-for="time"
 39 |         :variant="errors.time ? 'danger' : ''"
 40 |         :message="errors.time"
 41 |       >
 42 |         <o-input
 43 |           id="time"
 44 |           type="number"
 45 |           placeholder="Time"
 46 |           v-model.number="recipe.time"
 47 |           min="1"
 48 |         />
 49 |       </o-field>
 50 |     </div>
 51 |     <div class="mb-4">
 52 |       <o-field
 53 |         label="Servings"
 54 |         label-for="servings"
 55 |         :variant="errors.servings ? 'danger' : ''"
 56 |         :message="errors.servings"
 57 |       >
 58 |         <o-input
 59 |           id="servings"
 60 |           type="number"
 61 |           placeholder="Servings"
 62 |           v-model.number="recipe.servings"
 63 |           min="1"
 64 |         />
 65 |       </o-field>
 66 |     </div>
 67 |     <div class="mb-4 col-start-1 flex justify-between">
 68 |       <o-field
 69 |         label="Image"
 70 |         label-for="image"
 71 |         :variant="errors.image ? 'danger' : ''"
 72 |         :message="errors.image"
 73 |       >
 74 |         <o-upload v-model="file">
 75 |           <o-button tag="a" variant="primary">
 76 |             <o-icon icon="upload" class="mr-4"></o-icon>
 77 |             <span>Click to upload</span>
 78 |           </o-button>
 79 |         </o-upload>
 80 |       </o-field>
 81 |       <recipe-image v-if="recipe.image" :src="recipe.image" />
 82 |     </div>
 83 |     <div class="mb-4">
 84 |       <o-field label="Difficulty" class="">
 85 |         <div class="flex">
 86 |           <o-dropdown
 87 |             placeholder="Difficulty"
 88 |             v-model="recipe.difficulty"
 89 |             aria-role="list"
 90 |           >
 91 |             <o-button
 92 |               variant="primary"
 93 |               type="button"
 94 |               slot="trigger"
 95 |               class="w-32"
 96 |             >
 97 |               <div class="flex justify-between">
 98 |                 <span>{{ recipe.difficulty | difficulty }}</span>
 99 |                 <o-icon icon="caret-down"></o-icon>
100 |               </div>
101 |             </o-button>
102 |             <o-dropdown-item value="easy">
103 |               <span>Easy</span>
104 |             </o-dropdown-item>
105 |             <o-dropdown-item value="medium">
106 |               <span>Medium</span>
107 |             </o-dropdown-item>
108 |             <o-dropdown-item value="hard">
109 |               <span>Hard</span>
110 |             </o-dropdown-item>
111 |           </o-dropdown>
112 |         </div>
113 |       </o-field>
114 |     </div>
115 |     <div class="mb-4 col-start-1 md:col-end-3">
116 |       <o-field
117 |         label="Procedure"
118 |         label-for="procedure"
119 |         :variant="errors.procedure ? 'danger' : ''"
120 |         :message="errors.procedure"
121 |       >
122 |         <o-input
123 |           inputClass="h-48"
124 |           id="procedure"
125 |           type="textarea"
126 |           placeholder="How to make your recipe step by step"
127 |           v-model="recipe.procedure"
128 |         />
129 |       </o-field>
130 |     </div>
131 |     <div class="flex justify-center col-start-1 md:col-end-3">
132 |       <o-button label="Add recipe" @click="addRecipe" native-type="button" />
133 |     </div>
134 |     <p style="position: relative">
135 |       <o-loading full-page :active.sync="isLoading">
136 |         <o-icon class="text-main dark:text-main-dark" icon="sync-alt" size="large" spin> </o-icon>
137 |       </o-loading>
138 |     </p>
139 |   </form>
140 | </template>
141 | <script lang="ts">
142 | import Vue from "vue";
143 | import RecipeImage from '@/components/RecipeImage.vue'
144 | 
145 | export default Vue.extend({
146 |   name: "RecipeUploader",
147 |   components: {
148 |     'recipe-image' : RecipeImage
149 |   },
150 |   data() {
151 |     return {
152 |       file: null,
153 |       isLoading: false,
154 |       recipe: {
155 |         title: null,
156 |         author: null,
157 |         time: 5,
158 |         image: null,
159 |         servings: 1,
160 |         difficulty: "easy",
161 |         procedure: "",
162 |       } as any,
163 |       errors: {
164 |         title: null,
165 |         author: null,
166 |         image: null,
167 |         procedure: null,
168 |         time: null,
169 |         servings: null,
170 |       } as any,
171 |     };
172 |   },
173 |   watch: {
174 |     file(newFile) {
175 |       this.recipe.image = window.URL.createObjectURL(newFile);
176 |     },
177 |   },
178 |   methods: {
179 |     _validateRecipe() {
180 |       let isValid = true;
181 |       for (const key in this.errors) {
182 |         this.errors[key] = null;
183 |         if (!this.recipe[key]) {
184 |           this.errors[key] = "This field cannot be empty";
185 |           isValid = false;
186 |         }
187 |         if ((key === "servings" || key === "time") && this.recipe[key] < 1) {
188 |           this.errors[key] = "This field should be at least 1";
189 |           isValid = false;
190 |         }
191 |       }
192 |       return isValid;
193 |     },
194 |     addRecipe() {
195 |       this.isLoading = true;
196 | 
197 |       if (this._validateRecipe()) {
198 |         setTimeout(() => {
199 |           this.$store.commit("addRecipe", this.recipe);
200 |           this.recipe = {
201 |             title: "",
202 |             author: "",
203 |             time: 5,
204 |             image: null,
205 |             servings: 1,
206 |             difficulty: "easy",
207 |             procedure: "",
208 |           };
209 |           this.isLoading = false;
210 |         }, 2000);
211 |       } else {
212 |         this.isLoading = false;
213 |       }
214 |     },
215 |   },
216 | });
217 | </script>
218 | 


--------------------------------------------------------------------------------
/src/components/RecipesFinder.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="divide-y divide-gray-100 border-b border-gray-100">
  3 |     <div class="flex space-x-2 py-3">
  4 |       <o-radio v-model="filter" name="all" native-value="all" @click.native="isOpen = -1">
  5 |         All
  6 |       </o-radio>
  7 |       <o-radio v-model="filter" name="featured" native-value="featured" @click.native="isOpen = -1">
  8 |         Featured
  9 |       </o-radio>
 10 |       <o-radio v-model="filter" name="faster" native-value="faster" @click.native="isOpen = -1">
 11 |         Faster
 12 |       </o-radio>
 13 |     </div>
 14 |       <article
 15 |         class="p-4 flex space-x-4"
 16 |         v-for="(recipe, index) of filteredRecipes"
 17 |         :class="{ hidden : !isLoading }"
 18 |         :key="`loading-${index}`">
 19 |         <div>
 20 |           <o-skeleton circle width="64px" height="64px"></o-skeleton>
 21 |         </div>
 22 |         <div class="w-full">
 23 |           <o-skeleton width="100%" ></o-skeleton>
 24 |           <o-skeleton width="100%" ></o-skeleton>
 25 |           <o-skeleton width="100%" ></o-skeleton>
 26 |         </div>
 27 |       </article>
 28 |       <o-collapse
 29 |         animation="slide"
 30 |         v-for="(recipe, index) of filteredRecipes"
 31 |         :class="{ hidden : isLoading }"
 32 |         :key="index"
 33 |         :open="isOpen == index"
 34 |         @open="isOpen = index"
 35 |       >
 36 |         <article slot="trigger" slot-scope="props" class="card-header p-4 flex space-x-4 text-main dark:text-main-dark">
 37 |           <recipe-image :src="recipe.image" :alt="`Image for recipe ${recipe.title}`" />
 38 |           <div class="min-w-0 relative flex-auto sm:pr-20 lg:pr-0 xl:pr-20">
 39 |             <h2 class="text-lg font-semibold mb-0.5">
 40 |               {{ recipe.title }}
 41 |             </h2>
 42 |             <dl class="flex flex-wrap text-sm font-medium whitespace-pre">
 43 |               <div>
 44 |                 <dt class="sr-only">Time</dt>
 45 |                 <dd>
 46 |                   <abbr :title="`${recipe.time} minutes`">{{ recipe.time }}m</abbr>
 47 |                 </dd>
 48 |               </div>
 49 |               <div>
 50 |                 <dt class="sr-only">Difficulty</dt>
 51 |                 <dd>· {{ recipe.difficulty | difficulty }}</dd>
 52 |               </div>
 53 |               <div>
 54 |                 <dt class="sr-only">Servings</dt>
 55 |                 <dd>· {{ recipe.servings }} servings</dd>
 56 |               </div>
 57 |               <div class="flex-none w-full mt-0.5 font-normal">
 58 |                 <dt class="inline mr-1">By</dt>
 59 |                 <dd class="inline">{{ recipe.author }}</dd>
 60 |               </div>
 61 |               <div
 62 |                 class="absolute top-0 right-0 rounded-full px-2 py-0.5 hidden sm:flex lg:hidden xl:flex items-center space-x-1"
 63 |               >
 64 |                 <dt class="">
 65 |                   <o-icon :icon="props.open ? 'caret-up' : 'caret-down'" size="large"/>
 66 |                 </dt>
 67 |               </div>
 68 |             </dl>
 69 |           </div>
 70 |         </article>
 71 |         <div class="text-main dark:text-main-dark">
 72 |           <div class="p-4">
 73 |             {{ recipe.procedure }}
 74 |           </div>
 75 |         </div>
 76 |       </o-collapse>
 77 |   </div>
 78 | </template>
 79 | <script lang="ts">
 80 | import Vue from "vue";
 81 | import RecipeImage from '@/components/RecipeImage.vue';
 82 | import Recipe from '@/recipe';
 83 | 
 84 | export default Vue.extend({
 85 |   name: "RecipesFinder",
 86 |   mounted () {
 87 |     setTimeout(() => {
 88 |       this.isLoading = false;
 89 |     }, 2500);
 90 |   },
 91 |   components: {
 92 |     'recipe-image' : RecipeImage
 93 |   },
 94 |   computed: {
 95 |     filteredRecipes() {
 96 |       switch (this.filter) {
 97 |         case "featured":
 98 |           return this.$store.state.recipes.filter((recipe: Recipe) => {
 99 |             return recipe.isFeatured;
100 |           });
101 |         case "faster":
102 |           return [...this.$store.state.recipes].sort((a, b) => a.time - b.time);
103 |         default:
104 |           return this.$store.state.recipes;
105 |       }
106 |     },
107 |   },
108 |   data() {
109 |     return {
110 |       isOpen: -1,
111 |       filter: 'all',
112 |       isLoading: true
113 |     };
114 |   },
115 | });
116 | </script>
117 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
  1 | import '@oruga-ui/oruga/dist/oruga.css'
  2 | 
  3 | import Vue from 'vue'
  4 | import Vuex from 'vuex'
  5 | import App from './App.vue'
  6 | import router from './router'
  7 | 
  8 | // @ts-ignore
  9 | import Oruga from '@oruga-ui/oruga'
 10 | 
 11 | import { library } from '@fortawesome/fontawesome-svg-core';
 12 | import { fas } from "@fortawesome/free-solid-svg-icons";
 13 | import { fab } from "@fortawesome/free-brands-svg-icons";
 14 | 
 15 | import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 16 | 
 17 | import DarkModeSwitch from "./components/DarkModeSwitch.vue";
 18 | import MainHeader from "./components/MainHeader.vue";
 19 | 
 20 | import './assets/tailwindcss.css';
 21 | import './assets/oruga-tailwindcss.css';
 22 | 
 23 | Vue.config.productionTip = false
 24 | 
 25 | library.add(fas);
 26 | library.add(fab);
 27 | 
 28 | Vue.component('vue-fontawesome', FontAwesomeIcon);
 29 | Vue.component('main-header', MainHeader);
 30 | 
 31 | Vue.filter('difficulty', (difficulty: string) => {
 32 |   let difficulties: any = {
 33 |     'easy' : 'Easy',
 34 |     'medium' : 'Medium',
 35 |     'hard' : 'Hard'
 36 |   };
 37 |   return difficulties[difficulty];
 38 | })
 39 | 
 40 | Vue.use(Vuex)
 41 | 
 42 | const store = new Vuex.Store({
 43 |   state: {
 44 |     recipes: [
 45 |       {
 46 |         title: "Red White and Blue Rice Krispie Treats",
 47 |         author: "Hank Douglas",
 48 |         time: 20,
 49 |         difficulty: "medium",
 50 |         servings: 4,
 51 |         procedure: "My recipe for Red White and Blue Rice Krispie Treats lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
 52 |         image: "https://www.iheartnaptime.net/wp-content/uploads/2018/05/red-white-and-blue-rice-krispie-treats.jpg",
 53 |         isFeatured: true
 54 |       },
 55 |       {
 56 |         title: "Garlic and Herb Sautéed Bell Pepper Strips",
 57 |         author: "Nicholas Denver",
 58 |         time: 30,
 59 |         difficulty: "easy",
 60 |         servings: 5,
 61 |         procedure: "Garlic and Herb Sautéed Bell Pepper Strips, at vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.",
 62 |         image: "https://www.thespruceeats.com/thmb/eFyjZT5rxTDF3j3GD2undTytLjk=/3000x3000/smart/filters:no_upscale()/garlic-herb-sauteed-bell-pepper-recipe-102112-hero-01-5be21874c9e77c0051eed106.jpg",
 63 |         isFeatured: true
 64 |       },
 65 |       {
 66 |         title: "Lily’s Healthy Beef Burger",
 67 |         author: "Lily Ford",
 68 |         time: 10,
 69 |         difficulty: "easy",
 70 |         servings: 4,
 71 |         procedure: "Lily’s Healthy Beef Burger recipe, sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.",
 72 |         image: "https://images-na.ssl-images-amazon.com/images/I/81cMw0qNjTL._SX425_.jpg"
 73 |       }
 74 |     ],
 75 |   },
 76 |   mutations: {
 77 |     addRecipe(state, recipe) {
 78 |       state.recipes.push(recipe)
 79 |     }
 80 |   }
 81 | })
 82 | 
 83 | Vue.use(Oruga, {
 84 |   iconPack: 'fas',
 85 |   iconComponent: 'vue-fontawesome',
 86 |   statusIcon: false,
 87 |   button: {
 88 |     override: true,
 89 |     rootClass: 'btn',
 90 |   },
 91 |   radio: {
 92 |     rootClass: 'radio',
 93 |     labelClass: 'radio-label',
 94 |     checkClass: 'radio-check',
 95 |     checkedClass: 'radio-checked'
 96 |   },
 97 |   field: {
 98 |     override: true,
 99 |     labelClass: 'field-label',
100 |     messageClass: 'text-xs italic',
101 |     variantClass: 'field-'
102 |   },
103 |   input: {
104 |     override: true,
105 |     inputClass: 'input focus:outline-none focus:shadow-outline',
106 |     roundedClass: 'rounded',
107 |     variantClass: 'input-'
108 |   },
109 |   dropdown: {
110 |     menuClass: 'dropdown-menu',
111 |     itemClass: 'dropdown-item',
112 |     itemActiveClass: 'dropdown-item-active'
113 |   },
114 |   loading: {
115 |     overlayClass: 'loading-background'
116 |   },
117 |   icon: {
118 |     override: true,
119 |     spinClass: 'fa-spin'
120 |   },
121 |   switch: {
122 |     checkClass: 'switch',
123 |     labelClass: 'switch-label',
124 |   },
125 | })
126 | 
127 | Vue.component('dark-mode-switch', DarkModeSwitch);
128 | 
129 | new Vue({
130 |   router,
131 |   store,
132 |   render: h => h(App)
133 | }).$mount('#app')
134 | 


--------------------------------------------------------------------------------
/src/recipe.ts:
--------------------------------------------------------------------------------
 1 | export default class Recipe {
 2 |   title: string = '';
 3 |   author: string = '';
 4 |   time: number = 0;
 5 |   difficulty: string = '';
 6 |   servings: number = 0;
 7 |   procedure: string = '';
 8 |   image: string = '';
 9 |   isFeatured: boolean = false;
10 | }
11 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter, { RouteConfig } from 'vue-router'
 3 | import Home from '../views/Home.vue'
 4 | 
 5 | Vue.use(VueRouter)
 6 | 
 7 | const routes: Array<RouteConfig> = [
 8 |   {
 9 |     path: '/',
10 |     name: 'Home',
11 |     component: Home
12 |   }
13 | ]
14 | 
15 | const router = new VueRouter({
16 |   mode: 'history',
17 |   base: process.env.BASE_URL,
18 |   routes
19 | })
20 | 
21 | export default router
22 | 


--------------------------------------------------------------------------------
/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue, { VNode } from 'vue'
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     // tslint:disable no-empty-interface
 6 |     interface Element extends VNode {}
 7 |     // tslint:disable no-empty-interface
 8 |     interface ElementClass extends Vue {}
 9 |     interface IntrinsicElements {
10 |       [elem: string]: any;
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import Vue from 'vue'
3 |   export default Vue
4 | }
5 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <p
 4 |       class="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 font-medium mb-10 sm:mb-11 text-main dark:text-main-dark"
 5 |     >
 6 |       <b class="text-primary dark:text-primary-dark">OrugaUI + TailwindCSS 2 demo</b> shows how to customize <b>Oruga UI</b> with <b>TailwindCSS</b> and use components like Input, Radio, Loading, Switch, Collapse and so on!
 7 |     </p>
 8 |     <h1>Recipes</h1>
 9 |     <recipes-finder />
10 |     <h1>Add your recipe</h1>
11 |     <recipes-uploader />
12 |   </section>
13 | </template>
14 | <script lang="ts">
15 | import Vue from "vue";
16 | import RecipeUploader from "@/components/RecipeUploader.vue";
17 | import RecipesFinder from "@/components/RecipesFinder.vue";
18 | 
19 | export default Vue.extend({
20 |   components: {
21 |     'recipes-finder' : RecipesFinder,
22 |     'recipes-uploader' : RecipeUploader
23 |   },
24 |   name: "Home",
25 | });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const colors = require('tailwindcss/colors')
 2 | 
 3 | module.exports = {
 4 |   darkMode: 'class',
 5 |   theme: {
 6 |     extend: {
 7 |       colors: {
 8 |         main: {
 9 |           DEFAULT: colors.gray[700],
10 |           dark: '#ffffff',
11 |         },
12 |         primary: {
13 |           DEFAULT: '#1fb6ff',
14 |           dark: '#ffffff',
15 |         },
16 |         highlight: {
17 |           DEFAULT: colors.red[700],
18 |           dark: colors.violet[800],
19 |         },
20 |         'highlight-background': {
21 |           DEFAULT: colors.yellow[400],
22 |           dark: '#1fb6ff',
23 |         }
24 |       }
25 |     }
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "experimentalDecorators": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": ".",
14 |     "types": [
15 |       "webpack-env"
16 |     ],
17 |     "paths": {
18 |       "@/*": [
19 |         "src/*"
20 |       ]
21 |     },
22 |     "lib": [
23 |       "esnext",
24 |       "dom",
25 |       "dom.iterable",
26 |       "scripthost"
27 |     ]
28 |   },
29 |   "include": [
30 |     "src/**/*.ts",
31 |     "src/**/*.tsx",
32 |     "src/**/*.vue",
33 |     "tests/**/*.ts",
34 |     "tests/**/*.tsx"
35 |   ],
36 |   "exclude": [
37 |     "node_modules"
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | 
2 | module.exports = {
3 |     lintOnSave: false,
4 | }  


--------------------------------------------------------------------------------