kdutify 0.16.9-rc.0 → 2.6.1

package/types/services/theme.d.ts

@@ -0,0 +1,80 @@
+export interface Theme {
+  dark: boolean
+  disable: boolean
+  default: string | false
+  options: {
+    /** @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script */
+    cspNonce?: string
+    customProperties?: boolean
+    minifyTheme?: ThemeMinifyTheme
+    themeCache?: KdutifyThemeCache
+    variations?: boolean
+  }
+  themes: {
+    dark: KdutifyThemeVariant
+    light: KdutifyThemeVariant
+  }
+  readonly currentTheme: Partial<KdutifyThemeVariant>
+}
+
+export interface ThemeOptions {
+  dark?: boolean
+  disable?: boolean
+  default?: string | false
+  options?: {
+    /** @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script */
+    cspNonce?: string
+    customProperties?: boolean
+    minifyTheme?: ThemeMinifyTheme
+    themeCache?: KdutifyThemeCache
+    variations?: boolean
+  }
+  themes?: {
+    dark?: Partial<KdutifyThemeVariant>
+    light?: Partial<KdutifyThemeVariant>
+  }
+}
+
+export interface KdutifyThemes {
+  dark: KdutifyThemeVariant
+  light: KdutifyThemeVariant
+}
+
+export interface KdutifyThemeVariant {
+  [name: string]: KdutifyThemeItem | string | number | undefined
+
+  primary: KdutifyThemeItem
+  secondary: KdutifyThemeItem
+  accent: KdutifyThemeItem
+  info: KdutifyThemeItem
+  warning: KdutifyThemeItem
+  error: KdutifyThemeItem
+  success: KdutifyThemeItem
+  anchor?: string | number
+}
+
+export interface KdutifyThemeCache {
+  get: (parsedTheme: KdutifyParsedTheme) => string | null
+  set: (parsedTheme: KdutifyParsedTheme, css: string) => void
+}
+
+export interface KdutifyParsedTheme {
+  [name: string]: KdutifyParsedThemeItem
+}
+
+export interface KdutifyParsedThemeItem {
+  base: string
+  lighten5: string
+  lighten4: string
+  lighten3: string
+  lighten2: string
+  lighten1: string
+  darken1: string
+  darken2: string
+  darken3: string
+  darken4: string
+}
+
+export type KdutifyThemeItem = Partial<KdutifyParsedThemeItem> | string | number | undefined
+
+export type ThemeMinifyTheme = ((css: string) => string) | null

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2021 NKDuy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-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 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.

package/README.md

