kdutify 0.16.9-rc.0

package/package.json

@@ -0,0 +1,134 @@
+{
+  "name": "kdutify",
+  "version": "0.16.9-rc.0",
+  "author": {
+    "name": "NKDuy",
+    "email": "kn145660@gmail.com"
+  },
+  "license": "MIT",
+  "homepage": "http://kdutifyjs.web.app",
+  "main": "dist/kdutify.js",
+  "unpkg": "dist/kdutify.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "watch": "cross-env TARGET=development webpack --config build/config.js --progress --hide-modules --watch",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.config.js --open --hot",
+    "build": "npm run build:dist && npm run build:es5",
+    "build:dev": "cross-env NODE_ENV=production node build/webpack.dev.config.js",
+    "build:dist": "rimraf dist && cross-env NODE_ENV=production webpack --config build/config.js --progress --hide-modules",
+    "build:es5": "rimraf es5 && cross-env NODE_ENV=es5 babel src --out-dir es5",
+    "debug-build": "node --inspect --debug-brk build/config.js",
+    "debug:test": "./node_modules/.bin/cross-env NODE_ENV=test node --inspect --inspect-brk ./node_modules/jest/bin/jest.js --no-cache --runInBand --verbose",
+    "test": "cross-env NODE_ENV=test jest -i",
+    "lint": "eslint --ext .js,.kdu src",
+    "preparecommitmsg": "node dev/prepare-commit-message.js",
+    "precommit": "yarn run lint && yarn test",
+    "prepush": "yarn run lint && yarn test"
+  },
+  "description": "Kdu.js 2 Semantic Component Framework",
+  "devDependencies": {
+    "autoprefixer": "^7.1.4",
+    "avoriaz": "^4.1.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.0",
+    "babel-jest": "^21.0.2",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-add-filehash": "^6.9.4",
+    "babel-plugin-detective": "^2.0.0",
+    "babel-plugin-module-resolver": "^2.7.1",
+    "babel-plugin-transform-async-to-generator": "^6.24.1",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.5.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "cross-env": "^5.0.5",
+    "cross-spawn": "^5.1.0",
+    "css-loader": "^0.28.7",
+    "css-mqpacker": "^6.0.1",
+    "cssnano": "^3.10.0",
+    "eslint": "^4.6.1",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-config-kdu": "^2.0.2-rc.0",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.6.1",
+    "eslint-plugin-html": "^3.2.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.1.1",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-pug": "^1.0.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-kdu": "^2.1.0-rc.0",
+    "eventsource-polyfill": "^0.9.6",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "function-bind": "^1.1.1",
+    "husky": "^0.14.3",
+    "jest": "^21.1.0",
+    "jest-cli": "^21.1.0",
+    "jest-css-modules": "^1.1.0",
+    "jest-serializer-html": "^4.0.0",
+    "jest-kdu-preprocessor": "^1.1.0-alpha.0",
+    "kdu": "^2.5.16-alpha.0",
+    "kdu-loader": "^15.2.1-beta.0",
+    "kdu-router": "^3.4.0-beta.0",
+    "kdu-server-renderer": "^2.5.16-alpha.0",
+    "kdu-template-compiler": "^2.5.16-alpha.0",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "optimize-js-plugin": "^0.0.4",
+    "postcss-loader": "^1.3.3",
+    "progress-bar-webpack-plugin": "^1.10.0",
+    "pug": "^2.0.0-rc.4",
+    "pug-loader": "^2.3.0",
+    "ress": "^1.1.1",
+    "rimraf": "^2.6.2",
+    "semver": "^5.4.1",
+    "serialize-javascript": "^1.3.0",
+    "style-loader": "^0.18.2",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",
+    "uglifyjs-webpack-plugin": "^0.4.6",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-bundle-size-analyzer": "^2.7.0",
+    "webpack-dev-server": "^2.8.2",
+    "webpack-merge": "^4.1.0",
+    "write-file-webpack-plugin": "^4.1.0"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "kdu": "^2.5.13-alpha.0"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "jest": {
+    "verbose": false,
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "moduleFileExtensions": [
+      "js",
+      "kdu"
+    ],
+    "moduleDirectories": [
+      "node_modules"
+    ],
+    "moduleNameMapper": {
+      "src/(.*)": "<rootDir>/src/$1"
+    },
+    "transform": {
+      ".*\\.(kdu)$": "<rootDir>/node_modules/jest-kdu-preprocessor",
+      "\\.(styl)$": "<rootDir>/node_modules/jest-css-modules",
+      ".*\\.(kdu|js)$": "<rootDir>/node_modules/babel-jest"
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!kdu-router)"
+    ],
+    "snapshotSerializers": [
+      "jest-serializer-html"
+    ]
+  }
+}

