quasar 2.1.0

package/src/components/editor/editor-utils.js

@@ -0,0 +1,287 @@
+import { h } from 'vue'
+
+import QBtn from '../btn/QBtn.js'
+import QBtnDropdown from '../btn-dropdown/QBtnDropdown.js'
+import QIcon from '../icon/QIcon.js'
+import QTooltip from '../tooltip/QTooltip.js'
+import QItem from '../item/QItem.js'
+import QItemSection from '../item/QItemSection.js'
+
+import { prevent, stop } from '../../utils/event.js'
+import { hSlot } from '../../utils/private/render.js'
+import { shouldIgnoreKey } from '../../utils/private/key-composition.js'
+
+function run (e, btn, eVm) {
+  if (btn.handler) {
+    btn.handler(e, eVm, eVm.caret)
+  }
+  else {
+    eVm.runCmd(btn.cmd, btn.param)
+  }
+}
+
+function getGroup (children) {
+  return h('div', { class: 'q-editor__toolbar-group' }, children)
+}
+
+function getBtn (eVm, btn, clickHandler, active = false) {
+  const
+    toggled = active || (btn.type === 'toggle'
+      ? (btn.toggled ? btn.toggled(eVm) : btn.cmd && eVm.caret.is(btn.cmd, btn.param))
+      : false),
+    child = []
+
+  if (btn.tip && eVm.$q.platform.is.desktop) {
+    const Key = btn.key
+      ? h('div', [
+          h('small', `(CTRL + ${ String.fromCharCode(btn.key) })`)
+        ])
+      : null
+    child.push(
+      h(QTooltip, { delay: 1000 }, () => [
+        h('div', { innerHTML: btn.tip }),
+        Key
+      ])
+    )
+  }
+
+  return h(QBtn, {
+    ...eVm.buttonProps.value,
+    icon: btn.icon !== null ? btn.icon : void 0,
+    color: toggled ? btn.toggleColor || eVm.props.toolbarToggleColor : btn.color || eVm.props.toolbarColor,
+    textColor: toggled && !eVm.props.toolbarPush ? null : btn.textColor || eVm.props.toolbarTextColor,
+    label: btn.label,
+    disable: btn.disable ? (typeof btn.disable === 'function' ? btn.disable(eVm) : true) : false,
+    size: 'sm',
+    onClick (e) {
+      clickHandler && clickHandler()
+      run(e, btn, eVm)
+    }
+  }, () => child)
+}
+
+function getDropdown (eVm, btn) {
+  const onlyIcons = btn.list === 'only-icons'
+  let
+    label = btn.label,
+    icon = btn.icon !== null ? btn.icon : void 0,
+    contentClass,
+    Items
+
+  function closeDropdown () {
+    Dropdown.component.proxy.hide()
+  }
+
+  if (onlyIcons) {
+    Items = btn.options.map(btn => {
+      const active = btn.type === void 0
+        ? eVm.caret.is(btn.cmd, btn.param)
+        : false
+
+      if (active) {
+        label = btn.tip
+        icon = btn.icon !== null ? btn.icon : void 0
+      }
+      return getBtn(eVm, btn, closeDropdown, active)
+    })
+    contentClass = eVm.toolbarBackgroundClass.value
+    Items = [
+      getGroup(Items)
+    ]
+  }
+  else {
+    const activeClass = eVm.props.toolbarToggleColor !== void 0
+      ? `text-${ eVm.props.toolbarToggleColor }`
+      : null
+    const inactiveClass = eVm.props.toolbarTextColor !== void 0
+      ? `text-${ eVm.props.toolbarTextColor }`
+      : null
+
+    const noIcons = btn.list === 'no-icons'
+
+    Items = btn.options.map(btn => {
+      const disable = btn.disable ? btn.disable(eVm) : false
+      const active = btn.type === void 0
+        ? eVm.caret.is(btn.cmd, btn.param)
+        : false
+
+      if (active) {
+        label = btn.tip
+        icon = btn.icon !== null ? btn.icon : void 0
+      }
+
+      const htmlTip = btn.htmlTip
+
+      return h(QItem, {
+        active,
+        activeClass,
+        clickable: true,
+        disable,
+        dense: true,
+        onClick (e) {
+          closeDropdown()
+          eVm.contentRef.value !== null && eVm.contentRef.value.focus()
+          eVm.caret.restore()
+          run(e, btn, eVm)
+        }
+      }, () => [
+        noIcons === true
+          ? null
+          : h(
+            QItemSection,
+            {
+              class: active ? activeClass : inactiveClass,
+              side: true
+            },
+            () => h(QIcon, { name: btn.icon !== null ? btn.icon : void 0 })
+          ),
+
+        h(
+          QItemSection,
+          htmlTip
+            ? () => h('div', { class: 'text-no-wrap', innerHTML: btn.htmlTip })
+            : (btn.tip ? () => h('div', { class: 'text-no-wrap' }, btn.tip) : void 0)
+        )
+      ])
+    })
+    contentClass = [ eVm.toolbarBackgroundClass.value, inactiveClass ]
+  }
+
+  const highlight = btn.highlight && label !== btn.label
+  const Dropdown = h(QBtnDropdown, {
+    ...eVm.buttonProps.value,
+    noCaps: true,
+    noWrap: true,
+    color: highlight ? eVm.props.toolbarToggleColor : eVm.props.toolbarColor,
+    textColor: highlight && !eVm.props.toolbarPush ? null : eVm.props.toolbarTextColor,
+    label: btn.fixedLabel ? btn.label : label,
+    icon: btn.fixedIcon ? (btn.icon !== null ? btn.icon : void 0) : icon,
+    contentClass
+  }, () => Items)
+
+  return Dropdown
+}
+
+export function getToolbar (eVm) {
+  if (eVm.caret) {
+    return eVm.buttons.value
+      .filter(f => {
+        return !eVm.isViewingSource.value || f.find(fb => fb.cmd === 'viewsource')
+      })
+      .map(group => getGroup(
+        group.map(btn => {
+          if (eVm.isViewingSource.value && btn.cmd !== 'viewsource') {
+            return false
+          }
+
+          if (btn.type === 'slot') {
+            return hSlot(eVm.slots[ btn.slot ])
+          }
+
+          if (btn.type === 'dropdown') {
+            return getDropdown(eVm, btn)
+          }
+
+          return getBtn(eVm, btn)
+        })
+      ))
+  }
+}
+
+export function getFonts (defaultFont, defaultFontLabel, defaultFontIcon, fonts = {}) {
+  const aliases = Object.keys(fonts)
+  if (aliases.length === 0) {
+    return {}
+  }
+
+  const def = {
+    default_font: {
+      cmd: 'fontName',
+      param: defaultFont,
+      icon: defaultFontIcon,
+      tip: defaultFontLabel
+    }
+  }
+
+  aliases.forEach(alias => {
+    const name = fonts[ alias ]
+    def[ alias ] = {
+      cmd: 'fontName',
+      param: name,
+      icon: defaultFontIcon,
+      tip: name,
+      htmlTip: `<font face="${ name }">${ name }</font>`
+    }
+  })
+
+  return def
+}
+
+export function getLinkEditor (eVm) {
+  if (eVm.caret) {
+    const color = eVm.props.toolbarColor || eVm.props.toolbarTextColor
+    let link = eVm.editLinkUrl.value
+    const updateLink = () => {
+      eVm.caret.restore()
+
+      if (link !== eVm.editLinkUrl.value) {
+        document.execCommand('createLink', false, link === '' ? ' ' : link)
+      }
+
+      eVm.editLinkUrl.value = null
+    }
+
+    return [
+      h('div', { class: `q-mx-xs text-${ color }` }, `${ eVm.$q.lang.editor.url }: `),
+      h('input', {
+        key: 'qedt_btm_input',
+        class: 'col q-editor__link-input',
+        value: link,
+        onInput: evt => {
+          stop(evt)
+          link = evt.target.value
+        },
+        onKeydown: evt => {
+          if (shouldIgnoreKey(evt) === true) {
+            return
+          }
+
+          switch (evt.keyCode) {
+            case 13: // ENTER key
+              prevent(evt)
+              return updateLink()
+            case 27: // ESCAPE key
+              prevent(evt)
+              eVm.caret.restore()
+              if (!eVm.editLinkUrl.value || eVm.editLinkUrl.value === 'https://') {
+                document.execCommand('unlink')
+              }
+              eVm.editLinkUrl.value = null
+              break
+          }
+        }
+      }),
+      getGroup([
+        h(QBtn, {
+          key: 'qedt_btm_rem',
+          tabindex: -1,
+          ...eVm.buttonProps.value,
+          label: eVm.$q.lang.label.remove,
+          noCaps: true,
+          onClick: () => {
+            eVm.caret.restore()
+            document.execCommand('unlink')
+            eVm.editLinkUrl.value = null
+          }
+        }),
+        h(QBtn, {
+          key: 'qedt_btm_upd',
+          ...eVm.buttonProps.value,
+          label: eVm.$q.lang.label.update,
+          noCaps: true,
+          onClick: updateLink
+        })
+      ])
+    ]
+  }
+}

