From 9fab1d083b69c8ed1fc1b829a24260e014a8a219 Mon Sep 17 00:00:00 2001 From: Alies Lapatsin Date: Mon, 9 Dec 2019 17:44:51 +0300 Subject: [PATCH] #6 Add an option to ignore standard Nova card styling --- README.md | 16 +++++++--- dist/js/card.js | 2 +- dist/mix-manifest.json | 2 +- resources/js/components/Card.vue | 51 ++++++++++++++++---------------- src/HtmlCard.php | 19 ++++++++++-- 5 files changed, 56 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 5245633..7a1371b 100644 --- a/README.md +++ b/README.md @@ -32,14 +32,22 @@ public function cards() ### Options - Set content - - `->html('string')`: Set HTML or plain content. - - `->markdown('string')`: Set Markdown content that will be converted into HTML. + - `->html('

Hello!

')`: Set HTML or plain content. + - `->markdown('# Hello!')`: Set Markdown content that will be converted into HTML. - `->view('path.to.view', [])`: Specify blade view file and optionally pass an array of data to view. - Styling - - `->center(boolean)`: Center card's content. + - `->center(false)`: Center card's content. `false` by default. + - `->withoutCardStyles(true)`: Whether to use standard Nova Card styles for a card (background, padding, etc). `false` by default. -### Changelog +## Why this package? +There are a few packages with similar functionality. +Our package provides an API to cover all cases covered by these packages plus additionally provides some unique features like: + - markdown support + - easy switch between class Nova-card look and raw-HTML look + - Simple, Laravel-like API + +## Changelog Please see [Releases](https://github.com/InteractionDesignFoundation/nova-html-card/releases) for more information on what has changed recently. diff --git a/dist/js/card.js b/dist/js/card.js index 7cb8b92..434546e 100644 --- a/dist/js/card.js +++ b/dist/js/card.js @@ -1 +1 @@ -!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}({0:function(e,t,n){e.exports=n("v8wI")},AYwm:function(e,t,n){var r=n("I1Od");"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n("rjj0")("6aa44630",r,!0,{})},BpPk:function(e,t,n){var r=n("ZCbP");"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n("rjj0")("36c5fd10",r,!0,{})},"FZ+f":function(e,t){e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=function(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var o=(i=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */"),s=r.sources.map(function(e){return"/*# sourceURL="+r.sourceRoot+e+" */"});return[n].concat(s).concat([o]).join("\n")}var i;return[n].join("\n")}(t,e);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;op{margin-bottom:1em}",""])},UFKg:function(e,t,n){var r=n("VU/8")(n("mwy9"),n("jVOn"),!1,function(e){n("AYwm"),n("BpPk")},"data-v-9cf17c80",null);e.exports=r.exports},"VU/8":function(e,t){e.exports=function(e,t,n,r,o,s){var i,a=e=e||{},c=typeof e.default;"object"!==c&&"function"!==c||(i=e,a=e.default);var u,f="function"==typeof a?a.options:a;if(t&&(f.render=t.render,f.staticRenderFns=t.staticRenderFns,f._compiled=!0),n&&(f.functional=!0),o&&(f._scopeId=o),s?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},f._ssrRegister=u):r&&(u=r),u){var d=f.functional,p=d?f.render:f.beforeCreate;d?(f._injectStyles=u,f.render=function(e,t){return u.call(t),p(e,t)}):f.beforeCreate=p?[].concat(p,u):[u]}return{esModule:i,exports:a,options:f}}},ZCbP:function(e,t,n){(e.exports=n("FZ+f")(!1)).push([e.i,".card-panel[data-v-9cf17c80]{min-height:150px;height:auto}",""])},jVOn:function(e,t){e.exports={render:function(){var e=this.$createElement,t=this._self._c||e;return t("card",{staticClass:"flex flex-col justify-center htmlCard",class:this.cardClassList},[t("div",{staticClass:"px-3 py-3"},[t("section",{staticClass:"htmlCard__content",domProps:{innerHTML:this._s(this.card.content)}})])])},staticRenderFns:[]}},mwy9:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:["card"],computed:{textClassList:function(){return this.card.center?"text-center":""},cardClassList:function(){var e=[];return this.card.center&&e.push("items-center"),e.join(" ")}},mounted:function(){}}},rjj0:function(e,t,n){var r="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!r)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o=n("tTVk"),s={},i=r&&(document.head||document.getElementsByTagName("head")[0]),a=null,c=0,u=!1,f=function(){},d=null,p="data-vue-ssr-id",l="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function h(e){for(var t=0;tn.parts.length&&(r.parts.length=n.parts.length)}else{var i=[];for(o=0;op{margin-bottom:1em}",""])},mwy9:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:["card"],computed:{cardClassList:function(){var t="";return this.card.center&&(t+=" flex flex-col justify-center text-center"),t}}}},rjj0:function(t,e,n){var r="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!r)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o=n("tTVk"),s={},i=r&&(document.head||document.getElementsByTagName("head")[0]),a=null,c=0,u=!1,f=function(){},d=null,l="data-vue-ssr-id",p="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function h(t){for(var e=0;en.parts.length&&(r.parts.length=n.parts.length)}else{var i=[];for(o=0;o - +
+
+
+
+ +
-
-
+
+
diff --git a/src/HtmlCard.php b/src/HtmlCard.php index e794ea4..b030a6a 100644 --- a/src/HtmlCard.php +++ b/src/HtmlCard.php @@ -26,6 +26,7 @@ public function __construct($component = null) $this->withMeta([ 'center' => false, + 'withoutCardStyles' => false, 'content' => '', ]); } @@ -80,12 +81,24 @@ public function view(string $view, array $viewData = []) /** * Center card's content * - * @param bool $boolean + * @param bool $centerContent * * @return HtmlCard */ - public function center($boolean = true) + public function center(bool $centerContent = true) { - return $this->withMeta(['center' => $boolean]); + return $this->withMeta(['center' => $centerContent]); + } + + /** + * Whether to use standard Nova Card styles for a card (background, padding, etc) + * + * @param bool $withoutStyles + * + * @return HtmlCard + */ + public function withoutCardStyles(bool $withoutStyles = true) + { + return $this->withMeta(['withoutCardStyles' => $withoutStyles]); } }