package/src/components/KAlert/KAlert.js

@@ -0,0 +1,77 @@
+require('../../stylus/components/_alerts.styl')
+
+import KIcon from '../KIcon'
+
+import Colorable from '../../mixins/colorable'
+import Toggleable from '../../mixins/toggleable'
+import Transitionable from '../../mixins/transitionable'
+
+export default {
+  name: 'k-alert',
+
+  components: {
+    KIcon
+  },
+
+  mixins: [Colorable, Toggleable, Transitionable],
+
+  props: {
+    dismissible: Boolean,
+    icon: String
+  },
+
+  computed: {
+    classes () {
+      return {
+        'alert--dismissible': this.dismissible,
+        [this.color || 'error']: true
+      }
+    }
+  },
+
+  render (h) {
+    const children = [h('div', this.$slots.default)]
+
+    if (this.icon) {
+      children.unshift(h('k-icon', {
+        'class': 'alert__icon'
+      }, this.icon))
+    }
+
+    if (this.dismissible) {
+      const close = h('a', {
+        'class': 'alert__dismissible',
+        domProps: { href: 'javascript:;' },
+        on: { click: () => this.$emit('input', false) }
+      }, [
+        h(KIcon, {
+          props: {
+            right: true
+          }
+        }, 'cancel')
+      ])
+
+      children.push(close)
+    }
+
+    const alert = h('div', {
+      staticClass: 'alert',
+      'class': this.classes,
+      directives: [{
+        name: 'show',
+        value: this.isActive
+      }],
+      on: this.$listeners
+    }, children)
+
+    if (!this.transition) return alert
+
+    return h('transition', {
+      props: {
+        name: this.transition,
+        origin: this.origin,
+        mode: this.mode
+      }
+    }, [alert])
+  }
+}

package/src/components/KAlert/index.js

@@ -0,0 +1,7 @@
+import KAlert from './KAlert'
+
+KAlert.install = function install (Kdu) {
+  Kdu.component(KAlert.name, KAlert)
+}
+
+export default KAlert

package/src/components/KApp/KApp.js

@@ -0,0 +1,64 @@
+require('../../stylus/components/_app.styl')
+
+import Breakpoint from '../../util/breakpoint'
+import Themeable from '../../mixins/themeable'
+import TouchSupport from '../../util/touchSupport'
+
+import Resize from '../../directives/resize'
+
+export default {
+  name: 'k-app',
+
+  mixins: [Breakpoint, Themeable, TouchSupport],
+
+  directives: {
+    Resize
+  },
+
+  data: () => ({
+    resizeTimeout: {}
+  }),
+
+  props: {
+    id: {
+      type: String,
+      default: 'app'
+    }
+  },
+
+  mounted () {
+    this.$kdutify.breakpoint = this.breakpoint
+    window.addEventListener('load', this.runCallbacks)
+  },
+
+  methods: {
+    // Run all load callbacks created
+    // from the load helper utility
+    runCallbacks () {
+      // For unit tests
+      if (!document._loadCallbacks) return
+
+      while (document._loadCallbacks.length) {
+        document._loadCallbacks.pop()()
+      }
+    }
+  },
+
+  render (h) {
+    const data = {
+      staticClass: 'application',
+      'class': {
+        'application--dark': this.dark,
+        'application--light': !this.dark
+      },
+      attrs: { 'data-app': true },
+      domProps: { id: this.id },
+      directives: [{
+        name: 'resize',
+        value: this.onResize
+      }]
+    }
+
+    return h('div', data, this.$slots.default)
+  }
+}

