quasarframework / quasar-ui-qactivity Goto Github PK

View Code? Open in Web Editor NEW

46.0 4.0 6.0 4.1 MB

Create activity timeline

Home Page: https://qactivity.netlify.app/

License: MIT License

JavaScript 89.96% Sass 2.97% HTML 7.08%

vue quasar-framework quasar timeline-component

quasar-ui-qactivity's Introduction

QActivity (@quasar/qactivity)

QActivity is an UI App Extension for Quasar Framework v2. It will not work with legacy versions of Quasar Framework.

Info

QActivity is the smaller sister to QTimeline and can be used to create an activity list.

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.

Live Demo - live docs and examples

Install

To add this App Extension to your Quasar application, run the following (in your Quasar app folder):

quasar ext add @quasar/qactivity

Describe

You can use quasar describe QActivity or quasar describe QActivityItem

Example Code

Be sure to check out the docs for more examples.

<div class="q-pa-md q-gutter-sm">
  <q-card class="q-pa-sm" style="width: 100%;">
    <q-activity
      dense
      bar-color="red"
      bar-width="1px"
      bar-distance="15px"
      :class="itemClass"
    >
      <q-activity-item
        icon="photo"
        icon-color="blue"
        icon-text-color="white"
        icon-size="1rem"
        icon-font-size="0.75rem"
        icon-square
        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
        :class="itemClass"
        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 data"
        :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-rounded="item.iconRounded"
        :icon-image="item.iconImage"
        :class="listClasses(index)"
      >
        <div class="full-width row justify-evenly">
          <div class="inline-block vertical-middle middle-text col">
            {{ item.text }}
          </div>
          <div class="inline-block vertical-middle side-text text-right q-pr-sm col col-shrink" style="min-width: 100px;">
            {{ item.time }}
          </div>
        </div>
      </q-activity-item>
    </q-activity>
  </q-card>
</div>

QActivity Vue Properties

Vue 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 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, please consider donating to Quasar or Jeff.

License

MIT (c) Jeff Galbraith [email protected]

quasar-ui-qactivity's People

Contributors

Stargazers

Watchers

Forkers

netanelwebninja lucasfernog greseky prouddeath nucle pratik227

quasar-ui-qactivity's Issues

Whats the difference between this and q-timeline?

https://quasar.dev/vue-components/timeline

Support for v2 Quasar (Vue 3)

Hi, I currently get an error compiling my project. The error states that qactivity doesn't support v2 of quasar. When will it be supported?

Vite & Webpack version update

bar-color prop not natively reactive for $q.dark

What the issue title says. I would expect that changing the state of dark would automatically lighten the CSS of the bar.

optionally cap the beginning and end of the activity

As things stand, the appearance of the bar isn't always what I want.

I would like to be able to define the "caps" of the bar to be one of:

invisible (beginning, end, both)
arrowhead (beginning, end, both)

component broken on quasar v1.5.0

Did the slot just change?

client?f1f8:135 ./node_modules/@quasar/quasar-app-extension-qactivity/src/component/QActivity.js 38:7-11
"export 'default' (imported as 'slot') was not found in 'quasar/src/utils/slot.js'

vue.runtime.esm.js?2b0e:1888 TypeError: Object(...) is not a function
    at Proxy.render (QActivity.js?c654:36)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
    at Watcher.get (vue.runtime.esm.js?2b0e:4473)
    at new Watcher (vue.runtime.esm.js?2b0e:4462)
    at mountComponent (vue.runtime.esm.js?2b0e:4067)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409)
    at init (vue.runtime.esm.js?2b0e:3118)
    at createComponent (vue.runtime.esm.js?2b0e:5972)
    at createElm (vue.runtime.esm.js?2b0e:5919)

This return is the offending line.

  render (h) {
    return h('ul', {
      staticClass: 'q-activity',
      class: this.classes,
      style: this.styles
    }, slot(this, 'default'))
  }

quasar dev giving dependency error post "quasar ext add @quasar/qactivity"

