quasar 2.1.0

package/src/components/btn/index.js

@@ -0,0 +1,5 @@
+import QBtn from './QBtn.js'
+
+export {
+  QBtn
+}

package/src/components/btn/use-btn.js

@@ -0,0 +1,195 @@
+import { computed } from 'vue'
+
+import useAlign, { useAlignProps } from '../../composables/private/use-align.js'
+import useSize, { useSizeProps } from '../../composables/private/use-size.js'
+import useRouterLink, { useRouterLinkProps } from '../../composables/private/use-router-link.js'
+
+const padding = {
+  none: 0,
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32
+}
+
+const defaultSizes = {
+  xs: 8,
+  sm: 10,
+  md: 14,
+  lg: 20,
+  xl: 24
+}
+
+export const useBtnProps = {
+  ...useSizeProps,
+  ...useRouterLinkProps,
+
+  type: {
+    type: String,
+    default: 'button'
+  },
+
+  label: [ Number, String ],
+  icon: String,
+  iconRight: String,
+
+  round: Boolean,
+  outline: Boolean,
+  flat: Boolean,
+  unelevated: Boolean,
+  rounded: Boolean,
+  push: Boolean,
+  glossy: Boolean,
+
+  size: String,
+  fab: Boolean,
+  fabMini: Boolean,
+  padding: String,
+
+  color: String,
+  textColor: String,
+  noCaps: Boolean,
+  noWrap: Boolean,
+  dense: Boolean,
+
+  tabindex: [ Number, String ],
+
+  ripple: {
+    type: [ Boolean, Object ],
+    default: true
+  },
+
+  align: {
+    ...useAlignProps.align,
+    default: 'center'
+  },
+  stack: Boolean,
+  stretch: Boolean,
+  loading: {
+    type: Boolean,
+    default: null
+  },
+  disable: Boolean
+}
+
+export default function (props) {
+  const sizeStyle = useSize(props, defaultSizes)
+  const alignClass = useAlign(props)
+  const { hasLink, linkProps, navigateToLink } = useRouterLink()
+
+  const style = computed(() => {
+    const obj = props.fab === false && props.fabMini === false
+      ? sizeStyle.value
+      : {}
+
+    return props.padding !== void 0
+      ? Object.assign({}, obj, {
+          padding: props.padding
+            .split(/\s+/)
+            .map(v => (v in padding ? padding[ v ] + 'px' : v))
+            .join(' '),
+          minWidth: '0',
+          minHeight: '0'
+        })
+      : obj
+  })
+
+  const isRounded = computed(() =>
+    props.rounded === true || props.fab === true || props.fabMini === true
+  )
+
+  const isActionable = computed(() =>
+    props.disable !== true && props.loading !== true
+  )
+
+  const tabIndex = computed(() => (
+    isActionable.value === true ? props.tabindex || 0 : -1
+  ))
+
+  const isLink = computed(() =>
+    props.type === 'a' || hasLink.value === true
+  )
+
+  const design = computed(() => {
+    if (props.flat === true) return 'flat'
+    if (props.outline === true) return 'outline'
+    if (props.push === true) return 'push'
+    if (props.unelevated === true) return 'unelevated'
+    return 'standard'
+  })
+
+  const attributes = computed(() => {
+    const acc = { tabindex: tabIndex.value }
+
+    if (props.type !== 'a') {
+      acc.type = props.type
+    }
+
+    if (hasLink.value === true) {
+      Object.assign(acc, linkProps.value)
+    }
+    else {
+      acc.role = props.type === 'a' ? 'link' : 'button'
+    }
+
+    if (props.loading === true && props.percentage !== void 0) {
+      Object.assign(acc, {
+        role: 'progressbar',
+        'aria-valuemin': 0,
+        'aria-valuemax': 100,
+        'aria-valuenow': props.percentage
+      })
+    }
+
+    if (props.disable === true) {
+      acc.disabled = ''
+      acc[ 'aria-disabled' ] = 'true'
+    }
+
+    return acc
+  })
+
+  const classes = computed(() => {
+    let colors
+
+    if (props.color !== void 0) {
+      if (props.flat === true || props.outline === true) {
+        colors = `text-${ props.textColor || props.color }`
+      }
+      else {
+        colors = `bg-${ props.color } text-${ props.textColor || 'white' }`
+      }
+    }
+    else if (props.textColor) {
+      colors = `text-${ props.textColor }`
+    }
+
+    return `q-btn--${ design.value } `
+      + `q-btn--${ props.round === true ? 'round' : `rectangle${ isRounded.value === true ? ' q-btn--rounded' : '' }` }`
+      + (colors !== void 0 ? ' ' + colors : '')
+      + (isActionable.value === true ? ' q-btn--actionable q-focusable q-hoverable' : (props.disable === true ? ' disabled' : ''))
+      + (props.fab === true ? ' q-btn--fab' : (props.fabMini === true ? ' q-btn--fab-mini' : ''))
+      + (props.noCaps === true ? ' q-btn--no-uppercase' : '')
+      + (props.dense === true ? ' q-btn--dense' : '')
+      + (props.stretch === true ? ' no-border-radius self-stretch' : '')
+      + (props.glossy === true ? ' glossy' : '')
+  })
+
+  const innerClasses = computed(() =>
+    alignClass.value + (props.stack === true ? ' column' : ' row')
+    + (props.noWrap === true ? ' no-wrap text-no-wrap' : '')
+    + (props.loading === true ? ' q-btn__content--hidden' : '')
+  )
+
+  return {
+    classes,
+    style,
+    innerClasses,
+    attributes,
+    hasLink,
+    isLink,
+    navigateToLink,
+    isActionable
+  }
+}