package/src/components/KApp/index.js

@@ -0,0 +1,7 @@
+import KApp from './KApp'
+
+KApp.install = function install (Kdu) {
+  Kdu.component(KApp.name, KApp)
+}
+
+export default KApp

package/src/components/KAvatar/KAvatar.js

@@ -0,0 +1,27 @@
+require('../../stylus/components/_avatars.styl')
+
+export default {
+  name: 'k-avatar',
+
+  functional: true,
+
+  props: {
+    size: {
+      type: String,
+      default: '48px'
+    },
+    tile: Boolean
+  },
+
+  render (h, { data, props, children }) {
+    data.staticClass = (`avatar ${data.staticClass || ''}`).trim()
+    data.style = data.style || {}
+
+    if (props.tile) data.staticClass += ' avatar--tile'
+
+    data.style.height = props.size
+    data.style.width = props.size
+
+    return h('div', data, children)
+  }
+}

package/src/components/KAvatar/index.js

@@ -0,0 +1,7 @@
+import KAvatar from './KAvatar'
+
+KAvatar.install = function install (Kdu) {
+  Kdu.component(KAvatar.name, KAvatar)
+}
+
+export default KAvatar

package/src/components/KBadge/KBadge.js

@@ -0,0 +1,62 @@
+require('../../stylus/components/_badges.styl')
+
+// Mixins
+import Colorable from '../../mixins/colorable'
+import Toggleable from '../../mixins/toggleable'
+
+export default {
+  name: 'k-badge',
+
+  mixins: [Colorable, Toggleable],
+
+  props: {
+    bottom: Boolean,
+    color: {
+      type: String,
+      default: 'primary'
+    },
+    left: Boolean,
+    overlap: Boolean,
+    transition: {
+      type: String,
+      default: 'fab-transition'
+    },
+    value: {
+      default: true
+    }
+  },
+
+  computed: {
+    classes () {
+      return {
+        'badge--bottom': this.bottom,
+        'badge--left': this.left,
+        'badge--overlap': this.overlap
+      }
+    }
+  },
+
+  render (h) {
+    const badge = this.$slots.badge ? [h('span', {
+      staticClass: 'badge__badge',
+      'class': this.addBackgroundColorClassChecks({}),
+      attrs: this.attrs,
+      directives: [{
+        name: 'show',
+        value: this.isActive
+      }]
+    }, this.$slots.badge)] : null
+
+    return h('span', {
+      staticClass: 'badge',
+      'class': this.classes
+    }, [
+      this.$slots.default,
+      h('transition', {
+        props: {
+          name: this.transition
+        }
+      }, badge)
+    ])
+  }
+}

package/src/components/KBadge/index.js

@@ -0,0 +1,7 @@
+import KBadge from './KBadge'
+
+KBadge.install = function install (Kdu) {
+  Kdu.component(KBadge.name, KBadge)
+}
+
+export default KBadge

package/src/components/KBottomNav/KBottomNav.js

@@ -0,0 +1,50 @@
+require('../../stylus/components/_bottom-navs.styl')
+
+import ButtonGroup from '../../mixins/button-group'
+
+export default {
+  name: 'k-bottom-nav',
+
+  mixins: [ButtonGroup],
+
+  props: {
+    absolute: Boolean,
+    active: [Number, String],
+    shift: Boolean,
+    value: { required: false }
+  },
+
+  watch: {
+    active () {
+      this.update()
+    }
+  },
+
+  computed: {
+    classes () {
+      return {
+        'bottom-nav': true,
+        'bottom-nav--absolute': this.absolute,
+        'bottom-nav--shift': this.shift,
+        'bottom-nav--active': this.value
+      }
+    }
+  },
+
+  methods: {
+    isSelected (i) {
+      const item = this.getValue(i)
+      return this.active === item
+    },
+    updateValue (i) {
+      const item = this.getValue(i)
+      this.$emit('update:active', item)
+    }
+  },
+
+  render (h) {
+    return h('div', {
+      class: this.classes
+    }, this.$slots.default)
+  }
+}