I'm in the process of upgrading to quasar 2 from quasar 1. So far everything is going well, except I cannot use q-activity.

q-activity works fine under version 1, but I get a dependency error under quasar 2. I'm trying to use vite under version 2.

$ quasar ext add @quasar/qactivity
App • Installing "@quasar/qactivity" Quasar App Extension

App • Installing @quasar/quasar-app-extension-qactivity...
App • [sync] Running "yarn add --dev @quasar/quasar-app-extension-qactivity" in /Users/wouter/Progs/Web-Dev/sb_frontend_new

yarn add v1.22.17
[1/5] 🔍 Validating package.json...
[2/5] 🔍 Resolving packages...
[3/5] 🚚 Fetching packages...
[4/5] 🔗 Linking dependencies...
warning " > @intlify/[email protected]" has unmet peer dependency "vite@^2.0.0".
warning "@quasar/app-vite > [email protected]" has unmet peer dependency "rollup@^2.0.0".
warning " > [email protected]" has unmet peer dependency "postcss@^8.1.0".
[5/5] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @quasar/[email protected]
info All dependencies
└─ @quasar/[email protected]
✨ Done in 5.24s.
App • Updating /quasar.extensions.json for "@quasar/qactivity" extension ...
App • Quasar App Extension "@quasar/qactivity" successfully installed.

$ quasar dev

.d88888b.
d88P" "Y88b
888 888
888 888 888 888 8888b. .d8888b 8888b. 888d888
888 888 888 888 "88b 88K "88b 888P"
888 Y8b 888 888 888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888 888 X88 888 888 888
"Y888888" "Y88888 "Y888888 88888P' "Y888888 888
Y8b

App • Running "vuelidate-rules" Quasar App Extension...
App • Running "@quasar/qoverlay" Quasar App Extension...
App • Running "@quasar/qactivity" Quasar App Extension...

App • ⚠️ Extension(@quasar/qactivity): Dependency not found - @quasar/app. Please install it.

If I try try to add @quasar/app, I get another error:

$ quasar dev

App • ⚠️ Error. This command must be executed inside a Quasar v1+ project folder.

I have to remove @quasar/app in order to run 'quasar info':

quasar info

Operating System - Darwin(21.5.0) - darwin/x64
NodeJs - 16.15.0

Global packages
NPM - 8.5.5
yarn - 1.22.17
@quasar/cli - 1.3.2
@quasar/icongenie - 2.5.1
cordova - You have been opted out of telemetry. To change this, run: cordova telemetry on.
11.0.0

Important local packages
quasar - 2.7.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-vite - 1.0.1 -- Quasar Framework App CLI with Vite
@quasar/extras - 1.14.0 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - 1.1.0 -- Official ESLint plugin for Quasar
vue - 3.2.37 -- The progressive JavaScript framework for building modern web UI.
vue-router - 4.0.16
pinia - 2.0.14 -- Intuitive, type safe and flexible Store for Vue
vuex - 4.0.2 -- state management for Vue.js
vite - 2.9.1 -- Native-ESM powered web dev build tool
eslint - 8.17.0 -- An AST-based pattern checker for JavaScript.
electron - Not installed
electron-packager - Not installed
electron-builder - Not installed
register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed

Quasar App Extensions
quasar-app-extension-vuelidate-rules - 0.5.1 -- Use Vuelidate methods as internal Quasar rules for validation
@quasar/quasar-app-extension-qoverlay - 2.0.1 -- A Quasar App Extension
@quasar/quasar-app-extension-qactivity - 2.0.0 -- QActivity is an app extension for Quasar for making an activity list

Networking
Host - Keyser2.local
en0 - 192.168.1.32
en3 - 192.168.1.84

(node:22126) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/wouter/Progs/Web-Dev/sb_frontend_new/node_modules/vuex/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use node --trace-deprecation ... to show where the warning was created)

Please can you help. I have searched for an answer, but so far I'm unable to resolve. Apologies if I have logged this incorrectly.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.