package/src/components/btn/use-btn.json

@@ -0,0 +1,172 @@
+{
+  "mixins": [ "composables/private/use-size" ],
+
+  "props": {
+    "type":{
+      "type": "String",
+      "desc": "Define the button HTML DOM type",
+      "default": "button",
+      "values": [
+        "a", "submit", "button", "reset"
+      ],
+      "examples": [
+        "type=\"a\" href=\"http://some-site.net\" target=\"__blank\""
+      ],
+      "category": "general"
+    },
+
+    "to": {
+      "type": [ "String", "Object" ],
+      "desc": "Equivalent to Vue Router <router-link> 'to' property",
+      "examples": [
+        "/home/dashboard",
+        ":to=\"{ name: 'my-route-name' }\""
+      ],
+      "category": "router"
+    },
+
+    "replace": {
+      "type": "Boolean",
+      "desc": "Equivalent to Vue Router <router-link> 'replace' property",
+      "category": "router"
+    },
+
+    "append": {
+      "type": "Boolean",
+      "desc": "Equivalent to Vue Router <router-link> 'append' property",
+      "category": "router"
+    },
+
+    "label":{
+      "type": [ "String", "Number" ],
+      "desc": "The text that will be shown on the button",
+      "examples": [ "Button Label" ],
+      "category": "content"
+    },
+
+    "icon": {
+      "extends": "icon"
+    },
+
+    "icon-right": {
+      "extends": "icon"
+    },
+
+    "outline": {
+      "type": "Boolean",
+      "desc": "Use 'outline' design",
+      "category": "style"
+    },
+
+    "flat": {
+      "type": "Boolean",
+      "desc": "Use 'flat' design",
+      "category": "style"
+    },
+
+    "unelevated": {
+      "type": "Boolean",
+      "desc": "Remove shadow",
+      "category": "style"
+    },
+
+    "rounded": {
+      "type": "Boolean",
+      "desc": "Applies a more prominent border-radius for a squared shape button",
+      "category": "style"
+    },
+
+    "push": {
+      "type": "Boolean",
+      "desc": "Use 'push' design",
+      "category": "style"
+    },
+
+    "glossy": {
+      "type": "Boolean",
+      "desc": "Applies a glossy effect",
+      "category": "style"
+    },
+
+    "fab": {
+      "type": "Boolean",
+      "desc": "Makes button size and shape to fit a Floating Action Button",
+      "category": "style"
+    },
+
+    "fab-mini": {
+      "type": "Boolean",
+      "desc": "Makes button size and shape to fit a small Floating Action Button",
+      "category": "style"
+    },
+
+    "padding": {
+      "type": "String",
+      "desc": "Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set",
+      "examples": [ "16px", "10px 5px", "2rem", "xs", "md lg", "2px 2px 5px 7px" ],
+      "category": "style"
+    },
+
+    "color": {
+      "extends": "color"
+    },
+
+    "text-color": {
+      "extends": "text-color"
+    },
+
+    "no-caps": {
+      "type": "Boolean",
+      "desc": "Avoid turning label text into caps (which happens by default)",
+      "category": "content"
+    },
+
+    "no-wrap": {
+      "type": "Boolean",
+      "desc": "Avoid label text wrapping",
+      "category": "content"
+    },
+
+    "dense": {
+      "extends": "dense"
+    },
+
+    "ripple": {
+      "extends": "ripple"
+    },
+
+    "tabindex": {
+      "extends": "tabindex"
+    },
+
+    "align": {
+      "type": "String",
+      "desc": "Label or content alignment",
+      "default": "center",
+      "values": [ "left", "right", "center", "around", "between", "evenly" ],
+      "category": "content"
+    },
+
+    "stack": {
+      "type": "Boolean",
+      "desc": "Stack icon and label vertically instead of on same line (like it is by default)",
+      "category": "content"
+    },
+
+    "stretch": {
+      "type": "Boolean",
+      "desc": "When used on flexbox parent, button will stretch to parent's height",
+      "category": "content"
+    },
+
+    "loading": {
+      "type": "Boolean",
+      "desc": "Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)",
+      "category": "behavior|state"
+    },
+
+    "disable": {
+      "extends": "disable"
+    }
+  }
+}