@@ -1,70 +0,0 @@
-<h1 align="center"><a href="https://kdutifyjs.web.app" target="_blank">KdutifyJS</a></h1>
-<p>Kdutify.js is a semantic component framework for Kdu.js 2. It aims to provide clean, semantic and reusable components that make building your application a breeze. Kdutify.js uses Google's <strong><a href="https://material.io/" target="_blank">Material Design</a></strong> design pattern, taking cues from other popular frameworks such as <a href="http://materializecss.com/" target="_blank">Materialize.css</a>, <a href="https://getmdl.io/" target="_blank">Material Design Lite</a>, <a href="http://semantic-ui.com/" target="_blank">Semantic UI</a> and <a href="https://v4-alpha.getbootstrap.com/" target="_blank">Bootstrap 4</a></p>
-<p>Build <i>amazing</i> applications with the power of Kdu and Material Design with a massive library of beautifully crafted components. Built for speed, Kdutify components feature an easy-to-remember semantic design that shifts remembering complex classes and markup, to type-as-you speak properties that have simple and clear names.</p
-<p>Kdutify.js supports all <strong>modern browsers</strong>, including IE11 and Safari 9+. From mobile to laptop to desktop, you can rest assured that your application will work as expected. Interested in the bleeding edge? Try the kdu-cli Webpack SSR (Server side rendered) template and build the ultimate UI.</p>
-
-## Demo and Documentation
-
-<a href="https://kdutifyjs.web.app" target="_blank">Documentation</a>
-
-## CDN Quick-start
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
-  <link href="https://unpkg.com/kdutify/dist/kdutify.min.css" rel="stylesheet">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
-</head>
-<body>
-  <div id="app">
-    <k-app>
-      <main>
-        <k-container>Hello world</k-container>
-      </main>
-    </k-app>
-  </div>
-
-  <script src="https://unpkg.com/kdu/dist/kdu.js"></script>
-  <script src="https://unpkg.com/kdutify/dist/kdutify.js"></script>
-  <script>
-    new Kdu({
-      el: '#app'
-    })
-  </script>
-</body>
-</html>
-```
-
-## Project Install
-
-``` bash
-# npm
-npm install kdutify
-```
-
-``` bash
-# yarn
-yarn add kdutify
-```
-
-## Use
-
-```javascript
-import Kdu from 'kdu'
-import Kdutify from 'kdutify'
-
-Kdu.use(Kdutify)
-```
-
-For including styles, you can either place the below styles in your ```index.html```
-```html
-<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
-<link href="https://unpkg.com/kdutify/dist/kdutify.min.css" rel="stylesheet">
-```
-Or you can import it to your webpack entry point
-```javascript
-require('/path/to/node_modules/kdutify/dist/kdutify.min.css')
-```
-Keep in mind, you will need to ensure your webpack config contains a css-loader.

package/dist/kdutify.min.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"kdutify.min.css","sourceRoot":""}

package/es5/components/KBottomNav/KBottomNav.js

@@ -1,50 +0,0 @@
-require('../../../src/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: function active() {
-      this.update();
-    }
-  },
-
-  computed: {
-    classes: function classes() {
-      return {
-        'bottom-nav': true,
-        'bottom-nav--absolute': this.absolute,
-        'bottom-nav--shift': this.shift,
-        'bottom-nav--active': this.value
-      };
-    }
-  },
-
-  methods: {
-    isSelected: function isSelected(i) {
-      var item = this.getValue(i);
-      return this.active === item;
-    },
-    updateValue: function updateValue(i) {
-      var item = this.getValue(i);
-      this.$emit('update:active', item);
-    }
-  },
-
-  render: function render(h) {
-    return h('div', {
-      class: this.classes
-    }, this.$slots.default);
-  }
-};

package/es5/components/KBottomNav/index.js

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

package/es5/components/KCard/KCardMedia.js

@@ -1,41 +0,0 @@
-export default {
-  name: 'k-card-media',
-
-  props: {
-    contain: Boolean,
-    height: {
-      type: [Number, String],
-      default: 'auto'
-    },
-    src: {
-      type: String
-    }
-  },
-
-  render: function render(h) {
-    var data = {
-      'class': 'card__media',
-      style: {
-        height: !isNaN(this.height) ? this.height + 'px' : this.height
-      },
-      on: this.$listeners
-    };
-
-    var children = [];
-
-    if (this.src) {
-      children.push(h('div', {
-        'class': 'card__media__background',
-        style: {
-          background: 'url(' + this.src + ') center center / ' + (this.contain ? 'contain' : 'cover') + ' no-repeat'
-        }
-      }));
-    }
-
-    children.push(h('div', {
-      'class': 'card__media__content'
-    }, this.$slots.default));
-
-    return h('div', data, children);
-  }
-};

package/es5/components/KCard/KCardTitle.js

@@ -1,21 +0,0 @@
-export default {
-  name: 'k-card-title',
-
-  functional: true,
-
-  props: {
-    primaryTitle: Boolean
-  },
-
-  render: function render(h, _ref) {
-    var data = _ref.data,
-        props = _ref.props,
-        children = _ref.children;
-
-    data.staticClass = ('card__title ' + (data.staticClass || '')).trim();
-
-    if (props.primaryTitle) data.staticClass += ' card__title--primary';
-
-    return h('div', data, children);
-  }
-};

package/es5/components/KDataTable/mixins/body.js

@@ -1,103 +0,0 @@
-import RowExpandTransitionFunctions from '../../transitions/row-expand-transition';
-
-export default {
-  methods: {
-    genTBody: function genTBody() {
-      var children = [];
-
-      if (!this.itemsLength) {
-        children.push(this.genEmptyBody(this.noDataText));
-      } else if (!this.filteredItems.length) {
-        children.push(this.genEmptyBody(this.noResultsText));
-      } else {
-        children.push(this.genFilteredItems());
-      }
-
-      return this.$createElement('tbody', children);
-    },
-    genExpandedRow: function genExpandedRow(props) {
-      var children = [];
-
-      if (this.isExpanded(props.item)) {
-        var expand = this.$createElement('div', {
-          class: 'datatable__expand-content',
-          key: props.item[this.itemKey]
-        }, this.$scopedSlots.expand(props));
-
-        children.push(expand);
-      }
-
-      var transition = this.$createElement('transition-group', {
-        class: 'datatable__expand-col',
-        attrs: { colspan: '100%' },
-        props: {
-          tag: 'td'
-        },
-        on: RowExpandTransitionFunctions
-      }, children);
-
-      return this.genTR([transition], { class: 'datatable__expand-row' });
-    },
-    createProps: function createProps(item, index) {
-      var _this = this;
-
-      var props = { item: item, index: index };
-      var key = this.itemKey;
-
-      Object.defineProperty(props, 'selected', {
-        get: function get() {
-          return _this.selected[item[_this.itemKey]];
-        },
-        set: function set(value) {
-          var selected = _this.value.slice();
-          if (value) selected.push(item);else selected = selected.filter(function (i) {
-            return i[key] !== item[key];
-          });
-          _this.$emit('input', selected);
-        }
-      });
-
-      Object.defineProperty(props, 'expanded', {
-        get: function get() {
-          return _this.expanded[item[_this.itemKey]];
-        },
-        set: function set(value) {
-          if (!_this.expand) {
-            Object.keys(_this.expanded).forEach(function (key) {
-              _this.$set(_this.expanded, key, false);
-            });
-          }
-          _this.$set(_this.expanded, item[_this.itemKey], value);
-        }
-      });
-
-      return props;
-    },
-    genFilteredItems: function genFilteredItems() {
-      var _this2 = this;
-
-      var rows = [];
-      this.filteredItems.forEach(function (item, index) {
-        var props = _this2.createProps(item, index);
-        var row = _this2.$scopedSlots.items ? _this2.$scopedSlots.items(props) : [];
-
-        rows.push(_this2.needsTR(row) ? _this2.genTR(row, {
-          attrs: { active: _this2.isSelected(item) }
-        }) : row);
-
-        if (_this2.$scopedSlots.expand) {
-          var expandRow = _this2.genExpandedRow(props);
-          rows.push(expandRow);
-        }
-      });
-
-      return rows;
-    },
-    genEmptyBody: function genEmptyBody(text) {
-      return this.genTR([this.$createElement('td', {
-        'class': 'text-xs-center',
-        attrs: { colspan: '100%' }
-      }, text)]);
-    }
-  }
-};

package/es5/components/KDataTable/mixins/foot.js

@@ -1,118 +0,0 @@
-export default {
-  methods: {
-    genPrevIcon: function genPrevIcon() {
-      var _this = this;
-
-      return this.$createElement('k-btn', {
-        props: {
-          disabled: this.computedPagination.page === 1,
-          icon: true,
-          flat: true,
-          dark: this.dark,
-          light: this.light
-        },
-        on: {
-          click: function click() {
-            var page = _this.computedPagination.page;
-            _this.updatePagination({ page: page - 1 });
-          }
-        },
-        attrs: {
-          'aria-label': 'Previous page' // TODO: Localization
-        }
-      }, [this.$createElement('k-icon', 'chevron_left')]);
-    },
-    genNextIcon: function genNextIcon() {
-      var _this2 = this;
-
-      var pagination = this.computedPagination;
-      var disabled = pagination.rowsPerPage < 0 || pagination.page * pagination.rowsPerPage >= this.itemsLength || this.pageStop < 0;
-
-      return this.$createElement('k-btn', {
-        props: {
-          disabled: disabled,
-          icon: true,
-          flat: true,
-          dark: this.dark,
-          light: this.light
-        },
-        on: {
-          click: function click() {
-            var page = _this2.computedPagination.page;
-            _this2.updatePagination({ page: page + 1 });
-          }
-        },
-        attrs: {
-          'aria-label': 'Next page' // TODO: Localization
-        }
-      }, [this.$createElement('k-icon', 'chevron_right')]);
-    },
-    genSelect: function genSelect() {
-      var _this3 = this;
-
-      return this.$createElement('div', {
-        'class': 'datatable__actions__select'
-      }, [this.rowsPerPageText, this.$createElement('k-select', {
-        attrs: {
-          'aria-label': this.rowsPerPageText
-        },
-        props: {
-          items: this.rowsPerPageItems,
-          value: this.computedPagination.rowsPerPage,
-          hideDetails: true,
-          auto: true,
-          minWidth: '75px'
-        },
-        on: {
-          input: function input(val) {
-            _this3.updatePagination({
-              page: 1,
-              rowsPerPage: val
-            });
-          }
-        }
-      })]);
-    },
-    genPagination: function genPagination() {
-      var pagination = '–';
-
-      if (this.itemsLength) {
-        var stop = this.itemsLength < this.pageStop || this.pageStop < 0 ? this.itemsLength : this.pageStop;
-
-        pagination = this.$scopedSlots.pageText ? this.$scopedSlots.pageText({
-          pageStart: this.pageStart + 1,
-          pageStop: stop,
-          itemsLength: this.itemsLength
-        }) : this.pageStart + 1 + '-' + stop + ' of ' + this.itemsLength;
-      }
-
-      return this.$createElement('div', {
-        'class': 'datatable__actions__pagination'
-      }, [pagination]);
-    },
-    genActions: function genActions() {
-      return [this.$createElement('div', {
-        'class': 'datatable__actions'
-      }, [this.genSelect(), this.genPagination(), this.genPrevIcon(), this.genNextIcon()])];
-    },
-    genTFoot: function genTFoot() {
-      var children = [];
-
-      if (this.$slots.footer) {
-        var footer = this.$slots.footer;
-        var row = this.needsTR(footer) ? this.genTR(footer) : footer;
-
-        children.push(row);
-      }
-
-      if (!this.hideActions) {
-        children.push(this.genTR([this.$createElement('td', {
-          attrs: { colspan: '100%' }
-        }, this.genActions())]));
-      }
-
-      if (!children.length) return null;
-      return this.$createElement('tfoot', children);
-    }
-  }
-};

package/es5/components/KDataTable/mixins/head.js

@@ -1,123 +0,0 @@
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-export default {
-  methods: {
-    genTHead: function genTHead() {
-      var _this = this;
-
-      if (this.hideHeaders) return; // Exit Early since no headers are needed.
-
-      var children = [];
-
-      if (this.$scopedSlots.headers) {
-        var row = this.$scopedSlots.headers({
-          headers: this.headers,
-          indeterminate: this.indeterminate,
-          all: this.all
-        });
-
-        children = this.needsTR(row) ? this.genTR(row) : row;
-      } else {
-        var _row = this.headers.map(function (o) {
-          return _this.genHeader(o);
-        });
-        var checkbox = this.$createElement('k-checkbox', {
-          props: {
-            dark: this.dark,
-            light: this.light,
-            color: this.selectAll === true ? '' : this.selectAll,
-            hideDetails: true,
-            inputValue: this.all,
-            indeterminate: this.indeterminate
-          },
-          on: { change: this.toggle }
-        });
-
-        this.hasSelectAll && _row.unshift(this.$createElement('th', [checkbox]));
-
-        children = this.genTR(_row);
-      }
-
-      return this.$createElement('thead', [children]);
-    },
-    genHeader: function genHeader(header) {
-      var array = [this.$scopedSlots.headerCell ? this.$scopedSlots.headerCell({ header: header }) : header[this.headerText]];
-
-      return this.$createElement.apply(this, ['th'].concat(_toConsumableArray(this.genHeaderData(header, array))));
-    },
-    genHeaderData: function genHeaderData(header, children) {
-      var classes = ['column'];
-      var data = {
-        attrs: {
-          role: 'columnheader',
-          scope: 'col',
-          'aria-label': header[this.headerText] || '',
-          'aria-sort': 'none'
-        }
-      };
-
-      if ('sortable' in header && header.sortable || !('sortable' in header)) {
-        this.genHeaderSortingData(header, children, data, classes);
-      } else {
-        data.attrs['aria-label'] += ': Not sorted.'; // TODO: Localization
-      }
-
-      classes.push('text-xs-' + (header.align || 'right'));
-      if (Array.isArray(header.class)) {
-        classes.push.apply(classes, _toConsumableArray(header.class));
-      } else if (header.class) {
-        classes.push(header.class);
-      }
-      data.class = classes;
-
-      return [data, children];
-    },
-    genHeaderSortingData: function genHeaderSortingData(header, children, data, classes) {
-      var _this2 = this;
-
-      if (!('value' in header)) {
-        console.warn('Data table headers must have a value property that corresponds to a value in the k-model array');
-      }
-
-      data.attrs.tabIndex = 0;
-      data.on = {
-        click: function click() {
-          _this2.expanded = [];
-          _this2.sort(header.value);
-        },
-        keydown: function keydown(e) {
-          // check for space
-          if (e.keyCode === 32) {
-            e.preventDefault();
-            _this2.sort(header.value);
-          }
-        }
-      };
-
-      classes.push('sortable');
-      var icon = this.$createElement('k-icon', { attrs: { 'aria-hidden': true } }, 'arrow_upward');
-      if (header.align && header.align === 'left') {
-        children.push(icon);
-      } else {
-        children.unshift(icon);
-      }
-
-      var pagination = this.computedPagination;
-      var beingSorted = pagination.sortBy === header.value;
-      if (beingSorted) {
-        classes.push('active');
-        if (pagination.descending) {
-          classes.push('desc');
-          data.attrs['aria-sort'] = 'descending';
-          data.attrs['aria-label'] += ': Sorted descending. Activate to remove sorting.'; // TODO: Localization
-        } else {
-          classes.push('asc');
-          data.attrs['aria-sort'] = 'ascending';
-          data.attrs['aria-label'] += ': Sorted ascending. Activate to sort descending.'; // TODO: Localization
-        }
-      } else {
-        data.attrs['aria-label'] += ': Not sorted. Activate to sort ascending.'; // TODO: Localization
-      }
-    }
-  }
-};

package/es5/components/KDataTable/mixins/progress.js

@@ -1,16 +0,0 @@
-export default {
-  methods: {
-    genTProgress: function genTProgress() {
-      var col = this.$createElement('th', {
-        staticClass: 'column',
-        attrs: {
-          colspan: '100%'
-        }
-      }, [this.genProgress()]);
-
-      return this.$createElement('thead', {
-        staticClass: 'datatable__progress'
-      }, [this.genTR([col])]);
-    }
-  }
-};