package/src/components/KBottomNav/index.js

@@ -0,0 +1,7 @@
+import KBottomNav from './KBottomNav'
+
+KBottomNav.install = function install (Kdu) {
+  Kdu.component(KBottomNav.name, KBottomNav)
+}
+
+export default KBottomNav

package/src/components/KBottomSheet/KBottomSheet.js

@@ -0,0 +1,41 @@
+require('../../stylus/components/_bottom-sheets.styl')
+
+import KDialog from '../KDialog/KDialog'
+
+export default {
+  name: 'k-bottom-sheet',
+
+  components: {
+    KDialog
+  },
+
+  props: {
+    inset: Boolean,
+    value: null
+  },
+
+  render (h) {
+    const activator = h('template', {
+      slot: 'activator'
+    }, this.$slots.activator)
+
+    const contentClass = [
+      'bottom-sheet',
+      this.inset ? 'bottom-sheet--inset' : ''
+    ].join(' ')
+
+    return h(KDialog, {
+      attrs: {
+        ...this.$attrs
+      },
+      on: {
+        ...this.$listeners
+      },
+      props: {
+        contentClass: contentClass,
+        transition: 'bottom-sheet-transition',
+        value: this.value
+      }
+    }, [activator, this.$slots.default])
+  }
+}

package/src/components/KBottomSheet/index.js

@@ -0,0 +1,7 @@
+import KBottomSheet from './KBottomSheet'
+
+KBottomSheet.install = function install (Kdu) {
+  Kdu.component(KBottomSheet.name, KBottomSheet)
+}
+
+export default KBottomSheet

package/src/components/KBreadcrumbs/KBreadcrumbs.js

@@ -0,0 +1,35 @@
+require('../../stylus/components/_breadcrumbs.styl')
+
+export default {
+  name: 'k-breadcrumbs',
+
+  provide () {
+    return {
+      divider: this.divider
+    }
+  },
+
+  props: {
+    divider: {
+      type: String,
+      default: '/'
+    },
+    icons: Boolean
+  },
+
+  computed: {
+    classes () {
+      return {
+        'breadcrumbs': true,
+        'breadcrumbs--with-icons': this.icons
+      }
+    }
+  },
+
+  render (h) {
+    return h('ul', {
+      'class': this.classes,
+      props: { items: this.items }
+    }, this.$slots.default)
+  }
+}

package/src/components/KBreadcrumbs/KBreadcrumbsItem.js

@@ -0,0 +1,38 @@
+import Routable from '../../mixins/routable'
+
+export default {
+  name: 'k-breadcrumbs-item',
+
+  mixins: [Routable],
+
+  inject: ['divider'],
+
+  props: {
+    activeClass: {
+      type: String,
+      default: 'breadcrumbs__item--disabled'
+    }
+  },
+
+  computed: {
+    classes () {
+      const classes = {
+        'breadcrumbs__item': true
+      }
+
+      classes[this.activeClass] = this.disabled
+
+      return classes
+    }
+  },
+
+  render (h) {
+    const { tag, data } = this.generateRouteLink()
+
+    return h('li', {
+      attrs: { 'data-divider': this.divider }
+    }, [
+      h(tag, data, this.$slots.default)
+    ])
+  }
+}

package/src/components/KBreadcrumbs/index.js

@@ -0,0 +1,11 @@
+import KBreadcrumbs from './KBreadcrumbs'
+import KBreadcrumbsItem from './KBreadcrumbsItem'
+
+export { KBreadcrumbs, KBreadcrumbsItem }
+
+KBreadcrumbs.install = function install (Kdu) {
+  Kdu.component(KBreadcrumbs.name, KBreadcrumbs)
+  Kdu.component(KBreadcrumbsItem.name, KBreadcrumbsItem)
+}
+
+export default KBreadcrumbs