diff --git a/dist/vue-line-clamp.js b/dist/vue-line-clamp.js index a75da9b..a8c5775 100644 --- a/dist/vue-line-clamp.js +++ b/dist/vue-line-clamp.js @@ -1,2 +1,2 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["vue-line-clamp"]=t():e["vue-line-clamp"]=t()}(window,function(){return 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}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return 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)}([function(e,t,n){"use strict";n.r(t);function r(e,t,n){if(n){var r=parseInt(t.arg);isNaN(r)&&(console.warn("line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px"),r=16);var o=r*n;e.style.maxHeight=o?o+"px":"",e.style.overflowX="hidden",e.style.lineHeight=r+"px"}else e.style.maxHeight=e.style.overflowX=""}var o=function(e,t,n){var r=parseInt(t.value);isNaN(r)?console.error("Parameter for vue-line-clamp must be a number"):r!==e.vLineClampValue&&(e.vLineClampValue=r,n?n(e,t,r):e.style.webkitLineClamp=r||"")},i={install:function(e,t){t=Object.assign({importCss:!1,textOverflow:"ellipsis"},t);var n="\n display: block;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n text-overflow: ".concat(t.textOverflow,";\n ");if(t.importCss){var i=window.document.styleSheets,l=".vue-line-clamp{".concat(n,"}");if(i&&i[0]&&i.insertRule)i.insertRule(l);else{var a=window.document.createElement("style");a.id="vue-line-clamp",a.appendChild(window.document.createTextNode(l)),window.document.head.appendChild(a)}}var u="webkitLineClamp"in document.body.style?void 0:t.fallbackFunc||r;e.directive("line-clamp",{currentValue:0,bind:function(e){t.importCss?e.classList.add("vue-line-clamp"):e.style.cssText+=n},inserted:function(e,t){return o(e,t,u)},updated:function(e,t){return o(e,t,u)},componentUpdated:function(e,t){return o(e,t,u)}})}};t.default=i}]).default}); +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["vue-line-clamp"]=t():e["vue-line-clamp"]=t()}(window,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},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)}([function(e,t,n){"use strict";n.r(t);function o(e,t,n){if(n){var o=parseInt(t.arg);isNaN(o)&&(console.warn("line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px"),o=16);var r=o*n;e.style.maxHeight=r?r+"px":"",e.style.overflowX="hidden",e.style.lineHeight=o+"px"}else e.style.maxHeight=e.style.overflowX=""}var r=function(e,t,n){var o=parseInt(t.value);isNaN(o)?console.error("Parameter for vue-line-clamp must be a number"):o!==e.vLineClampValue&&(e.vLineClampValue=o,n?n(e,t,o):e.style.webkitLineClamp=o||"")},i={install:function(e,t){var n=(t=Object.assign({importCss:!1,textOverflow:"ellipsis",cssImportant:!1},t)).cssImportant?"!important":"",i="\n display: block ".concat(n,";\n display: -webkit-box ").concat(n,";\n -webkit-box-orient: vertical ").concat(n,";\n overflow: hidden ").concat(n,";\n word-break: break-all ").concat(n,";\n text-overflow: ").concat(t.textOverflow," ").concat(n,";\n ");if(t.importCss){var l=window.document.styleSheets,a=".vue-line-clamp{".concat(i,"}");if(l&&l[0]&&l.insertRule)l.insertRule(a);else{var c=window.document.createElement("style");c.id="vue-line-clamp",c.appendChild(window.document.createTextNode(a)),window.document.head.appendChild(c)}}var u="webkitLineClamp"in document.body.style?void 0:t.fallbackFunc||o;e.directive("line-clamp",{currentValue:0,bind:function(e){t.importCss?e.classList.add("vue-line-clamp"):e.style.cssText+=i},inserted:function(e,t){return r(e,t,u)},updated:function(e,t){return r(e,t,u)},componentUpdated:function(e,t){return r(e,t,u)}})}};t.default=i}]).default}); //# sourceMappingURL=vue-line-clamp.js.map \ No newline at end of file diff --git a/dist/vue-line-clamp.js.map b/dist/vue-line-clamp.js.map index 59f50dc..5038b00 100644 --- a/dist/vue-line-clamp.js.map +++ b/dist/vue-line-clamp.js.map @@ -1 +1 @@ -{"version":3,"sources":["webpack://vue-line-clamp/webpack/universalModuleDefinition","webpack://vue-line-clamp/webpack/bootstrap","webpack://vue-line-clamp/./src/index.js"],"names":["root","factory","exports","module","define","amd","window","installedModules","__webpack_require__","moduleId","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","__webpack_exports__","defaultFallbackFunc","el","bindings","lines","lineHeight","parseInt","arg","isNaN","console","warn","maxHeight","style","overflowX","truncateText","useFallbackFunc","error","webkitLineClamp","VueLineClamp","install","Vue","options","assign","importCss","textOverflow","styles","concat","stylesheets","document","styleSheets","rule","insertRule","link","createElement","id","appendChild","createTextNode","head","body","undefined","fallbackFunc","directive","currentValue","classList","add","cssText","inserted","updated","componentUpdated"],"mappings":"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","file":"vue-line-clamp.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"vue-line-clamp\"] = factory();\n\telse\n\t\troot[\"vue-line-clamp\"] = factory();\n})(window, function() {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","const currentValueProp = 'vLineClampValue';\n\nfunction defaultFallbackFunc(el, bindings, lines) {\n if (lines) {\n let lineHeight = parseInt(bindings.arg);\n if (isNaN(lineHeight)) {\n console.warn(\n 'line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px'\n );\n lineHeight = 16;\n }\n\n let maxHeight = lineHeight * lines;\n\n el.style.maxHeight = maxHeight ? maxHeight + 'px' : '';\n el.style.overflowX = 'hidden';\n el.style.lineHeight = lineHeight + 'px'; // to ensure consistency\n } else {\n el.style.maxHeight = el.style.overflowX = '';\n }\n}\n\nconst truncateText = function(el, bindings, useFallbackFunc) {\n let lines = parseInt(bindings.value);\n if (isNaN(lines)) {\n console.error('Parameter for vue-line-clamp must be a number');\n return;\n } else if (lines !== el[currentValueProp]) {\n el[currentValueProp] = lines;\n\n if (useFallbackFunc) {\n useFallbackFunc(el, bindings, lines);\n } else {\n el.style.webkitLineClamp = lines ? lines : '';\n }\n }\n};\n\nconst VueLineClamp = {\n install(Vue, options) {\n options = Object.assign(\n { importCss: false, textOverflow: 'ellipsis' },\n options\n );\n\n const styles = `\n display: block;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n text-overflow: ${options.textOverflow};\n `;\n\n if (options.importCss) {\n const stylesheets = window.document.styleSheets,\n rule = `.vue-line-clamp{${styles}}`;\n if (stylesheets && stylesheets[0] && stylesheets.insertRule) {\n stylesheets.insertRule(rule);\n } else {\n let link = window.document.createElement('style');\n link.id = 'vue-line-clamp';\n link.appendChild(window.document.createTextNode(rule));\n window.document.head.appendChild(link);\n }\n }\n\n const useFallbackFunc =\n 'webkitLineClamp' in document.body.style\n ? undefined\n : options.fallbackFunc || defaultFallbackFunc;\n\n Vue.directive('line-clamp', {\n currentValue: 0,\n bind(el) {\n if (!options.importCss) {\n el.style.cssText += styles;\n } else {\n el.classList.add('vue-line-clamp');\n }\n },\n inserted: (el, bindings) => truncateText(el, bindings, useFallbackFunc),\n updated: (el, bindings) => truncateText(el, bindings, useFallbackFunc),\n componentUpdated: (el, bindings) =>\n truncateText(el, bindings, useFallbackFunc),\n });\n },\n};\n\nexport default VueLineClamp;\n"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack://vue-line-clamp/webpack/universalModuleDefinition","webpack://vue-line-clamp/webpack/bootstrap","webpack://vue-line-clamp/./src/index.js"],"names":["root","factory","exports","module","define","amd","window","installedModules","__webpack_require__","moduleId","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","__webpack_exports__","defaultFallbackFunc","el","bindings","lines","lineHeight","parseInt","arg","isNaN","console","warn","maxHeight","style","overflowX","truncateText","useFallbackFunc","error","webkitLineClamp","VueLineClamp","install","Vue","options","important","assign","importCss","textOverflow","cssImportant","styles","concat","stylesheets","document","styleSheets","rule","insertRule","link","createElement","id","appendChild","createTextNode","head","body","undefined","fallbackFunc","directive","currentValue","classList","add","cssText","inserted","updated","componentUpdated"],"mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,eAAAC,IACAD,OAAA,GAAAH,GACA,iBAAAC,QACAA,QAAA,kBAAAD,IAEAD,EAAA,kBAAAC,IARA,CASCK,OAAA,WACD,mBCTA,IAAAC,EAAA,GAGA,SAAAC,EAAAC,GAGA,GAAAF,EAAAE,GACA,OAAAF,EAAAE,GAAAP,QAGA,IAAAC,EAAAI,EAAAE,GAAA,CACAC,EAAAD,EACAE,GAAA,EACAT,QAAA,IAUA,OANAU,EAAAH,GAAAI,KAAAV,EAAAD,QAAAC,IAAAD,QAAAM,GAGAL,EAAAQ,GAAA,EAGAR,EAAAD,QA0DA,OArDAM,EAAAM,EAAAF,EAGAJ,EAAAO,EAAAR,EAGAC,EAAAQ,EAAA,SAAAd,EAAAe,EAAAC,GACAV,EAAAW,EAAAjB,EAAAe,IACAG,OAAAC,eAAAnB,EAAAe,EAAA,CAA0CK,YAAA,EAAAC,IAAAL,KAK1CV,EAAAgB,EAAA,SAAAtB,GACA,oBAAAuB,eAAAC,aACAN,OAAAC,eAAAnB,EAAAuB,OAAAC,YAAA,CAAwDC,MAAA,WAExDP,OAAAC,eAAAnB,EAAA,cAAiDyB,OAAA,KAQjDnB,EAAAoB,EAAA,SAAAD,EAAAE,GAEA,GADA,EAAAA,IAAAF,EAAAnB,EAAAmB,IACA,EAAAE,EAAA,OAAAF,EACA,KAAAE,GAAA,iBAAAF,QAAAG,WAAA,OAAAH,EACA,IAAAI,EAAAX,OAAAY,OAAA,MAGA,GAFAxB,EAAAgB,EAAAO,GACAX,OAAAC,eAAAU,EAAA,WAAyCT,YAAA,EAAAK,UACzC,EAAAE,GAAA,iBAAAF,EAAA,QAAAM,KAAAN,EAAAnB,EAAAQ,EAAAe,EAAAE,EAAA,SAAAA,GAAgH,OAAAN,EAAAM,IAAqBC,KAAA,KAAAD,IACrI,OAAAF,GAIAvB,EAAA2B,EAAA,SAAAhC,GACA,IAAAe,EAAAf,KAAA2B,WACA,WAA2B,OAAA3B,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAK,EAAAQ,EAAAE,EAAA,IAAAA,GACAA,GAIAV,EAAAW,EAAA,SAAAiB,EAAAC,GAAsD,OAAAjB,OAAAkB,UAAAC,eAAA1B,KAAAuB,EAAAC,IAGtD7B,EAAAgC,EAAA,GAIAhC,IAAAiC,EAAA,kCClFAjC,EAAAgB,EAAAkB,GAEA,SAASC,EAAoBC,EAAIC,EAAUC,GACzC,GAAIA,EAAO,CACT,IAAIC,EAAaC,SAASH,EAASI,KAC/BC,MAAMH,KACRI,QAAQC,KACN,8FAEFL,EAAa,IAGf,IAAIM,EAAYN,EAAaD,EAE7BF,EAAGU,MAAMD,UAAYA,EAAYA,EAAY,KAAO,GACpDT,EAAGU,MAAMC,UAAY,SACrBX,EAAGU,MAAMP,WAAaA,EAAa,UAEnCH,EAAGU,MAAMD,UAAYT,EAAGU,MAAMC,UAAY,GAI9C,IAAMC,EAAe,SAASZ,EAAIC,EAAUY,GAC1C,IAAIX,EAAQE,SAASH,EAASlB,OAC1BuB,MAAMJ,GACRK,QAAQO,MAAM,iDAELZ,IAAUF,EAAE,kBACrBA,EAAE,gBAAqBE,EAEnBW,EACFA,EAAgBb,EAAIC,EAAUC,GAE9BF,EAAGU,MAAMK,gBAAkBb,GAAgB,KAK3Cc,EAAe,CACnBC,QADmB,SACXC,EAAKC,GAMX,IAAMC,GALND,EAAU3C,OAAO6C,OACf,CAAEC,WAAW,EAAOC,aAAc,WAAYC,cAAc,GAC5DL,IAGwBK,aAAe,aAAe,GAElDC,EAAM,0BAAAC,OACON,EADP,kCAAAM,OAEaN,EAFb,0CAAAM,OAGqBN,EAHrB,8BAAAM,OAISN,EAJT,mCAAAM,OAKcN,EALd,4BAAAM,OAMOP,EAAQI,aANf,KAAAG,OAM+BN,EAN/B,WASZ,GAAID,EAAQG,UAAW,CACrB,IAAMK,EAAcjE,OAAOkE,SAASC,YAClCC,EAAI,mBAAAJ,OAAsBD,EAAtB,KACN,GAAIE,GAAeA,EAAY,IAAMA,EAAYI,WAC/CJ,EAAYI,WAAWD,OAClB,CACL,IAAIE,EAAOtE,OAAOkE,SAASK,cAAc,SACzCD,EAAKE,GAAK,iBACVF,EAAKG,YAAYzE,OAAOkE,SAASQ,eAAeN,IAChDpE,OAAOkE,SAASS,KAAKF,YAAYH,IAIrC,IAAMnB,EACJ,oBAAqBe,SAASU,KAAK5B,WAC/B6B,EACApB,EAAQqB,cAAgBzC,EAE9BmB,EAAIuB,UAAU,aAAc,CAC1BC,aAAc,EACdpD,KAF0B,SAErBU,GACEmB,EAAQG,UAGXtB,EAAG2C,UAAUC,IAAI,kBAFjB5C,EAAGU,MAAMmC,SAAWpB,GAKxBqB,SAAU,SAAC9C,EAAIC,GAAL,OAAkBW,EAAaZ,EAAIC,EAAUY,IACvDkC,QAAS,SAAC/C,EAAIC,GAAL,OAAkBW,EAAaZ,EAAIC,EAAUY,IACtDmC,iBAAkB,SAAChD,EAAIC,GAAL,OAChBW,EAAaZ,EAAIC,EAAUY,QAKpBG","file":"vue-line-clamp.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"vue-line-clamp\"] = factory();\n\telse\n\t\troot[\"vue-line-clamp\"] = factory();\n})(window, function() {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","const currentValueProp = 'vLineClampValue';\n\nfunction defaultFallbackFunc(el, bindings, lines) {\n if (lines) {\n let lineHeight = parseInt(bindings.arg);\n if (isNaN(lineHeight)) {\n console.warn(\n 'line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px'\n );\n lineHeight = 16;\n }\n\n let maxHeight = lineHeight * lines;\n\n el.style.maxHeight = maxHeight ? maxHeight + 'px' : '';\n el.style.overflowX = 'hidden';\n el.style.lineHeight = lineHeight + 'px'; // to ensure consistency\n } else {\n el.style.maxHeight = el.style.overflowX = '';\n }\n}\n\nconst truncateText = function(el, bindings, useFallbackFunc) {\n let lines = parseInt(bindings.value);\n if (isNaN(lines)) {\n console.error('Parameter for vue-line-clamp must be a number');\n return;\n } else if (lines !== el[currentValueProp]) {\n el[currentValueProp] = lines;\n\n if (useFallbackFunc) {\n useFallbackFunc(el, bindings, lines);\n } else {\n el.style.webkitLineClamp = lines ? lines : '';\n }\n }\n};\n\nconst VueLineClamp = {\n install(Vue, options) {\n options = Object.assign(\n { importCss: false, textOverflow: 'ellipsis', cssImportant: false },\n options\n );\n \n const important = options.cssImportant ? '!important' : '';\n \n const styles = `\n display: block ${important};\n display: -webkit-box ${important};\n -webkit-box-orient: vertical ${important};\n overflow: hidden ${important};\n word-break: break-all ${important};\n text-overflow: ${options.textOverflow} ${important};\n `;\n\n if (options.importCss) {\n const stylesheets = window.document.styleSheets,\n rule = `.vue-line-clamp{${styles}}`;\n if (stylesheets && stylesheets[0] && stylesheets.insertRule) {\n stylesheets.insertRule(rule);\n } else {\n let link = window.document.createElement('style');\n link.id = 'vue-line-clamp';\n link.appendChild(window.document.createTextNode(rule));\n window.document.head.appendChild(link);\n }\n }\n\n const useFallbackFunc =\n 'webkitLineClamp' in document.body.style\n ? undefined\n : options.fallbackFunc || defaultFallbackFunc;\n\n Vue.directive('line-clamp', {\n currentValue: 0,\n bind(el) {\n if (!options.importCss) {\n el.style.cssText += styles;\n } else {\n el.classList.add('vue-line-clamp');\n }\n },\n inserted: (el, bindings) => truncateText(el, bindings, useFallbackFunc),\n updated: (el, bindings) => truncateText(el, bindings, useFallbackFunc),\n componentUpdated: (el, bindings) =>\n truncateText(el, bindings, useFallbackFunc),\n });\n },\n};\n\nexport default VueLineClamp;\n"],"sourceRoot":""} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 5608960..ab46b86 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vue-line-clamp", - "version": "1.3.1", + "version": "1.3.2", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -3851,7 +3851,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -4266,7 +4267,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -4322,6 +4324,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4365,12 +4368,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, diff --git a/src/index.js b/src/index.js index 67d2f9a..e4e199e 100644 --- a/src/index.js +++ b/src/index.js @@ -39,17 +39,19 @@ const truncateText = function(el, bindings, useFallbackFunc) { const VueLineClamp = { install(Vue, options) { options = Object.assign( - { importCss: false, textOverflow: 'ellipsis' }, + { importCss: false, textOverflow: 'ellipsis', cssImportant: false }, options ); - + + const important = options.cssImportant ? '!important' : ''; + const styles = ` - display: block; - display: -webkit-box; - -webkit-box-orient: vertical; - overflow: hidden; - word-break: break-all; - text-overflow: ${options.textOverflow}; + display: block ${important}; + display: -webkit-box ${important}; + -webkit-box-orient: vertical ${important}; + overflow: hidden ${important}; + word-break: break-all ${important}; + text-overflow: ${options.textOverflow} ${important}; `; if (options.importCss) {