package/src/components/editor/index.js

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

package/src/components/expansion-item/QExpansionItem.js

@@ -0,0 +1,337 @@
+import { h, shallowReactive, defineComponent, ref, computed, watch, withDirectives, getCurrentInstance, vShow, onBeforeUnmount } from 'vue'
+
+import QItem from '../item/QItem.js'
+import QItemSection from '../item/QItemSection.js'
+import QItemLabel from '../item/QItemLabel.js'
+import QIcon from '../icon/QIcon.js'
+import QSlideTransition from '../slide-transition/QSlideTransition.js'
+import QSeparator from '../separator/QSeparator.js'
+
+import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import { useRouterLinkProps } from '../../composables/private/use-router-link.js'
+import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
+
+import { stopAndPrevent } from '../../utils/event.js'
+import { hSlot } from '../../utils/private/render.js'
+import uid from '../../utils/uid.js'
+
+const itemGroups = shallowReactive({})
+const LINK_PROPS = Object.keys(useRouterLinkProps)
+
+export default defineComponent({
+  name: 'QExpansionItem',
+
+  props: {
+    ...useRouterLinkProps,
+    ...useModelToggleProps,
+    ...useDarkProps,
+
+    icon: String,
+
+    label: String,
+    labelLines: [ Number, String ],
+
+    caption: String,
+    captionLines: [ Number, String ],
+
+    dense: Boolean,
+
+    expandIcon: String,
+    expandedIcon: String,
+    expandIconClass: [ Array, String, Object ],
+    duration: Number,
+
+    headerInsetLevel: Number,
+    contentInsetLevel: Number,
+
+    expandSeparator: Boolean,
+    defaultOpened: Boolean,
+    expandIconToggle: Boolean,
+    switchToggleSide: Boolean,
+    denseToggle: Boolean,
+    group: String,
+    popup: Boolean,
+
+    headerStyle: [ Array, String, Object ],
+    headerClass: [ Array, String, Object ]
+  },
+
+  emits: [
+    ...useModelToggleEmits,
+    'click', 'after-show', 'after-hide'
+  ],
+
+  setup (props, { slots, emit }) {
+    const { proxy: { $q } } = getCurrentInstance()
+    const isDark = useDark(props, $q)
+
+    const showing = ref(
+      props.modelValue !== null
+        ? props.modelValue
+        : props.defaultOpened
+    )
+
+    const blurTargetRef = ref(null)
+
+    const { hide, toggle } = useModelToggle({ showing })
+
+    let uniqueId, exitGroup
+
+    const classes = computed(() =>
+      'q-expansion-item q-item-type'
+      + ` q-expansion-item--${ showing.value === true ? 'expanded' : 'collapsed' }`
+      + ` q-expansion-item--${ props.popup === true ? 'popup' : 'standard' }`
+    )
+
+    const contentStyle = computed(() => {
+      if (props.contentInsetLevel === void 0) {
+        return null
+      }
+
+      const dir = $q.lang.rtl === true ? 'Right' : 'Left'
+      return {
+        [ 'padding' + dir ]: (props.contentInsetLevel * 56) + 'px'
+      }
+    })
+
+    const hasLink = computed(() =>
+      props.disable !== true && props.to !== void 0 && props.to !== null && props.to !== ''
+    )
+
+    const linkProps = computed(() => {
+      const acc = {}
+      LINK_PROPS.forEach(key => {
+        acc[ key ] = props[ key ]
+      })
+      return acc
+    })
+
+    const isClickable = computed(() =>
+      hasLink.value === true || props.expandIconToggle !== true
+    )
+
+    const expansionIcon = computed(() => (
+      props.expandedIcon !== void 0 && showing.value === true
+        ? props.expandedIcon
+        : props.expandIcon || $q.iconSet.expansionItem[ props.denseToggle === true ? 'denseIcon' : 'icon' ]
+    ))
+
+    const activeToggleIcon = computed(() =>
+      props.disable !== true && (hasLink.value === true || props.expandIconToggle === true)
+    )
+
+    watch(() => props.group, name => {
+      exitGroup !== void 0 && exitGroup()
+      name !== void 0 && enterGroup()
+    })
+
+    function onHeaderClick (e) {
+      hasLink.value !== true && toggle(e)
+      emit('click', e)
+    }
+
+    function toggleIconKeyboard (e) {
+      e.keyCode === 13 && toggleIcon(e, true)
+    }
+
+    function toggleIcon (e, keyboard) {
+      keyboard !== true && blurTargetRef.value !== null && blurTargetRef.value.focus()
+      toggle(e)
+      stopAndPrevent(e)
+    }
+
+    function onShow () {
+      emit('after-show')
+    }
+
+    function onHide () {
+      emit('after-hide')
+    }
+
+    function enterGroup () {
+      if (uniqueId === void 0) {
+        uniqueId = uid()
+      }
+
+      if (showing.value === true) {
+        itemGroups[ props.group ] = uniqueId
+      }
+
+      const show = watch(showing, val => {
+        if (val === true) {
+          itemGroups[ props.group ] = uniqueId
+        }
+        else if (itemGroups[ props.group ] === uniqueId) {
+          delete itemGroups[ props.group ]
+        }
+      })
+
+      const group = watch(
+        () => itemGroups[ props.group ],
+        (val, oldVal) => {
+          if (oldVal === uniqueId && val !== void 0 && val !== uniqueId) {
+            hide()
+          }
+        }
+      )
+
+      exitGroup = () => {
+        show()
+        group()
+
+        if (itemGroups[ props.group ] === uniqueId) {
+          delete itemGroups[ props.group ]
+        }
+
+        exitGroup = void 0
+      }
+    }
+
+    function getToggleIcon () {
+      const data = {
+        class: [
+          'q-focusable relative-position cursor-pointer'
+            + `${ props.denseToggle === true && props.switchToggleSide === true ? ' items-end' : '' }`,
+          props.expandIconClass
+        ],
+        side: props.switchToggleSide !== true,
+        avatar: props.switchToggleSide
+      }
+
+      const child = [
+        h(QIcon, {
+          class: 'q-expansion-item__toggle-icon'
+            + (props.expandedIcon === void 0 && showing.value === true
+              ? ' q-expansion-item__toggle-icon--rotated'
+              : ''),
+          name: expansionIcon.value
+        })
+      ]
+
+      if (activeToggleIcon.value === true) {
+        Object.assign(data, {
+          tabindex: 0,
+          onClick: toggleIcon,
+          onKeyup: toggleIconKeyboard
+        })
+
+        child.unshift(
+          h('div', {
+            ref: blurTargetRef,
+            class: 'q-expansion-item__toggle-focus q-icon q-focus-helper q-focus-helper--rounded',
+            tabindex: -1
+          })
+        )
+      }
+
+      return h(QItemSection, data, () => child)
+    }
+
+    function getHeaderChild () {
+      let child
+
+      if (slots.header !== void 0) {
+        child = [].concat(slots.header())
+      }
+      else {
+        child = [
+          h(QItemSection, () => [
+            h(QItemLabel, { lines: props.labelLines }, () => props.label || ''),
+
+            props.caption
+              ? h(QItemLabel, { lines: props.captionLines, caption: true }, () => props.caption)
+              : null
+          ])
+        ]
+
+        props.icon && child[ props.switchToggleSide === true ? 'push' : 'unshift' ](
+          h(QItemSection, {
+            side: props.switchToggleSide === true,
+            avatar: props.switchToggleSide !== true
+          }, () => h(QIcon, { name: props.icon }))
+        )
+      }
+
+      props.disable !== true && child[ props.switchToggleSide === true ? 'unshift' : 'push' ](
+        getToggleIcon()
+      )
+
+      return child
+    }
+
+    function getHeader () {
+      const data = {
+        ref: 'item',
+        style: props.headerStyle,
+        class: props.headerClass,
+        dark: isDark.value,
+        disable: props.disable,
+        dense: props.dense,
+        insetLevel: props.headerInsetLevel
+      }
+
+      if (isClickable.value === true) {
+        data.clickable = true
+        data.onClick = onHeaderClick
+
+        hasLink.value === true && Object.assign(
+          data,
+          linkProps.value
+        )
+      }
+
+      return h(QItem, data, getHeaderChild)
+    }
+
+    function getTransitionChild () {
+      return withDirectives(
+        h('div', {
+          key: 'e-content',
+          class: 'q-expansion-item__content relative-position',
+          style: contentStyle.value
+        }, hSlot(slots.default)),
+        [ [
+          vShow,
+          showing.value
+        ] ]
+      )
+    }
+
+    function getContent () {
+      const node = [
+        getHeader(),
+
+        h(QSlideTransition, {
+          duration: props.duration,
+          onShow,
+          onHide
+        }, getTransitionChild)
+      ]
+
+      if (props.expandSeparator === true) {
+        node.push(
+          h(QSeparator, {
+            class: 'q-expansion-item__border q-expansion-item__border--top absolute-top',
+            dark: isDark.value
+          }),
+          h(QSeparator, {
+            class: 'q-expansion-item__border q-expansion-item__border--bottom absolute-bottom',
+            dark: isDark.value
+          })
+        )
+      }
+
+      return node
+    }
+
+    props.group !== void 0 && enterGroup()
+
+    onBeforeUnmount(() => {
+      exitGroup !== void 0 && exitGroup()
+    })
+
+    return () => h('div', { class: classes.value }, [
+      h('div', { class: 'q-expansion-item__container relative-position' }, getContent())
+    ])
+  }
+})