@everchron/ec-shards 0.8.6 → 0.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "0.8.6",
+  "version": "0.8.9",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/assets/icons/color-bucket.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.86283 19.7861L5.809 15.7323C4.91308 14.8364 4.91308 13.3847 5.809 12.4888L11.9125 6.38531L19.2098 13.6826L13.1063 19.7861C12.2104 20.681 10.7577 20.681 9.86283 19.7861V19.7861Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" />
+<path vector-effect="non-scaling-stroke" d="M22.4566 16.9218C22.4566 16.9218 20.1632 19.4102 20.1632 20.9356C20.1632 22.1966 21.1956 23.229 22.4566 23.229C23.7176 23.229 24.75 22.1966 24.75 20.9345C24.75 19.4102 22.4566 16.9218 22.4566 16.9218V16.9218Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M11.9125 6.3875L10.7317 5.185" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M19.2142 13.6783H5.17416" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M5.705 25.2267H15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/dropdown/dropdown.vue

@@ -0,0 +1,117 @@
+<template>
+  <div @click="handleClick" class="ecs-dropdown" :class="[sizeClass, disabled ? 'disabled' : '', inline ? 'inline' : '']">
+    <div class="ecs-dropdown-inner">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    /** Sets the size of the dropdown component. */
+    size: {
+      type: String,
+      validator: v => ['sml', 'md', 'lg'].includes(v),
+      default: 'md'
+    },
+    /** Turns the dropdown into disabled mode. */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** Sets the dropdown to an inline element, which means it will adjust to the width of it's content, not to parent width. */
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    sizeClass() {
+      if (this.size && this.size !== '')
+        return `ecs-dropdown-${this.size}`
+      return this.size
+    }
+  },
+
+  methods: {
+    handleClick (e) {
+      if(!this.disabled)
+         /** Emits the click event, if dropdown is not set to disabled. */
+        this.$emit('click', e)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../tokens/tokens";
+@import "../mixins/svg-uri";
+
+.ecs-dropdown{
+  display: flex;
+  align-items: center;
+  border: $input-border-width solid rgba($gray-8, .4);
+  border-radius: 4px;
+  position: relative;
+  background: #FFF;
+  transition: .2s;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover,
+  &:focus{
+    border-color: darken(rgba($gray-8, .4), 4%);
+    box-shadow: 0 1px 1px rgba($gray-8, .1);
+
+    &:after{
+      opacity: .5;
+    }
+  }
+
+  &.inline{
+    display: inline-flex;
+  }
+
+  &.disabled{
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  &:after{
+    width: 11px;
+    height: 7px;
+    content: "";
+    opacity: .4;
+    transition: .2s;
+    margin-left: 16px;
+    flex-shrink: 0;
+    background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 11 7"><polyline fill="none" stroke="#{$gray-13}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="2.081 2.033 5.603 5.052 9.145 2.016"/></svg>');
+  }
+
+  &-sml{
+    height: 24px;
+    padding: 0 8px;
+    font-size: 12px;
+  }
+
+  &-md{
+    height: 32px;
+    padding: 0 8px;
+    font-size: 14px;
+  }
+
+  &-lg{
+    height: 40px;
+    padding: 0 12px;
+    font-size: 14px;
+  }
+
+  &-inner{
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+}
+</style>

package/src/components/index.js

@@ -32,6 +32,7 @@ import EcsDialog from "./dialog/dialog.vue"
 import EcsDialogHeader from "./dialog-header/dialog-header.vue"
 import EcsDirectoryEntry from "./directory-entry/directory-entry.vue"
 import EcsDocumentState from "./document-state/document-state.vue"
+import EcsDropdown from "./dropdown/dropdown.vue"
 import EcsDropzone from "./dropzone/dropzone.vue"
 import EcsEmptyState from "./empty-state/empty-state.vue"
 import EcsExcerptSnippet from "./excerpt-snippet/excerpt-snippet.vue"
@@ -143,6 +144,7 @@ const Components = {
   EcsDialogHeader,
   EcsDirectoryEntry,
   EcsDocumentState,
+  EcsDropdown,
   EcsDropzone,
   EcsEmptyState,
   EcsExcerptSnippet,

package/src/stories/dropdown/dropdown.stories.js

@@ -0,0 +1,38 @@
+import EcsDropdown from '@components/dropdown/dropdown';
+
+export default {
+  title: 'Action/Dropdown',
+  component: EcsDropdown
+};
+
+export const dropdown = () => ({
+  components: { EcsDropdown },
+  template: `<ecs-dropdown>
+               Dropdown
+             </ecs-dropdown>
+            `,
+});
+
+export const dropdownSizes = () => ({
+  components: { EcsDropdown },
+  template: `<div>
+               <ecs-dropdown size="sml" class="mb-6">
+                 Dropdown
+               </ecs-dropdown>
+               <ecs-dropdown size="md" class="mb-6">
+                 Dropdown
+               </ecs-dropdown>
+               <ecs-dropdown size="lg" class="mb-6">
+                 Dropdown
+               </ecs-dropdown>
+            </div>
+            `,
+});
+
+export const dropdownInline = () => ({
+  components: { EcsDropdown },
+  template: `<ecs-dropdown inline>
+               Dropdown
+             </ecs-dropdown>
+            `,
+});