First release of NovaTextCard

.eslintrc

@@ -0,0 +1,20 @@
+{
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/essential",
+        "prettier"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 2017
+    },
+    "globals": {
+        "Nova": true
+    },
+    "env": {
+        "browser": true,
+        "node": true
+    },
+    "rules": {
+        "vue/html-indent": ["error", 4]
+    }
+}

.gitattributes

@@ -0,0 +1,13 @@
+# Path-based git attributes
+# https://www.kernel.org/pub/software/scm/git/docs/gitattributes.html
+
+# Ignore all test and documentation with "export-ignore".
+/.gitattributes     export-ignore
+/.gitignore         export-ignore
+/.travis.yml        export-ignore
+/phpunit.xml.dist   export-ignore
+/.scrutinizer.yml   export-ignore
+/.styleci.yml       export-ignore
+/tests              export-ignore
+/.editorconfig      export-ignore
+/docs               export-ignore

.gitignore

@@ -0,0 +1,11 @@
+/.idea
+/vendor
+/node_modules
+package-lock.json
+composer.phar
+composer.lock
+phpunit.xml
+.phpunit.result.cache
+.DS_Store
+Thumbs.db
+yarn.lock

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "printWidth": 200,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "es5"
+}

composer.json

@@ -0,0 +1,39 @@
+{
+    "name": "ericlagarda/nova-text-card",
+    "description": "A custom card for Laravel Nova to show Text in cards with some good options",
+    "keywords": [
+        "laravel",
+        "nova",
+        "card",
+        "text"
+    ],
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Eric Lagarda",
+            "email": "eric@infinety.es",
+            "role": "Developer"
+        }
+    ],
+    "require": {
+        "php": ">=7.1.0",
+        "laravel/nova": "*"
+    },
+    "autoload": {
+        "psr-4": {
+            "Ericlagarda\\NovaTextCard\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Ericlagarda\\NovaTextCard\\CardServiceProvider"
+            ]
+        }
+    },
+    "config": {
+        "sort-packages": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

dist/mix-manifest.json

@@ -0,0 +1,3 @@
+{
+    "/js/card.js": "/js/card.js"
+}

package.json

@@ -0,0 +1,26 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch-poll": "npm run watch -- --watch-poll",
+        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "prod": "npm run production",
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "check-format": "prettier --list-different 'resources/**/*.{css,js,vue}'",
+        "format": "prettier --write 'resources/**/*.{css,js,vue}'",
+        "lint": "eslint resources/js --fix --ext js,vue"
+    },
+    "devDependencies": {
+        "cross-env": "^5.0.0",
+        "eslint": "^4.19.1",
+        "eslint-config-prettier": "^2.9.0",
+        "eslint-plugin-vue": "^4.4.0",
+        "laravel-mix": "^1.0",
+        "prettier": "^1.14.0"
+    },
+    "dependencies": {
+        "vue": "^2.5.0"
+    }
+}

readme.md

@@ -0,0 +1,66 @@
+# Nova Text Card
+
+A custom card for Laravel Nova to show Text in cards with some good options.
+
+![preview](https://user-images.githubusercontent.com/74367/53241396-dd2f2600-36a1-11e9-8ee8-7341fbc58172.png)
+
+## Installation
+
+You can install the package in to a Laravel app that uses [Nova](https://nova.laravel.com) via composer:
+
+
+```bash
+composer require ericlagarda/nova-text-card
+```
+
+Then, register your new link in the `cards` method of the `NovaServiceProvider` or your `ResourceTool` class.
+
+```php
+
+public function cards()
+{
+    return [
+        // ...
+        // Examples from the preview image
+
+        (new TextCard())
+            ->forceFullWidth()
+            ->heading('My custom awesome heading')
+            ->text('Congue platea augue fames nullam morbi vehicula egestas lobortis lacus adipiscing eleifend'),
+
+        (new TextCard())
+            ->width('1/2')
+            ->height(100)
+            ->center(false)
+            ->heading('Custom card no centered')
+            ->text('Congue platea augue fames nullam morbi'),
+
+        (new TextCard())
+            ->width('1/2')
+            ->height()
+            ->text('<h4 class="font-light">This is a custom card with text and no heading. Height is set to auto.</h4>')
+            ->textAsHtml(),
+
+        (new TextCard())
+            ->forceFullWidth()
+            ->height(90)
+            ->heading('<h1 class="text-3xl text-80 font-light">Just a heading text with a smile <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="fill-current" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 14h-12c.331 1.465 2.827 4 6.001 4 3.134 0 5.666-2.521 5.999-4zm0-3.998l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002zm-7 0l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002z"/></svg></h1>')
+            ->headingAsHtml(),
+    ];
+}
+```
+
+## Card options
+
+* `->width('string')`: Width of the card.
+* `->forceFullWidth()`: Force the card to be full width. A fix for nova cards order.
+* `->height('string or number'):`Height of the Card. If is called without options height will be auto. Default to nova card height.
+* `->center(boolean)`: If you want the text centered or not. Default to true
+* `->heading('string or html')`: Heading text or custom html. Default to false. No heading text is shown.
+* `->text('string or html')`: Text of the card or custom html. Default to false. No text is shown.
+* `->headingAsHtml()`: If you want to print the heading as HTML
+* `->textAsHtml()`: If you want to print the text as HTML
+
+
+
+

resources/js/card.js

@@ -0,0 +1,3 @@
+Nova.booting(Vue => {
+    Vue.component('text-card', require('./components/Card'));
+});

resources/js/components/Card.vue

@@ -0,0 +1,58 @@
+<template>
+    <card class="card flex flex-col  justify-center" :class="cardClassList" :style="cardStyle">
+        <div class="px-3 py-3">
+            <template v-if="!card.headingRaw">
+                <h1 class="text-3xl text-80 font-light" :class="textClassList" v-if="card.heading">{{ card.heading }}</h1>
+            </template>
+            <div v-else v-html="card.heading"></div>
+
+            <template v-if="!card.textRaw">
+                <p class="text-80 font-light mt-2" v-if="card.text">{{ card.text }}</p>
+            </template>
+            <div v-else v-html="card.text"></div>
+        </div>
+    </card>
+</template>
+
+<script>
+export default {
+    props: ['card'],
+
+    methods: {
+        fixPixels(pixels) {
+            if (pixels == 'auto') {
+                return 'auto';
+            }
+
+            return pixels == 'default' ? '' : parseInt(pixels, 10) + 'px';
+        },
+    },
+
+    computed: {
+        textClassList() {
+            return this.card.center ? 'text-center' : '';
+        },
+
+        cardClassList() {
+            return this.cardCenter + ' ' + this.textClassList;
+        },
+
+        cardStyle() {
+            return {
+                height: this.card.height ? this.fixPixels(this.card.height) : 'auto',
+            };
+        },
+
+        cardCenter() {
+            return this.card.center ? 'items-center' : '';
+        },
+    },
+
+    mounted() {
+        if (this.card.forceFullWidth) {
+            this.$parent.$el.classList.remove('w-5/6');
+            this.$parent.$el.classList.add('w-full');
+        }
+    },
+};
+</script>

src/CardServiceProvider.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace Ericlagarda\NovaTextCard;
+
+use Illuminate\Support\ServiceProvider;
+use Laravel\Nova\Events\ServingNova;
+use Laravel\Nova\Nova;
+
+class CardServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        Nova::serving(function (ServingNova $event) {
+            Nova::script('nova-text-card', __DIR__.'/../dist/js/card.js');
+        });
+    }
+
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+}