Patch 1.0.4 (#9)

* chore: update BS 4.1.3, Shards 2.1.0 * chore: update dist * chore: update readme * fix: computed `d-col` offset and order classes * fix: incorrect use of `.includes()` in `<d-list-group-item>` * fix: propagate link-specific props for d-dropdown-item * feature(d-progress): add size prop + docs * fix(d-card): bind listeners to the card component * fix(d-datepicker): fix highlighted colors * feature(d-datepicker): impr. highlighted dates, add small datepicker prop/modifier * fix(d-datepicker): fix datepickers inside input groups * fix(d-input): allow file inputs (temp) * chore: bump version number (1.0.4), update dist + changelog
DesignRevision · Oct 15, 2018 · e0135af · e0135af
1 parent 439f72a
commit e0135af
Show file tree

Hide file tree

Showing 25 changed files with 700 additions and 421 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,34 @@
 
 All notable changes to this project will be documented in this file.
 
-## [1.0.0] - 2018-09-11
+### 1.0.4 - (2018-10-15)
+
+* feature(d-datepicker): impr. highlighted dates, add small datepicker prop/modifier
+* feature(d-progress): add size prop + docs
+* fix(d-input): allow file inputs (temp)
+* fix(d-datepicker): fix datepickers inside input groups
+* fix(d-datepicker): fix highlighted colors
+* fix(d-card): bind listeners to the card component
+* fix: propagate link-specific props for d-dropdown-item
+* fix: incorrect use of `.includes()` in `<d-list-group-item>`
+* fix: computed `d-col` offset and order classes
+* chore: update readme
+
+### 1.0.3 - (2018-09-18)
+
+* chore: update BS 4.1.3, Shards 2.1.0
+* chore: update dist
+
+### 1.0.2 - (2018-09-18)
+
+* fix(alert): close button alert issues
+* fix(d-link): invalid `to` prop binding
+
+### 1.0.1 - (2018-09-12)
+
+* Fixed linting errors.
+
+### 1.0.0 - (2018-09-11)
 
 * Initial release.
+
diff --git a/README.md b/README.md
@@ -138,7 +138,7 @@ If you'd like to fix a bug or work on a feature, make sure to follow the steps b
 
 1. Clone the repository.
 2. Run `yarn` to install all required dependencies.
-3. Install Vue CLI and the CLI service globally by running: `npm i -g @vue/cli @vue/cli-service-global`.
+3. Install Vue CLI and the CLI service globally by running: `npm i -g @vue/cli @vue/cli-service-global` or `yarn global add @vue/cli-service-global`.
 4. Run `yarn watch` in order to kickstart the server and run the sandbox with hot reloading.
 5. Refer to the `sandbox/Sandbox.vue` file for more details.
 

diff --git a/dist/shards-vue.common.js b/dist/shards-vue.common.js
diff --git a/dist/shards-vue.common.js.map b/dist/shards-vue.common.js.map
diff --git a/dist/shards-vue.common.min.js b/dist/shards-vue.common.min.js
diff --git a/dist/shards-vue.common.min.map b/dist/shards-vue.common.min.map
diff --git a/dist/shards-vue.esm.js b/dist/shards-vue.esm.js
diff --git a/dist/shards-vue.esm.js.map b/dist/shards-vue.esm.js.map
diff --git a/dist/shards-vue.esm.min.js b/dist/shards-vue.esm.min.js
diff --git a/dist/shards-vue.esm.min.map b/dist/shards-vue.esm.min.map
diff --git a/dist/shards-vue.umd.js b/dist/shards-vue.umd.js
diff --git a/dist/shards-vue.umd.js.map b/dist/shards-vue.umd.js.map
diff --git a/dist/shards-vue.umd.min.js b/dist/shards-vue.umd.min.js
diff --git a/dist/shards-vue.umd.min.map b/dist/shards-vue.umd.min.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "shards-vue",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
   "description": "A free, beautiful and modern Vue.js UI kit based on the Shards UI kit.",
   "main": "dist/shards-vue.common.js",

diff --git a/src/components/card/Card.vue b/src/components/card/Card.vue
@@ -1,6 +1,7 @@
 <template>
     <component :is="tag"
         v-bind="$attrs"
+        v-on="$listeners"
         :class="[
             'card',
             Boolean(align) ? `text-${align}` : '',

diff --git a/src/components/container/Col.vue b/src/components/container/Col.vue
@@ -24,8 +24,9 @@ export const createBreakpointClass = (type, breakpoint, val) => {
 
     let className = type
 
-    if (breakpoint) // -md ?
-        className += `-${breakpoint}`
+    if (breakpoint) {
+        className += `-${breakpoint.replace(type, '')}` // -md ?
+    }
 
     if (type === 'col' && (val === '' || val === true)) {
         return className.toLowerCase() // .col-md

diff --git a/src/components/datepicker/Datepicker.vue b/src/components/datepicker/Datepicker.vue
@@ -1,6 +1,33 @@
 <template>
     <VueDatepicker
-        v-bind="$props"
+        :value="value"
+        :name="name"
+        :id="id"
+        :format="format"
+        :language="language"
+        :open-date="openDate"
+        :day-cell-content="dayCellContent"
+        :full-month-name="fullMonthName"
+        :disabled-dates="disabledDates"
+        :highlighted="highlighted"
+        :placeholder="placeholder"
+        :inline="inline"
+        :calendar-class="computedCalendarClass"
+        :input-class="inputClass"
+        :wrapper-class="wrapperClass"
+        :monday-first="mondayFirst"
+        :clear-button="clearButton"
+        :clear-button-icon="clearButtonIcon"
+        :calendar-button="calendarButton"
+        :calendar-button-icon="calendarButtonIcon"
+        :calendar-button-icon-content="calendarButtonIconContent"
+        :initial-view="initialView"
+        :disabled="disabled"
+        :required="required"
+        :typeable="typeable"
+        :use-utc="useUtc"
+        :minimum-view="minimumView"
+        :maximum-view="maximumView"
         v-on="$listeners">
             <slot name="beforeCalendarHeader" slot="beforeCalendarHeader" />
             <slot name="afterDateInput" slot="afterDateInput" />
@@ -86,7 +113,10 @@ export default {
         /**
          * The CSS class applied to the calendar element.
          */
-        calendarClass: [String, Object, Array],
+        calendarClass: {
+            type: [String, Object, Array],
+            default: ''
+        },
         /**
          * The CSS Class applied to the input element.
          */
@@ -155,6 +185,20 @@ export default {
         maximumView: {
             type: String,
             default: 'year'
+        },
+        /**
+         * Whether the datepicker should be small, or not.
+         */
+        small: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        computedCalendarClass() {
+            let _calendarClass = this.small ? 'vdp-datepicker__small' : ''
+
+            return _calendarClass += this.calendarClass
         }
     }
 }
@@ -193,92 +237,150 @@ export default {
     $datepicker-cell-line-height: 2;
     $datepicker-cell-font-size: 1rem;
 
-    .vdp-datepicker__calendar {
-        color: $datepicker-color;
-        padding: $datepicker-padding-y $datepicker-padding-x;
-        min-width: $datepicker-min-width;
-        font-size: $datepicker-font-size;
-        font-weight: $datepicker-font-weight;
-        font-family: $font-system;
-        background-color: $datepicker-background-color;
-        border: $datepicker-border;
-        border-radius: $datepicker-border-radius;
-        box-shadow: $datepicker-drop-shadows;
-        border: 1px solid rgba($black,.15) !important;
-
-        // Header
-        header {
-            display: flex;
-            padding-bottom: 10px;
-
-            span {
-                transition: $transition-default;
-                border-radius: $border-radius-default;
-                font-weight: 500;
+    $datepicker-small-padding-y: .625rem;
+    $datepicker-small-padding-x: .625rem;
+    $datepicker-small-font-size: .75rem;
+    $datepicker-small-max-width: 235px;
 
-                &.next:after {
-                    border-left-color: $color-silver-sand;
-                }
+    $datepicker-small-day-font-size: 12px;
+    $datepicker-small-day-font-weight: 500;
+    $datepicker-small-day-width: 1.875rem;
+    $datepicker-small-day-height: 1.875rem;
+    $datepicker-small-day-line-height: 2.25;
 
-                &.prev:after {
-                    border-right-color: $color-silver-sand;
-                }
-            }
-        }
+    $datepicker-small-day-header-font-size: 100%;
 
-        // Header elements and specific calendar cells.
-        header span,
-        .cell.day:not(.disabled):not(.blank), .cell.month, .cell.year {
-            &:hover {
-                background-color: $datepicker-cell-hover-color;
-                border-color: $border-color !important;
-            }
-        }
+    div.vdp-datepicker {
+        &__calendar {
+            color: $datepicker-color;
+            padding: $datepicker-padding-y $datepicker-padding-x;
+            min-width: $datepicker-min-width;
+            font-size: $datepicker-font-size;
+            font-weight: $datepicker-font-weight;
+            font-family: $font-system;
+            background-color: $datepicker-background-color;
+            border: $datepicker-border;
+            border-radius: $datepicker-border-radius;
+            box-shadow: $datepicker-drop-shadows;
+            border: 1px solid rgba($black,.15) !important;
 
-        // Cells
-        .cell {
-            line-height: $datepicker-cell-line-height;
-            font-size: $datepicker-cell-font-size;
-            border-radius: $border-radius-default;
-            transition: $transition-default;
-            border-color: $border-color;
-            height: auto;
-
-            // Day headers
-            &.day-header {
-                font-weight: 500;
-            }
+            // Header
+            header {
+                display: flex;
+                padding-bottom: 10px;
 
-            // Days
-            &.day {
-                width: $datepicker-cell-width;
-                height: $datepicker-cell-height;
-                border-radius: 50%;
-            }
+                span {
+                    transition: $transition-default;
+                    border-radius: $border-radius-default;
+                    font-weight: 500;
+
+                    &.next:after {
+                        border-left-color: $color-silver-sand;
+                    }
 
-            // Months
-            &.month,
-            &.year {
-                height: $datepicker-cell-height;
-                font-size: 12px;
-                line-height: 33px;
+                    &.prev:after {
+                        border-right-color: $color-silver-sand;
+                    }
+                }
             }
 
-            // Selected
-            &.selected,
-            &.highlighted.selected {
-                background: $color-primary !important;
-                color: $white;
+            // Header elements and specific calendar cells.
+            header span,
+            .cell.day:not(.disabled):not(.blank), .cell.month, .cell.year {
                 &:hover {
-                    background: darken($color-primary, 5) !important;
+                    background-color: $datepicker-cell-hover-color;
                     border-color: $border-color !important;
                 }
             }
 
-            &.highlighted {
-                background: lighten($color-primary, 45) !important;
-                &:hover {
-                    border-color: $border-color !important;
+            // Cells
+            .cell {
+                line-height: $datepicker-cell-line-height;
+                font-size: $datepicker-cell-font-size;
+                border-radius: $border-radius-default;
+                transition: $transition-default;
+                border-color: $border-color;
+                height: auto;
+
+                // Day headers
+                &.day-header {
+                    font-weight: 500;
+                }
+
+                // Days
+                &.day {
+                    width: $datepicker-cell-width;
+                    height: $datepicker-cell-height;
+                    border-radius: 50%;
+                }
+
+                // Months
+                &.month,
+                &.year {
+                    height: $datepicker-cell-height;
+                    font-size: 12px;
+                    line-height: 33px;
+                }
+
+                // Selected
+                &.selected,
+                &.highlighted.selected {
+                    background: $color-primary !important;
+                    color: $white;
+                    &:hover {
+                        background: darken($color-primary, 5) !important;
+                        border-color: $border-color !important;
+                    }
+                }
+
+                &.highlighted {
+                    background: $color-primary;
+                    color: $white;
+
+                    &:hover {
+                        background: darken($color-primary, 5) !important;
+                        border-color: $border-color !important;
+                    }
+
+                    &:not(.highlight-start):not(.highlight-end) {
+                        border-radius: 0;
+                    }
+
+                    &.highlight-start {
+                        border-top-right-radius: 0;
+                        border-bottom-right-radius: 0;
+                    }
+
+                    &.highlight-end {
+                        border-top-left-radius: 0;
+                        border-bottom-left-radius: 0;
+                    }
+                }
+            }
+        }
+
+        // Small Datepicker modifier.
+        &__small {
+            padding: $datepicker-small-padding-y $datepicker-small-padding-x;
+            font-size: $datepicker-small-font-size;
+            max-width: $datepicker-small-max-width;
+
+            .cell {
+                &.day {
+                    width: $datepicker-small-day-width;
+                    height: $datepicker-small-day-height;
+                    line-height: $datepicker-small-day-line-height;
+                }
+
+                &.day,
+                &.month,
+                &.year {
+                    font-size: $datepicker-small-day-font-size;
+                    font-weight: $datepicker-small-day-font-weight;
+                }
+
+                &.day-header {
+                    font-size: $datepicker-small-day-header-font-size;
                 }
             }
         }

diff --git a/src/components/dropdown/DropdownItem.vue b/src/components/dropdown/DropdownItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <d-link class="dropdown-item" role="menuitem">
+    <d-link class="dropdown-item" role="menuitem" v-bind="$props">
         <slot />
     </d-link>
 </template>