quasar - npm Package Compare versions

Comparing version 1.0.0-alpha.18 to 1.0.0-alpha.19

dist/api/QCarousel.json

@@ -5,6 +5,3 @@ {
     "value": {
-      "type": [
-        "String",
-        "Number"
-      ],
+      "type": "Any",
       "desc": "Model of the component defining current panel's name; If used as Number, it does not defines panel index though but slide name's which may be an Integer; Either use this property (along with a listener for 'input' event) OR use v-model directive",
@@ -11,0 +8,0 @@ "examples": [

dist/api/QCarouselSlide.json

@@ -5,6 +5,3 @@ {
     "name": {
-      "type": [
-        "Number",
-        "String"
-      ],
+      "type": "Any",
       "desc": "Slide name",
@@ -11,0 +8,0 @@ "required": true,

dist/api/QInput.json

@@ -156,2 +156,3 @@ {
         "text",
+        "password",
         "textarea",
@@ -163,3 +164,2 @@ "email",
         "number",
-        "password",
         "url",
@@ -166,0 +166,0 @@ "time",

dist/api/QRouteTab.json

@@ -73,4 +73,11 @@ {
     "alert": {
-      "type": "Boolean",
-      "desc": "Adds an alert symbol to the tab, notifying the user there are some updates"
+      "type": [
+        "Boolean",
+        "String"
+      ],
+      "desc": "Adds an alert symbol to the tab, notifying the user there are some updates; If its value is not a Boolean, then you can specify a color",
+      "examples": [
+        "alert",
+        "alert=\"purple\""
+      ]
     },
@@ -77,0 +84,0 @@ "name": {

dist/api/QStep.json

@@ -5,6 +5,3 @@ {
     "name": {
-      "type": [
-        "Number",
-        "String"
-      ],
+      "type": "Any",
       "desc": "Panel name",
@@ -11,0 +8,0 @@ "required": true,

dist/api/QStepper.json

@@ -5,6 +5,3 @@ {
     "value": {
-      "type": [
-        "String",
-        "Number"
-      ],
+      "type": "Any",
       "desc": "Model of the component defining current panel's name; If used as Number, it does not defines panel index though but slide name's which may be an Integer; Either use this property (along with a listener for 'input' event) OR use v-model directive",
@@ -45,10 +42,2 @@ "examples": [
     },
-    "color": {
-      "type": "String",
-      "desc": "Color name for component from the Quasar Color Palette",
-      "examples": [
-        "primary",
-        "teal-10"
-      ]
-    },
     "dark": {
@@ -78,6 +67,22 @@ "type": "Boolean",
     },
-    "contractable": {
+    "contracted": {
       "type": "Boolean",
       "desc": "Hide header labels on narrow windows"
     },
+    "inactive-icon": {
+      "type": "String",
+      "desc": "Icon name following Quasar convention; make sure you have the icon library installed",
+      "examples": [
+        "map",
+        "ion-add"
+      ]
+    },
+    "inactive-color": {
+      "type": "String",
+      "desc": "Color name for component from the Quasar Color Palette",
+      "examples": [
+        "primary",
+        "teal-10"
+      ]
+    },
     "done-icon": {
@@ -84,0 +89,0 @@ "type": "String",

dist/api/QTab.json

@@ -35,4 +35,11 @@ {
     "alert": {
-      "type": "Boolean",
-      "desc": "Adds an alert symbol to the tab, notifying the user there are some updates"
+      "type": [
+        "Boolean",
+        "String"
+      ],
+      "desc": "Adds an alert symbol to the tab, notifying the user there are some updates; If its value is not a Boolean, then you can specify a color",
+      "examples": [
+        "alert",
+        "alert=\"purple\""
+      ]
     },
@@ -39,0 +46,0 @@ "name": {

dist/api/QTabPanel.json

@@ -5,6 +5,3 @@ {
     "name": {
-      "type": [
-        "Number",
-        "String"
-      ],
+      "type": "Any",
       "desc": "Panel name",
@@ -11,0 +8,0 @@ "required": true,

dist/api/QTabPanels.json

@@ -5,6 +5,3 @@ {
     "value": {
-      "type": [
-        "String",
-        "Number"
-      ],
+      "type": "Any",
       "desc": "Model of the component defining current panel's name; If used as Number, it does not defines panel index though but slide name's which may be an Integer; Either use this property (along with a listener for 'input' event) OR use v-model directive",
@@ -11,0 +8,0 @@ "examples": [

dist/api/QTimeline.json

@@ -12,6 +12,21 @@ {
     },
-    "responsive": {
-      "type": "Boolean",
-      "desc": "Use responsive mode"
+    "side": {
+      "type": "String",
+      "desc": "Side to place the timeline entries in dense and comfortable layout; For loose layout it gets overriden by QTimelineEntry side prop",
+      "default": "right",
+      "values": [
+        "left",
+        "right"
+      ]
     },
+    "layout": {
+      "type": "String",
+      "desc": "Layout of the timeline. Dense keeps content and labels on one side. Comfortable keeps content on one side and labels on the opposite side. Loose puts content on both sides.",
+      "default": "large",
+      "values": [
+        "dense",
+        "comfortable",
+        "loose"
+      ]
+    },
     "dark": {
@@ -18,0 +33,0 @@ "type": "Boolean",

dist/api/QTimelineEntry.json

@@ -18,3 +18,3 @@ {
       "type": "String",
-      "desc": "Side to place the timeline entry",
+      "desc": "Side to place the timeline entry; Works only if QTimeline layout is loose.",
       "default": "right",
@@ -24,5 +24,2 @@ "values": [
         "right"
-      ],
-      "examples": [
-        "left"
       ]
@@ -29,0 +26,0 @@ },

dist/babel-transforms/imports.js

@@ -96,2 +96,4 @@ const map = {
   "QStepperNavigation": "src/components/stepper/QStepperNavigation.js",
+  "QTabPanel": "src/components/tab-panels/QTabPanel.js",
+  "QTabPanels": "src/components/tab-panels/QTabPanels.js",
   "QMarkupTable": "src/components/table/QMarkupTable.js",
@@ -104,4 +106,2 @@ "QTable": "src/components/table/QTable.js",
   "QTab": "src/components/tabs/QTab.js",
-  "QTabPanel": "src/components/tabs/QTabPanel.js",
-  "QTabPanels": "src/components/tabs/QTabPanels.js",
   "QTabs": "src/components/tabs/QTabs.js",
@@ -108,0 +108,0 @@ "QTimeline": "src/components/timeline/QTimeline.js",

dist/lang/ar.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/bg.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/ca.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/cs.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/da.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/de.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/el.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/en-uk.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/en-us.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/es.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/fa-ir.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/fr.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/gn.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/he.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/hr.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/hu.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/id.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/it.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/ja.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/ko-kr.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/lu.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/lv.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/ms.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/nb-no.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/nl.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/pl.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/pt-br.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/pt.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/ro.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/ru.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/sk.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/sl.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/sr.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/sv.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/th.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/tr.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/uk.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/vi.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/zh-hans.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/lang/zh-hant.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/quasar.ie.polyfills.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/quasar.ie.polyfills.umd.min.js

 /*!
- * Quasar Framework v1.0.0-alpha.18
+ * Quasar Framework v1.0.0-alpha.19
  * (c) 2016-present Razvan Stoenescu
@@ -4,0 +4,0 @@ * Released under the MIT License.

dist/vetur/quasar-tags.json

@@ -1167,3 +1167,2 @@ {
       "transition-next",
-      "color",
       "dark",
@@ -1175,3 +1174,5 @@ "flat",
       "header-nav",
-      "contractable",
+      "contracted",
+      "inactive-color",
+      "inactive-icon",
       "done-icon",
@@ -1190,51 +1191,2 @@ "done-color",
   },
-  "q-tabs": {
-    "attributes": [
-      "align",
-      "breakpoint",
-      "active-color",
-      "active-bg-color",
-      "indicator-color",
-      "left-icon",
-      "right-icon",
-      "top-indicator",
-      "narrow-indicator",
-      "inline-label",
-      "no-caps",
-      "dense"
-    ],
-    "description": ""
-  },
-  "q-tab": {
-    "attributes": [
-      "ripple",
-      "icon",
-      "label",
-      "alert",
-      "name",
-      "no-caps",
-      "tabindex",
-      "disable"
-    ],
-    "description": ""
-  },
-  "q-route-tab": {
-    "attributes": [
-      "ripple",
-      "icon",
-      "label",
-      "alert",
-      "name",
-      "no-caps",
-      "tabindex",
-      "disable",
-      "to",
-      "exact",
-      "append",
-      "replace",
-      "active-class",
-      "exact-active-class"
-    ],
-    "description": ""
-  },
   "q-tab-panels": {
@@ -1326,6 +1278,56 @@ "attributes": [
   },
+  "q-tabs": {
+    "attributes": [
+      "align",
+      "breakpoint",
+      "active-color",
+      "active-bg-color",
+      "indicator-color",
+      "left-icon",
+      "right-icon",
+      "top-indicator",
+      "narrow-indicator",
+      "inline-label",
+      "no-caps",
+      "dense"
+    ],
+    "description": ""
+  },
+  "q-tab": {
+    "attributes": [
+      "ripple",
+      "icon",
+      "label",
+      "alert",
+      "name",
+      "no-caps",
+      "tabindex",
+      "disable"
+    ],
+    "description": ""
+  },
+  "q-route-tab": {
+    "attributes": [
+      "ripple",
+      "icon",
+      "label",
+      "alert",
+      "name",
+      "no-caps",
+      "tabindex",
+      "disable",
+      "to",
+      "exact",
+      "append",
+      "replace",
+      "active-class",
+      "exact-active-class"
+    ],
+    "description": ""
+  },
   "q-timeline": {
     "attributes": [
       "color",
-      "responsive",
+      "side",
+      "layout",
       "dark"
@@ -1332,0 +1334,0 @@ ],

lang/index.json

@@ -47,2 +47,6 @@ [
   {
+    "isoName": "fi",
+    "nativeName": "fi"
+  },
+  {
     "isoName": "fr",
@@ -49,0 +53,0 @@ "nativeName": "Français"

package.json

 {
   "name": "quasar",
-  "version": "1.0.0-alpha.18",
+  "version": "1.0.0-alpha.19",
   "description": "Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase",
@@ -56,2 +56,3 @@ "module": "src/index.esm.js",
     "@babel/runtime": "7.0.0-beta.52",
+    "@quasar/extras": "^1.0.0-alpha.1",
     "autoprefixer": "^8.6.5",
@@ -63,3 +64,3 @@ "babel-eslint": "^8.2.5",
     "css-loader": "^1.0.0",
-    "cssnano": "^4.0.0",
+    "cssnano": "^4.1.8",
     "eslint": "^4.15.0",
@@ -85,4 +86,3 @@ "eslint-config-standard": "^11.0.0",
     "postcss-rtl": "^1.3.1",
-    "quasar-extras": "^2.0.6",
-    "rimraf": "^2.6.2",
+    "rimraf": "^2.6.3",
     "rollup": "^0.62.0",
@@ -97,14 +97,14 @@ "rollup-plugin-buble": "^0.19.2",
     "url-loader": "^1.0.1",
-    "vue": "^2.5.17",
-    "vue-loader": "^15.2.4",
-    "vue-router": "^3.0.1",
-    "vue-server-renderer": "^2.5.17",
-    "vue-style-loader": "^4.0.2",
-    "vue-template-compiler": "^2.5.17",
-    "webpack": "^4.15.1",
+    "vue": "^2.5.22",
+    "vue-loader": "^15.6.2",
+    "vue-router": "^3.0.2",
+    "vue-server-renderer": "^2.5.22",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.5.22",
+    "webpack": "^4.29.0",
     "webpack-chain": "^4.8.0",
-    "webpack-dev-middleware": "^3.1.3",
-    "webpack-dev-server": "^3.1.4",
-    "webpack-hot-middleware": "^2.22.2",
-    "webpack-merge": "^4.1.5",
+    "webpack-dev-middleware": "^3.5.1",
+    "webpack-dev-server": "^3.1.14",
+    "webpack-hot-middleware": "^2.24.3",
+    "webpack-merge": "^4.2.1",
     "webpack-node-externals": "^1.7.2"
@@ -126,3 +126,4 @@ },
     "not dead"
-  ]
+  ],
+  "dependencies": {}
 }

src/components.js

@@ -51,4 +51,5 @@ export * from './components/ajax-bar/index.js'
 export * from './components/stepper/index.js'
+export * from './components/tab-panels/index.js'
+export * from './components/table/index.js'
 export * from './components/tabs/index.js'
-export * from './components/table/index.js'
 export * from './components/timeline/index.js'
@@ -55,0 +56,0 @@ export * from './components/toggle/index.js'

src/components/btn/QBtnDropdown.js

@@ -51,3 +51,3 @@ import Vue from 'vue'
         props: {
-          name: 'arrow_drop_down' // this.$q.icon.input.dropdown
+          name: 'arrow_drop_down' // this.$q.iconSet.input.dropdown
         },
@@ -54,0 +54,0 @@ staticClass: 'q-btn-dropdown__arrow',

src/components/carousel/QCarousel.js

@@ -56,4 +56,4 @@ import Vue from 'vue'
       const ico = [
-        this.prevIcon || this.$q.icon.carousel.left,
-        this.nextIcon || this.$q.icon.carousel.right
+        this.prevIcon || this.$q.iconSet.carousel.left,
+        this.nextIcon || this.$q.iconSet.carousel.right
       ]
@@ -67,3 +67,3 @@
     navIcon () {
-      return this.navigationIcon || this.$q.icon.carousel.navigationIcon
+      return this.navigationIcon || this.$q.iconSet.carousel.navigationIcon
     }
@@ -70,0 +70,0 @@ },

src/components/chip/QChip.js

@@ -101,3 +101,3 @@ import Vue from 'vue'
         staticClass: 'q-chip__icon q-chip__icon--left',
-        props: { name: this.selected === true ? this.$q.icon.chip.selected : this.icon }
+        props: { name: this.selected === true ? this.$q.iconSet.chip.selected : this.icon }
       }))
@@ -116,3 +116,3 @@
         staticClass: 'q-chip__icon q-chip__icon--remove cursor-pointer',
-        props: { name: this.$q.icon.chip.remove },
+        props: { name: this.$q.iconSet.chip.remove },
         attrs: { tabindex: this.computedTabindex },
@@ -119,0 +119,0 @@ nativeOn: {

src/components/color/QColor.js

@@ -15,4 +15,4 @@ import Vue from 'vue'
 import QTab from '../tabs/QTab.js'
-import QTabPanels from '../tabs/QTabPanels.js'
-import QTabPanel from '../tabs/QTabPanel.js'
+import QTabPanels from '../tab-panels/QTabPanels.js'
+import QTabPanel from '../tab-panels/QTabPanel.js'
 
@@ -237,3 +237,3 @@ const palette = [
               staticClass: 'q-color-picker__error-icon absolute no-pointer-events',
-              props: { name: this.$q.icon.type.negative }
+              props: { name: this.$q.iconSet.type.negative }
             })
@@ -283,3 +283,3 @@ ])
           props: {
-            icon: this.$q.icon.colorPicker.spectrum,
+            icon: this.$q.iconSet.colorPicker.spectrum,
             name: 'spectrum',
@@ -292,3 +292,3 @@ ripple: false
           props: {
-            icon: this.$q.icon.colorPicker.tune,
+            icon: this.$q.iconSet.colorPicker.tune,
             name: 'tune',
@@ -301,3 +301,3 @@ ripple: false
           props: {
-            icon: this.$q.icon.colorPicker.palette,
+            icon: this.$q.iconSet.colorPicker.palette,
             name: 'palette',
@@ -304,0 +304,0 @@ ripple: false

src/components/datetime/QDate.js

@@ -108,3 +108,3 @@ import Vue from 'vue'
     dateArrow () {
-      const val = [ this.$q.icon.datetime.arrowLeft, this.$q.icon.datetime.arrowRight ]
+      const val = [ this.$q.iconSet.datetime.arrowLeft, this.$q.iconSet.datetime.arrowRight ]
       return this.$q.lang.rtl ? val.reverse() : val
@@ -317,3 +317,3 @@ },
             props: {
-              icon: this.$q.icon.datetime.today,
+              icon: this.$q.iconSet.datetime.today,
               flat: true,
@@ -320,0 +320,0 @@ size: 'sm',

src/components/datetime/QTime.js

@@ -438,3 +438,3 @@ import Vue from 'vue'
             props: {
-              icon: this.$q.icon.datetime.now,
+              icon: this.$q.iconSet.datetime.now,
               unelevated: true,
@@ -441,0 +441,0 @@ size: 'sm',

src/components/editor/QEditor.js

@@ -92,3 +92,3 @@ import Vue from 'vue'
         e = this.$q.lang.editor,
-        i = this.$q.icon.editor
+        i = this.$q.iconSet.editor
 
@@ -151,3 +151,3 @@ return {
             this.$q.lang.editor.defaultFont,
-            this.$q.icon.editor.font,
+            this.$q.iconSet.editor.font,
             this.fonts
@@ -154,0 +154,0 @@ )

src/components/fab/QFab.js

@@ -66,7 +66,7 @@ import Vue from 'vue'
           staticClass: 'q-fab__icon absolute-full',
-          props: { name: this.icon || this.$q.icon.fab.icon }
+          props: { name: this.icon || this.$q.iconSet.fab.icon }
         }),
         h(QIcon, {
           staticClass: 'q-fab__active-icon absolute-full',
-          props: { name: this.activeIcon || this.$q.icon.fab.activeIcon }
+          props: { name: this.activeIcon || this.$q.iconSet.fab.activeIcon }
         })
@@ -73,0 +73,0 @@ ]),

src/components/input/input-types.js

 export default [
-  'text', 'textarea', 'email', 'search',
-  'tel', 'file', 'number',
-  'password', 'url', 'time', 'date'
+  'text', 'password', 'textarea', 'email', 'search',
+  'tel', 'number', 'url', 'time', 'date'
 ]

src/components/input/QInput.json

@@ -17,5 +17,4 @@ {
       "values": [
-        "text", "textarea", "email", "search",
-        "tel", "file", "number",
-        "password", "url", "time", "date"
+        "text", "password", "textarea", "email", "search",
+        "tel", "file", "number", "url", "time", "date"
       ],
@@ -22,0 +21,0 @@ "examples": [ "password" ]

src/components/list/QExpansionItem.js

@@ -75,3 +75,3 @@ import Vue from 'vue'
     expansionIcon () {
-      return this.expandIcon || (this.denseToggle ? this.$q.icon.expansionItem.denseIcon : this.$q.icon.expansionItem.icon)
+      return this.expandIcon || (this.denseToggle ? this.$q.iconSet.expansionItem.denseIcon : this.$q.iconSet.expansionItem.icon)
     }
@@ -78,0 +78,0 @@ },

src/components/pagination/QPagination.js

@@ -111,6 +111,6 @@ import Vue from 'vue'
       const ico = [
-        this.$q.icon.pagination.first,
-        this.$q.icon.pagination.prev,
-        this.$q.icon.pagination.next,
-        this.$q.icon.pagination.last
+        this.$q.iconSet.pagination.first,
+        this.$q.iconSet.pagination.prev,
+        this.$q.iconSet.pagination.next,
+        this.$q.iconSet.pagination.last
       ]
@@ -117,0 +117,0 @@ return this.$q.lang.rtl ? ico.reverse() : ico

src/components/pull-to-refresh/QPullToRefresh.js

@@ -182,3 +182,3 @@ import Vue from 'vue'
               props: {
-                name: this.icon || this.$q.icon.pullToRefresh.icon,
+                name: this.icon || this.$q.iconSet.pullToRefresh.icon,
                 color: this.color,
@@ -185,0 +185,0 @@ size: '32px'

src/components/rating/QRating.js

@@ -112,3 +112,3 @@ import Vue from 'vue'
           },
-          props: { name: this.icon || this.$q.icon.rating.icon },
+          props: { name: this.icon || this.$q.iconSet.rating.icon },
           attrs: { tabindex },
@@ -115,0 +115,0 @@ on: {

src/components/select/QSelect.js

@@ -188,3 +188,3 @@ import Vue from 'vue'
         ? this.dropdownIcon
-        : this.$q.icon.select.dropdownIcon
+        : this.$q.iconSet.select.dropdownIcon
     }
@@ -191,0 +191,0 @@ },

src/components/stepper/QStepper.js

@@ -18,3 +18,2 @@ import Vue from 'vue'
   props: {
-    color: String,
     dark: Boolean,
@@ -27,4 +26,6 @@
     headerNav: Boolean,
-    contractable: Boolean,
+    contracted: Boolean,
 
+    inactiveColor: String,
+    inactiveIcon: String,
     doneIcon: String,
@@ -44,3 +45,3 @@ doneColor: String,
         'q-stepper--bordered': this.bordered || (this.dark && !this.flat),
-        'q-stepper--contractable': this.contractable,
+        'q-stepper--contracted': this.contracted,
         'q-stepper--dark': this.dark
@@ -47,0 +48,0 @@ }

src/components/stepper/QStepper.json

@@ -5,6 +5,2 @@ {
   "props": {
-    "color": {
-      "extends": "color"
-    },
-
     "dark": {
@@ -37,3 +33,3 @@ "extends": "dark"
 
-    "contractable": {
+    "contracted": {
       "type": "Boolean",
@@ -43,2 +39,10 @@ "desc": "Hide header labels on narrow windows"
 
+    "inactive-icon": {
+      "extends": "icon"
+    },
+
+    "inactive-color": {
+      "extends": "color"
+    },
+
     "done-icon": {
@@ -73,3 +77,3 @@ "extends": "icon"
     },
-    
+
     "navigation": {
@@ -76,0 +80,0 @@ "desc": "Slot specific for the global navigation; Suggestion: QStepperNavigation"

src/components/stepper/StepHeader.js

@@ -48,12 +48,12 @@ import Vue from 'vue'
       if (this.isActive) {
-        return this.step.activeIcon || this.stepper.activeIcon || this.$q.icon.stepper.active
+        return this.step.activeIcon || this.stepper.activeIcon || this.$q.iconSet.stepper.active
       }
       if (this.isError) {
-        return this.step.errorIcon || this.stepper.errorIcon || this.$q.icon.stepper.error
+        return this.step.errorIcon || this.stepper.errorIcon || this.$q.iconSet.stepper.error
       }
       if (!this.isDisable && this.isDone) {
-        return this.step.doneIcon || this.stepper.doneIcon || this.$q.icon.stepper.done
+        return this.step.doneIcon || this.stepper.doneIcon || this.$q.iconSet.stepper.done
       }
 
-      return this.step.icon
+      return this.step.icon || this.stepper.inactiveIcon
     },
@@ -63,12 +63,12 @@
       if (this.isActive) {
-        return this.step.activeColor || this.stepper.activeColor || this.stepper.color
+        return this.step.activeColor || this.stepper.activeColor || this.step.color
       }
-      if (this.error) {
+      if (this.isError) {
         return this.step.errorColor || this.stepper.errorColor
       }
       if (!this.disable && this.isDone) {
-        return this.step.doneColor || this.stepper.doneColor || this.stepper.color
+        return this.step.doneColor || this.stepper.doneColor || this.step.color || this.stepper.inactiveColor
       }
 
-      return this.step.color
+      return this.step.color || this.stepper.inactiveColor
     },
@@ -75,0 +75,0 @@

src/components/table/QTh.js

@@ -40,3 +40,3 @@ import Vue from 'vue'
         h(QIcon, {
-          props: { name: this.$q.icon.table.arrowUp },
+          props: { name: this.$q.iconSet.table.arrowUp },
           staticClass: col.__iconClass
@@ -43,0 +43,0 @@ })

src/components/table/table-bottom.js

@@ -8,3 +8,3 @@ import QSelect from '../select/QSelect.js'
     navIcon () {
-      const ico = [ this.$q.icon.table.prevPage, this.$q.icon.table.nextPage ]
+      const ico = [ this.$q.iconSet.table.prevPage, this.$q.iconSet.table.nextPage ]
       return this.$q.lang.rtl ? ico.reverse() : ico
@@ -26,3 +26,3 @@ }
         return h('div', { staticClass: 'q-table__bottom row items-center q-table__bottom--nodata' }, [
-          h(QIcon, {props: { name: this.$q.icon.table.warning }}),
+          h(QIcon, {props: { name: this.$q.iconSet.table.warning }}),
           message
@@ -29,0 +29,0 @@ ])

src/components/tabs/index.js

 import QTabs from './QTabs.js'
 import QTab from './QTab.js'
 import QRouteTab from './QRouteTab.js'
-import QTabPanels from './QTabPanels.js'
-import QTabPanel from './QTabPanel.js'
 
@@ -10,5 +8,3 @@ export {
   QTab,
-  QRouteTab,
-  QTabPanels,
-  QTabPanel
+  QRouteTab
 }

src/components/tabs/QTab.js

@@ -25,3 +25,3 @@ import Vue from 'vue'
 
-    alert: Boolean,
+    alert: [Boolean, String],
 
@@ -81,3 +81,3 @@ name: {
 
-      this.icon && content.push(h(QIcon, {
+      this.icon !== void 0 && content.push(h(QIcon, {
         staticClass: 'q-tab__icon',
@@ -87,8 +87,9 @@ props: { name: this.icon }
 
-      this.label && content.push(h('div', {
+      this.label !== void 0 && content.push(h('div', {
         staticClass: 'q-tab__label'
       }, [ this.label ]))
 
-      this.alert && content.push(h('div', {
-        staticClass: 'q-tab__alert'
+      this.alert !== false && content.push(h('div', {
+        staticClass: 'q-tab__alert',
+        class: this.alert !== true ? `text-${this.alert}` : null
       }))
@@ -103,3 +104,3 @@
           staticClass: 'q-tab__content flex-center relative-position no-pointer-events non-selectable',
-          class: this.tabs.inlineLabel ? 'row no-wrap q-tab__content--inline' : 'column'
+          class: this.tabs.inlineLabel === true ? 'row no-wrap q-tab__content--inline' : 'column'
         }, content.concat(this.$slots.default))
@@ -115,3 +116,3 @@ ]
       const data = {
-        staticClass: 'q-tab relative-position self-stretch flex nowrap justify-center text-center generic-transition',
+        staticClass: 'q-tab relative-position self-stretch flex justify-center text-center generic-transition',
         class: this.classes,
@@ -118,0 +119,0 @@ attrs: {

src/components/tabs/QTab.json

@@ -16,4 +16,8 @@ {
     "alert": {
-      "type": "Boolean",
-      "desc": "Adds an alert symbol to the tab, notifying the user there are some updates"
+      "type": [ "Boolean", "String" ],
+      "desc": "Adds an alert symbol to the tab, notifying the user there are some updates; If its value is not a Boolean, then you can specify a color",
+      "examples": [
+        "alert",
+        "alert=\"purple\""
+      ]
     },
@@ -20,0 +24,0 @@

src/components/tabs/QTabs.js

@@ -305,3 +305,3 @@ import Vue from 'vue'
         class: this.leftArrow ? '' : 'invisible',
-        props: { name: this.leftIcon || this.$q.icon.tabs.left },
+        props: { name: this.leftIcon || this.$q.iconSet.tabs.left },
         nativeOn: {
@@ -325,3 +325,3 @@ mousedown: this.__scrollToStart,
         class: this.rightArrow ? '' : 'invisible',
-        props: { name: this.rightIcon || this.$q.icon.tabs.right },
+        props: { name: this.rightIcon || this.$q.iconSet.tabs.right },
         nativeOn: {
@@ -328,0 +328,0 @@ mousedown: this.__scrollToEnd,

src/components/timeline/QTimeline.js

@@ -17,3 +17,12 @@ import Vue from 'vue'
     },
-    responsive: Boolean,
+    side: {
+      type: String,
+      default: 'right',
+      validator: v => ['left', 'right'].includes(v)
+    },
+    layout: {
+      type: String,
+      default: 'dense',
+      validator: v => ['dense', 'comfortable', 'loose'].includes(v)
+    },
     dark: Boolean
@@ -26,3 +35,4 @@ },
         'q-timeline--dark': this.dark,
-        'q-timeline--responsive': this.responsive
+        [`q-timeline--${this.layout}`]: true,
+        [`q-timeline--${this.layout}--${this.side}`]: true
       }
@@ -29,0 +39,0 @@ }

src/components/timeline/QTimeline.json

@@ -7,7 +7,16 @@ {
 
-    "responsive": {
-      "type": "Boolean",
-      "desc": "Use responsive mode"
+    "side": {
+      "type": "String",
+      "desc": "Side to place the timeline entries in dense and comfortable layout; For loose layout it gets overriden by QTimelineEntry side prop",
+      "default": "right",
+      "values": [ "left", "right" ]
     },
 
+    "layout": {
+      "type": "String",
+      "desc": "Layout of the timeline. Dense keeps content and labels on one side. Comfortable keeps content on one side and labels on the opposite side. Loose puts content on both sides.",
+      "default": "large",
+      "values": [ "dense", "comfortable", "loose" ]
+    },
+
     "dark": {
@@ -14,0 +23,0 @@ "extends": "dark"

src/components/timeline/QTimelineEntry.js

@@ -40,5 +40,9 @@ import Vue from 'vue'
       return [
-        `q-timeline__entry--${this.side === 'left' ? 'left' : 'right'}`,
+        `q-timeline__entry--${this.side}`,
         this.icon ? 'q-timeline__entry--icon' : ''
       ]
+    },
+
+    reverse () {
+      return this.__timeline.layout === 'comfortable' && this.__timeline.side === 'left'
     }
@@ -49,3 +53,3 @@ },
     if (this.heading) {
-      return h('div', { staticClass: 'q-timeline__heading' }, [
+      const content = [
         h('div'),
@@ -58,9 +62,10 @@ h('div'),
         )
-      ])
+      ]
+
+      return h('div', {
+        staticClass: 'q-timeline__heading'
+      }, this.reverse === true ? content.reverse() : content)
     }
 
-    return h('li', {
-      staticClass: `q-timeline__entry`,
-      class: this.classes
-    }, [
+    const content = [
       h('div', { staticClass: 'q-timeline__subtitle' }, [
@@ -83,4 +88,9 @@ h('span', this.subtitle)
       ].concat(this.$slots.default))
-    ])
+    ]
+
+    return h('li', {
+      staticClass: 'q-timeline__entry',
+      class: this.classes
+    }, this.reverse === true ? content.reverse() : content)
   }
 })

src/components/timeline/QTimelineEntry.json

@@ -17,6 +17,5 @@ {
       "type": "String",
-      "desc": "Side to place the timeline entry",
+      "desc": "Side to place the timeline entry; Works only if QTimeline layout is loose.",
       "default": "right",
-      "values": [ "left", "right" ],
-      "examples": [ "left" ]
+      "values": [ "left", "right" ]
     },
@@ -23,0 +22,0 @@

src/components/tree/QTree.js

@@ -75,3 +75,3 @@ import Vue from 'vue'
     computedIcon () {
-      return this.icon || this.$q.icon.tree.icon
+      return this.icon || this.$q.iconSet.tree.icon
     },
@@ -78,0 +78,0 @@

src/components/uploader/uploader-base-mixin.js

@@ -296,3 +296,3 @@ import QBtn from '../btn/QBtn.js'
           props: {
-            icon: this.$q.icon.uploader[icon],
+            icon: this.$q.iconSet.uploader[icon],
             flat: true,
@@ -361,3 +361,3 @@ dense: true
               props: {
-                name: this.$q.icon.type.negative,
+                name: this.$q.iconSet.type.negative,
                 color: 'negative'
@@ -391,3 +391,3 @@ }
                 flat: true,
-                icon: this.$q.icon.uploader[file.__status === 'uploaded' ? 'done' : 'clear']
+                icon: this.$q.iconSet.uploader[file.__status === 'uploaded' ? 'done' : 'clear']
               },
@@ -394,0 +394,0 @@ on: {

src/index.umd.js

@@ -11,3 +11,3 @@ import Vue from 'vue'
 import lang from './lang.js'
-import icons from './icons.js'
+import iconSet from './icon-set.js'
 
@@ -31,3 +31,3 @@ if (Vue === void 0) {
   lang,
-  icons,
+  iconSet,
   components,
@@ -34,0 +34,0 @@ directives,

src/install.js

@@ -8,3 +8,3 @@ import './polyfills.js'
 import Body from './body.js'
-import Icons from './icons.js'
+import IconSet from './icon-set.js'
 
@@ -32,3 +32,3 @@ export const queues = {
   Lang.install($q, queues, opts.lang)
-  Icons.install($q, opts.iconSet)
+  IconSet.install($q, opts.iconSet)
 
@@ -35,0 +35,0 @@ if (isSSR) {

src/mixins/panel-child.json

 {
   "props": {
     "name": {
-      "type": [ "Number", "String" ],
+      "type": "Any",
       "desc": "Panel name",
@@ -6,0 +6,0 @@ "required": true,

src/mixins/panel-parent.json

 {
   "props": {
     "value": {
-      "type": [ "String", "Number" ],
+      "type": "Any",
       "desc": "Model of the component defining current panel's name; If used as Number, it does not defines panel index though but slide name's which may be an Integer; Either use this property (along with a listener for 'input' event) OR use v-model directive",
@@ -6,0 +6,0 @@ "examples": [ "v-model=\"panelName\"" ]

src/mixins/panel.js

@@ -10,3 +10,2 @@ import TouchSwipe from '../directives/TouchSwipe'
     value: {
-      type: [Number, String],
       required: true
@@ -179,3 +178,2 @@ },
     name: {
-      type: [Number, String],
       required: true
@@ -182,0 +180,0 @@ },

src/vue-plugin.js

 import install from './install.js'
 import { version } from '../package.json'
 import lang from './lang.js'
-import icons from './icons.js'
+import iconSet from './icon-set.js'
 import ssrUpdate from './ssr-update.js'
@@ -11,4 +11,4 @@
   lang,
-  icons,
+  iconSet,
   ssrUpdate
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4642783

increased by0.11%

Worsened metrics

Number of package files

753

decreased by-0.26%

Lines of code

109401

decreased by-0.35%

No dependency changes