@quasar/quasar-app-extension-qactivity 1.0.0-beta.5 → 2.0.0

package/LICENSE

@@ -1,6 +1,6 @@
-MIT License
+The MIT License (MIT)
 
-Copyright (c) 2019 Quasar Framework
+Copyright (c) Jeff Galbraith <jeff@quasar.dev>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -9,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -1,128 +1,23 @@
-QActivity (@quasar/qactivity)
-===
+# Quasar App Extension QActivity
 
-![official icon](https://img.shields.io/badge/Quasar%201.0-Official%20UI%20App%20Extension-blue.svg)
-![npm (scoped)](https://img.shields.io/npm/v/@quasar/quasar-app-extension-qactivity.svg?style=plastic)
-[![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/quasarframework/app-extension-qactivity.svg)]()
-[![GitHub repo size in bytes](https://img.shields.io/github/repo-size/quasarframework/app-extension-qactivity.svg)]()
-[![npm](https://img.shields.io/npm/dt/@quasar/quasar-app-extension-qactivity.svg)](https://www.npmjs.com/package/@quasar/quasar-app-extension-qactivity)
-
-QActivity is an `UI App Extension` for [Quasar Framework v1](https://v1.quasar-framework.org/). It will not work with legacy versions of Quasar Framework.
-
-This work is currently in `beta` and there are expected changes while things get worked out. Your help with testing is greatly appreciated.
-
-# Info
-QActivity is the smaller sister to [QTimeline](https://v1.quasar-framework.org/vue-components/timeline) and can be used to create an activity list.
+The QActivity app extension (@quasar/quasar-app-extension-qactivity) installs and manages the [QActivity UI](https://github.com/quasarframework/quasar-ui-qactivity/tree/main/ui) component.
 
-One of the most important actions is the ability to adjust the `QActivity` bar distance and the `QActivityItem` icon distance. This is needed when you adjust margins, padding or icon size to make everything line up properly. Therefore, when making an activity list, it is recommended to keep everything the same. If you do use different icon sizes, you will need to adjust the `icon-distance` property appropriately for each `QActivityItem`.
+![@quasar/quasar-app-extension-qactivity](https://img.shields.io/npm/v/@quasar/quasar-app-extension-qactivity?label=@quasar/quasar-app-extension-qactivity)
+[![npm](https://img.shields.io/npm/dt/@quasar/quasar-app-extension-qactivity.svg)](https://www.npmjs.com/package/@quasar/quasar-app-extension-qactivity)
 
 # Install
-To add this App Extension to your Quasar application, run the following (in your Quasar app folder):
-```
+```bash
 quasar ext add @quasar/qactivity
 ```
+Quasar CLI will retrieve it from NPM and install the extension.
 
-# Describe
-You can use `quasar describe QActivity` or `quasar describe QActivityItem`
-
-# Test Project
-In **demo** folder of **app-extension-qactivity**.
-
-# Demo
-Can be found [here](https://quasarframework.github.io/app-extension-qactivity).
-
-# Example Code
-Be sure to check out the Test Project for more examples.
-```
-<q-activity
-  dense
-  bar-color="red"
-  bar-width="1px"
-  bar-distance="15px"
-  class="bg-blue-grey-1"
->
-  <q-activity-item
-    icon="photo"
-    icon-color="blue"
-    icon-text-color="white"
-    icon-size="1rem"
-    icon-font-size="0.75rem"
-    :icon-square="true"
-    style="padding-bottom:5px;padding-top:5px;"
-  >
-    <q-parallax
-      :height="100"
-      src="https://cdn.quasar.dev/img/parallax2.jpg"
-    />
-  </q-activity-item>
-  <q-activity-item
-    icon="list"
-    icon-color="orange-8"
-    icon-text-color="white"
-    icon-size="1rem"
-    icon-font-size="0.75rem"
-    :icon-square="true"
-    class="bg-blue-grey-11"
-    style="padding-bottom:5px;padding-top:5px;"
-  >
-    <q-item>
-      <q-item-section>
-        <q-item-label>QItem</q-item-label>
-        <q-item-label caption lines="2">Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.</q-item-label>
-      </q-item-section>
-
-      <q-item-section side top>
-        <q-item-label caption>5 min ago</q-item-label>
-        <q-icon name="star" color="yellow" />
-      </q-item-section>
-    </q-item>
-  </q-activity-item>
-  <q-activity-item
-    v-for="(item, index) in data1"
-    :key="index"
-    :icon="item.icon"
-    :icon-color="item.iconColor"
-    :icon-text-color="item.iconTextColor"
-    :icon-size="item.iconSize"
-    :icon-font-size="item.iconFontSize"
-    :icon-square="item.iconSquare"
-    :icon-image="item.iconImage"
-    :class="{'bg-blue-grey-11': index % 2 }"
-  >
-    <div class="inline-block vertical-middle middle-text">
-      {{ item.text }}
-    </div>
-    <div class="inline-block vertical-middle side-text">
-      {{ item.time }}
-    </div>
-  </q-activity-item>
-</q-activity>
+# Uninstall
+```bash
+quasar ext remove @quasar/qactivity
 ```
 
-# QActivity Vue Properties
-| Vue&nbsp;Property | Type	| Description |
-|---|---|---|
-| dense | Boolean | Dense mode; occupies less space |
-| bar-color | String | CSS color (no Quasar colors allowed here) |
-| bar-width | String | Size in CSS units, including unit name |
-| bar-distance | String | Size in CSS units, including unit name |
-
-QActivity has no events or methods. It has a single "default" slot. You can put anything into this slot, but QActivityItem is expected.
-
-# QActivityItem Vue Properties
-| Vue&nbsp;Property | Type	| Description |
-|---|---|---|
-| icon | Boolean | Icon name following Quasar convention; make sure you have the icon library installed |
-| icon-color | String | Color name for icon from the Quasar Color Palette |
-| icon-text-color | String | Color name for icon text from the Quasar Color Palette |
-| icon-size | String | Size in CSS units, including unit name |
-| icon-font-size | String | Size in CSS units, including unit name |
-| icon-square | Boolean | Removes border-radius so borders are squared |
-| icon-rounded | Boolean | Applies a small standard border-radius for a squared shape of the component |
-| icon-image | String | Path to image to use. If used, do not also use `icon`, `icon-color`, `icon-text-color` or `icon-font-size` |
-| icon-distance | String | Size in CSS units, including unit name. Used to help center icons on the bar |
-
-QActivityItem has no events or methods. It has a single "default" slot. You can put anything into this slot.
-
 # Donate
-If you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev).
+If you appreciate the work that went into this, please consider donating to [Quasar](https://donate.quasar.dev) or [Jeff](https://github.com/sponsors/hawkeye64).
+
+# License
+MIT (c) Jeff Galbraith <jeff@quasar.dev>

package/jsconfig.json

@@ -0,0 +1,9 @@
+
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6"
+  },
+  "exclude": ["node_modules"],
+  "include": ["src/**/*"]
+}

package/package.json

@@ -1,45 +1,42 @@
 {
   "name": "@quasar/quasar-app-extension-qactivity",
-  "version": "1.0.0-beta.5",
+  "version": "2.0.0",
   "description": "QActivity is an app extension for Quasar for making an activity list",
-  "author": "Hawkeye64 <jeff@quasar-framework.org>",
+  "author": "Jeff Galbraith <jeff@quasar.dev>",
+  "license": "MIT",
   "main": "src/index.js",
   "scripts": {
     "lint": "eslint --ext .js,.vue src",
-    "lint-fix": "eslint --ext .js,.vue src --fix",
-    "build-demo": "cd ./demo && yarn build && cd .. && cp ./_redirects ./demo/dist/spa && rm -rf ./docs && cp -r ./demo/dist/spa/. ./docs",
-    "test": "echo \"No test specified\" && exit 0"
+    "lint-fix": "eslint --ext .js,.vue src --fix"
   },
-  "engines": {
-    "node": ">= 8.9.0",
-    "npm": ">= 5.6.0",
-    "yarn": ">= 1.6.0"
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/hawkeye64"
   },
   "publishConfig": {
     "access": "public"
   },
-  "bugs": "https://github.com/hawkeye64/app-extension-qactivity/issues",
+  "bugs": "https://github.com/quasarframework/quasar-ui-qactivity/issues",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/hawkeye64/app-extension-qactivity.git"
+    "url": "git+https://github.com/quasarframework/quasar-ui-qactivity.git"
   },
-  "homepage": "https://github.com/hawkeye64/app-extension-qactivity",
-  "license": "MIT",
+  "homepage": "https://github.com/quasarframework/quasar-ui-qactivity",
   "keywords": [
     "quasar",
+    "quasarframework",
     "app",
     "app extension",
     "extension",
     "activity",
     "list"
   ],
-  "devDependencies": {
-    "@vue/eslint-config-standard": "^5.1.2",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.2.0",
-    "eslint-loader": "^4.0.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "fs": "^0.0.2",
-    "path": "^0.12.7"
+  "dependencies": {
+    "@quasar/quasar-ui-qactivity": "^2.0.0"
+  },
+  "engines": {
+    "node": ">= 10.0.0",
+    "npm": ">= 5.6.0",
+    "yarn": ">= 1.6.0"
   }
 }

package/src/boot/register.js

@@ -0,0 +1,7 @@
+import { boot } from 'quasar/wrappers'
+import VuePlugin from '@quasar/quasar-ui-qactivity'
+
+export default boot(({ app }) => {
+  app.use(VuePlugin)
+})
+

package/src/index.js

@@ -2,30 +2,33 @@
  * Quasar App Extension index/runner script
  * (runs on each dev/build)
  *
+ * Docs: https://quasar.dev/app-extensions/development-guide/index-api
  * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js
  */
 
-const extendQuasarConf = function (conf) {
-  // make sure qactivity boot file is registered
-  conf.boot.push('~@quasar/quasar-app-extension-qactivity/src/boot/qactivity.js')
-  console.log(` App Extension (qactivity) Info: 'Adding qactivity boot reference to your quasar.conf.js'`)
+function extendConf (conf) {
+  // register our boot file
+  conf.boot.push('~@quasar/quasar-app-extension-qactivity/src/boot/register.js')
 
-  // make sure boot file & component transpiles
+  // make sure app extension files & ui package gets transpiled
   conf.build.transpileDependencies.push(/quasar-app-extension-qactivity[\\/]src/)
+  conf.build.transpileDependencies.push(/quasar-ui-qactivity[\\/]src/)
 
-  // make sure qactivity css goes through webpack to avoid ssr issues
-  conf.css.push('~@quasar/quasar-app-extension-qactivity/src/component/activity.styl')
-  console.log(` App Extension (qactivity) Info: 'Adding activity.styl css reference to your quasar.conf.js'`)
+  // make sure the stylesheet goes through webpack to avoid SSR issues
+  conf.css.push('~@quasar/quasar-ui-qactivity/src/index.sass')
 }
 
 module.exports = function (api) {
-  // quasar compatibility check
-  api.compatibleWith('@quasar/app', '^1.0.0 || ^2.0.0')
+  // Quasar compatibility check; you may need
+  // hard dependencies, as in a minimum version of the "quasar"
+  // package or a minimum version of "@quasar/app" CLI
+  api.compatibleWith('quasar', '^2.0.0')
+  api.compatibleWith('@quasar/app', '^3.0.0')
 
-  // register JSON api
-  api.registerDescribeApi('QActivity', './component/QActivity.json')
-  api.registerDescribeApi('QActivityItem', './component/QActivityItem.json')
+  // Uncomment the line below if you provide a JSON API for your component
+  api.registerDescribeApi('QActivity', '~@quasar/quasar-ui-qactivity/dist/api/QActivity.json')
+  api.registerDescribeApi('QActivityItem', '~@quasar/quasar-ui-qactivity/dist/api/QActivityItem.json')
 
-  // extend quasar.conf
-  api.extendQuasarConf(extendQuasarConf)
+  // We extend /quasar.conf.js
+  api.extendQuasarConf(extendConf)
 }

package/src/boot/qactivity.js

@@ -1,7 +0,0 @@
-import QActivity from '@quasar/quasar-app-extension-qactivity/src/component/QActivity'
-import QActivityItem from '@quasar/quasar-app-extension-qactivity/src/component/QActivityItem'
-
-export default ({ Vue }) => {
-  Vue.component('q-activity', QActivity)
-  Vue.component('q-activity-item', QActivityItem)
-}

package/src/component/QActivity.js

@@ -1,41 +0,0 @@
-import { slot } from 'quasar/src/utils/slot.js'
-
-export default {
-  name: 'QActivity',
-
-  props: {
-    dense: Boolean,
-    barColor: String,
-    barWidth: String,
-    barDistance: String
-  },
-
-  computed: {
-
-    styles () {
-      let style = {}
-      if (this.barColor !== void 0) {
-        style['--qactivity-bar-color'] = this.barColor
-      }
-      if (this.barWidth !== void 0) {
-        style['--qactivity-bar-width'] = this.barWidth
-      }
-      if (this.barDistance !== void 0) {
-        style['--qactivity-bar-distance'] = this.barDistance
-      }
-      return style
-    },
-
-    classes () {
-      return `q-activity--${this.dense === true ? 'dense' : 'normal'}`
-    }
-  },
-
-  render (h) {
-    return h('ul', {
-      staticClass: 'q-activity',
-      class: this.classes,
-      style: this.styles
-    }, slot(this, 'default'))
-  }
-}

package/src/component/QActivity.json

@@ -1,29 +0,0 @@
-{
-  "type": "component",
-  "props": {
-    "dense": {
-      "type": "Boolean",
-      "desc": "Dense mode; occupies less space"
-    },
-    "bar-color": {
-      "type": "String",
-      "desc": "CSS color (no Quasar colors allowed here)",
-      "examples": [ "blue", "#0000FF" ]
-    },
-    "bar-width": {
-      "type": "String",
-      "desc": "Size in CSS units, including unit name",
-      "examples": [ "2px" ]
-    },
-    "bar-distance": {
-      "type": "String",
-      "desc": "Size in CSS units, including unit name",
-      "examples": [ "16px", "1rem" ]
-    }
-  },
-  "slots": {
-    "default": {
-      "desc": "Anything can go into this slot, but a QActivityItem component is expected"
-    }
-  }
-}

package/src/component/QActivityItem.js

@@ -1,75 +0,0 @@
-import { slot } from 'quasar/src/utils/slot.js'
-
-import { QAvatar } from 'quasar'
-
-export default {
-  name: 'QActivityItem',
-
-  props: {
-    icon: String,
-    iconColor: String,
-    iconTextColor: String,
-    iconSize: String,
-    iconFontSize: String,
-    iconSquare: Boolean,
-    iconRounded: Boolean,
-    iconImage: String,
-    iconDistance: {
-      type: String,
-      default: '0'
-    }
-  },
-
-  computed: {
-    iconStyle () {
-      if (this.iconDistance !== void 0) {
-        return { left: this.iconDistance }
-      }
-      return ''
-    }
-  },
-
-  methods: {
-    __getImageContent (h) {
-      if (this.iconImage !== void 0) {
-        return [
-          h('img', {
-            domProps: {
-              src: this.iconImage
-            }
-          })
-        ]
-      }
-    },
-
-    __getIconContent (h) {
-      const iconSlot = slot(this, 'icon')
-
-      return h('div', {
-        staticClass: 'q-activity-item--icon vertical-middle',
-        style: this.iconStyle
-      }, iconSlot !== void 0 ? iconSlot : [].concat(
-        h(QAvatar, {
-          props: {
-            color: this.iconColor,
-            textColor: this.iconTextColor,
-            icon: this.icon,
-            size: this.iconSize,
-            fontSize: this.iconFontSize,
-            square: this.iconSquare,
-            rounded: this.iconRounded
-          }
-        }, this.__getImageContent(h))
-      ))
-    }
-  },
-
-  render (h) {
-    return h('li', {
-      staticClass: 'q-activity-item row'
-    }, [
-      this.__getIconContent(h),
-      h('div', { staticClass: 'col q-activity-item--content' }, slot(this, 'default'))
-    ])
-  }
-}

package/src/component/QActivityItem.json

@@ -1,53 +0,0 @@
-{
-  "type": "component",
-  "props": {
-    "icon": {
-      "type": "String",
-      "desc": "Icon name following Quasar convention; make sure you have the icon library installed",
-      "examples": [ "list", "fas fa-list" ]
-    },
-    "icon-color": {
-      "type": "String",
-      "desc": "Color name for icon from the Quasar Color Palette",
-      "examples": [ "blue-grey-8", "white" ]
-    },
-    "icon-text-color": {
-      "type": "String",
-      "desc": "Color name for icon text from the Quasar Color Palette",
-      "examples": [ "white", "orange-6" ]
-    },
-    "icon-size": {
-      "type": "String",
-      "desc": "Size in CSS units, including unit name",
-      "examples": [ "16px", "1rem" ]
-    },
-    "icon-font-size": {
-      "type": "String",
-      "desc": "Size in CSS units, including unit name",
-      "examples": [ "16px", "1rem" ]
-    },
-    "icon-square": {
-      "type": "Boolean",
-      "desc": "Removes border-radius so borders are squared"
-    },
-    "icon-rounded": {
-      "type": "Boolean",
-      "desc": "Applies a small standard border-radius for a squared shape of the component"
-    },
-    "icon-image": {
-      "type": "String",
-      "desc": "Path to image to use. If used, do not also use `icon`, `icon-color`, `icon-text-color` or `icon-font-size`",
-      "examples": [ "https://cdn.quasar.dev/img/boy-avatar.png" ]
-    },
-    "icon-distance": {
-      "type": "String",
-      "desc": "Size in CSS units, including unit name. Used to help center icons on the bar",
-      "examples": [ "-13px", "-0.5rem" ]
-    }
-  },
-  "slots": {
-    "default": {
-      "desc": "Anything can go into this slot"
-    }
-  }
-}

package/src/component/activity.styl

@@ -1,33 +0,0 @@
-.q-activity 
-  position relative
-  list-style none
-  padding-inline-start 0px
-  &:before 
-    position absolute
-    display block
-    content ''
-    height 100%
-    top 0
-    bottom 0
-    z-index 1
-    left var(--qactivity-bar-distance, 15px)
-    width var(--qactivity-bar-width, 2px)
-    background-color var(--qactivity-bar-color, black)
-  &--normal
-    margin 10px 10px 10px 10px
-  $--dense
-    margin 0 0 0 0
-  .q-activity-item 
-    position relative
-    &--icon
-      position relative
-      padding 10px 15px 5px 8px
-      display flex
-      justify-content space-between
-      align-items center
-      z-index 2
-    &--content
-      position relative
-      display flex
-      justify-content space-between
-      align-items center

package/src/component/index.js

@@ -1,7 +0,0 @@
-import QActivity from './QActivity'
-import QActivityItem from './QActivityItem'
-
-export {
-  QActivity,
-  QActivityItem
-}