package/src/components/btn-dropdown/QBtnDropdown.js

@@ -0,0 +1,215 @@
+import { h, defineComponent, ref, computed, watch, onMounted, getCurrentInstance } from 'vue'
+
+import QIcon from '../icon/QIcon.js'
+import QBtn from '../btn/QBtn.js'
+import QBtnGroup from '../btn-group/QBtnGroup.js'
+import QMenu from '../menu/QMenu.js'
+
+import { useBtnProps } from '../btn/use-btn.js'
+
+import { stop } from '../../utils/event.js'
+import { hSlot } from '../../utils/private/render.js'
+
+export default defineComponent({
+  name: 'QBtnDropdown',
+
+  props: {
+    ...useBtnProps,
+
+    modelValue: Boolean,
+    split: Boolean,
+    dropdownIcon: String,
+
+    contentClass: [ Array, String, Object ],
+    contentStyle: [ Array, String, Object ],
+
+    cover: Boolean,
+    persistent: Boolean,
+    noRouteDismiss: Boolean,
+    autoClose: Boolean,
+
+    menuAnchor: {
+      type: String,
+      default: 'bottom end'
+    },
+    menuSelf: {
+      type: String,
+      default: 'top end'
+    },
+    menuOffset: Array,
+
+    disableMainBtn: Boolean,
+    disableDropdown: Boolean,
+
+    noIconAnimation: Boolean
+  },
+
+  emits: [ 'update:modelValue', 'click', 'before-show', 'show', 'before-hide', 'hide' ],
+
+  setup (props, { slots, emit }) {
+    const { proxy } = getCurrentInstance()
+
+    const showing = ref(props.modelValue)
+    const menuRef = ref(null)
+
+    const attributes = computed(() => {
+      const acc = {
+        'aria-expanded': showing.value === true ? 'true' : 'false',
+        'aria-haspopup': 'true'
+      }
+
+      if (
+        props.disable === true
+        || (
+          (props.split === false && props.disableMainBtn === true)
+          || props.disableDropdown === true
+        )
+      ) {
+        acc[ 'aria-disabled' ] = 'true'
+      }
+
+      return acc
+    })
+
+    const iconClass = computed(() =>
+      'q-btn-dropdown__arrow'
+      + (showing.value === true && props.noIconAnimation === false ? ' rotate-180' : '')
+      + (props.split === false ? ' q-btn-dropdown__arrow-container' : '')
+    )
+
+    watch(() => props.modelValue, val => {
+      menuRef.value !== null && menuRef.value[ val ? 'show' : 'hide' ]()
+    })
+
+    watch(() => props.split, hide)
+
+    function onBeforeShow (e) {
+      showing.value = true
+      emit('before-show', e)
+    }
+
+    function onShow (e) {
+      emit('show', e)
+      emit('update:modelValue', true)
+    }
+
+    function onBeforeHide (e) {
+      showing.value = false
+      emit('before-hide', e)
+    }
+
+    function onHide (e) {
+      emit('hide', e)
+      emit('update:modelValue', false)
+    }
+
+    function onClick (e) {
+      emit('click', e)
+    }
+
+    function onClickHide (e) {
+      stop(e)
+      hide()
+      emit('click', e)
+    }
+
+    function toggle (evt) {
+      menuRef.value !== null && menuRef.value.toggle(evt)
+    }
+
+    function show (evt) {
+      menuRef.value !== null && menuRef.value.show(evt)
+    }
+
+    function hide (evt) {
+      menuRef.value !== null && menuRef.value.hide(evt)
+    }
+
+    // expose public methods
+    Object.assign(proxy, {
+      show, hide, toggle
+    })
+
+    onMounted(() => {
+      props.modelValue === true && show()
+    })
+
+    return () => {
+      const Arrow = [
+        h(QIcon, {
+          class: iconClass.value,
+          name: props.dropdownIcon || proxy.$q.iconSet.arrow.dropdown
+        })
+      ]
+
+      props.disableDropdown !== true && Arrow.push(
+        h(QMenu, {
+          ref: menuRef,
+          class: props.contentClass,
+          style: props.contentStyle,
+          cover: props.cover,
+          fit: true,
+          persistent: props.persistent,
+          noRouteDismiss: props.noRouteDismiss,
+          autoClose: props.autoClose,
+          anchor: props.menuAnchor,
+          self: props.menuSelf,
+          offset: props.menuOffset,
+          separateClosePopup: true,
+          onBeforeShow,
+          onShow,
+          onBeforeHide,
+          onHide
+        }, slots.default)
+      )
+
+      if (props.split === false) {
+        return h(QBtn, {
+          class: 'q-btn-dropdown q-btn-dropdown--simple',
+          ...props,
+          disable: props.disable === true || props.disableMainBtn === true,
+          noWrap: true,
+          round: false,
+          ...attributes.value,
+          onClick
+        }, () => hSlot(slots.label, []).concat(Arrow))
+      }
+
+      return h(QBtnGroup, {
+        class: 'q-btn-dropdown q-btn-dropdown--split no-wrap q-btn-item',
+        outline: props.outline,
+        flat: props.flat,
+        rounded: props.rounded,
+        push: props.push,
+        unelevated: props.unelevated,
+        glossy: props.glossy,
+        stretch: props.stretch
+      }, () => [
+        h(QBtn, {
+          class: 'q-btn-dropdown--current',
+          ...props,
+          disable: props.disable === true || props.disableMainBtn === true,
+          noWrap: true,
+          iconRight: props.iconRight,
+          round: false,
+          onClick: onClickHide
+        }, slots.label),
+
+        h(QBtn, {
+          class: 'q-btn-dropdown__arrow-container q-anchor--skip',
+          ...attributes.value,
+          disable: props.disable === true || props.disableDropdown === true,
+          outline: props.outline,
+          flat: props.flat,
+          rounded: props.rounded,
+          push: props.push,
+          size: props.size,
+          color: props.color,
+          textColor: props.textColor,
+          dense: props.dense,
+          ripple: props.ripple
+        }, () => Arrow)
+      ])
+    }
+  }
+})