npm - @everchron/ec-shards - Versions diffs - 0.6.49 → 0.6.53 - Mend

@everchron/ec-shards 0.6.49 → 0.6.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/ec-shards.common.js +132 -57
package/dist/ec-shards.common.js.map +1 -1
package/dist/ec-shards.css +1 -1
package/dist/ec-shards.umd.js +132 -57
package/dist/ec-shards.umd.js.map +1 -1
package/dist/ec-shards.umd.min.js +2 -2
package/dist/ec-shards.umd.min.js.map +1 -1
package/dist/img/transcript-highlights.489d72c7.svg +1 -0
package/dist/img/transcript-mini-highlights.7173b638.svg +1 -0
package/package.json +1 -1
package/src/assets/.DS_Store +0 -0
package/src/assets/images/file-icons/transcript-highlights.svg +1 -0
package/src/assets/images/file-icons/transcript-mini-highlights.svg +1 -0
package/src/components/file-icon/file-icon.vue +10 -0
package/src/components/form-set/form-set.vue +52 -0
package/src/components/index.js +2 -0
package/src/components/input/input.vue +2 -0
package/src/stories/form-set/form-set.stories.js +16 -0
package/src/stories/form-set/form-set.stories.mdx +36 -0
package/src/stories/radiobutton/radiobutton.stories.mdx +6 -4

package/dist/img/transcript-highlights.489d72c7.svg ADDED Viewed

@@ -0,0 +1 @@

package/dist/img/transcript-mini-highlights.7173b638.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g fill="none" fill-rule="evenodd" transform="translate(4 2)"><rect width="22" height="26" y="1" fill="#9599AF" fill-opacity=".12" rx="2"/><rect width="22" height="26" fill="#9599AF" fill-opacity=".25" rx="2"/><rect width="20" height="24" x="1" y="1" fill="#FFF" rx="1"/><rect width="20" height="1" x="1" y="13" fill="#DFE0E7"/><rect width="1" height="24" x="10.5" y="1" fill="#DFE0E7"/><rect width="4" height="1" x="5" y="16" fill="#6BAFFF" rx=".5"/><rect width="2" height="1" x="2" y="16" fill="#A7CFFF" rx=".5"/><rect width="2" height="1" x="2" y="18" fill="#A7CFFF" rx=".5"/><rect width="2" height="1" x="2" y="20" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="3" height="1" x="5" y="18" fill="#6BAFFF" rx=".5"/><rect width="3" height="1" x="5" y="20" fill="#9599AF" fill-opacity=".5" rx=".5"/><rect width="2" height="1" x="2" y="22" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="3" height="1" x="5" y="22" fill="#9599AF" fill-opacity=".5" rx=".5"/><rect width="4" height="1" x="16" y="16" fill="#9599AF" fill-opacity=".5" rx=".5"/><rect width="2" height="1" x="13" y="16" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="2" height="1" x="13" y="18" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="2" height="1" x="13" y="20" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="3" height="1" x="16" y="18" fill="#9599AF" fill-opacity=".5" rx=".5"/><rect width="3" height="1" x="16" y="20" fill="#9599AF" fill-opacity=".5" rx=".5"/><rect width="2" height="1" x="13" y="22" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="3" height="1" x="16" y="22" fill="#9599AF" fill-opacity=".5" rx=".5"/><rect width="4" height="1" x="16" y="3" fill="#9599AF" fill-opacity=".5" rx=".5"/><rect width="2" height="1" x="13" y="3" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="2" height="1" x="13" y="5" fill="#ACEDCD" rx=".5"/><rect width="2" height="1" x="13" y="7" fill="#ACEDCD" rx=".5"/><rect width="3" height="1" x="16" y="5" fill="#76E2AD" rx=".5"/><rect width="3" height="1" x="16" y="7" fill="#76E2AD" rx=".5"/><rect width="2" height="1" x="13" y="9" fill="#9599AF" fill-opacity=".3" rx=".5"/><rect width="3" height="1" x="16" y="9" fill="#9599AF" fill-opacity=".5" rx=".5"/><polygon fill="#9599AF" fill-rule="nonzero" points="6.41 9 6.41 4.516 8.039 4.516 8.039 3.363 3.355 3.363 3.355 4.516 4.98 4.516 4.98 9"/></g></svg>

package/package.json CHANGED Viewed

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

package/src/assets/.DS_Store CHANGED Viewed

Binary file

package/src/assets/images/file-icons/transcript-highlights.svg ADDED Viewed

@@ -0,0 +1 @@

package/src/assets/images/file-icons/transcript-mini-highlights.svg ADDED Viewed

@@ -0,0 +1 @@

package/src/components/file-icon/file-icon.vue CHANGED Viewed

@@ -20,6 +20,8 @@
           'rtf',
           'transcript-mini',
           'transcript',
+          'transcript-mini-highlights',
+          'transcript-highlights',
           'video',
           'xls',
           'zip'
@@ -99,6 +101,14 @@
     background-image: url('../../assets/images/file-icons/transcript.svg');
   }
+  &-transcript-mini-highlights{
+    background-image: url('../../assets/images/file-icons/transcript-mini-highlights.svg');
+  }
+  &-transcript-highlights{
+    background-image: url('../../assets/images/file-icons/transcript-highlights.svg');
+  }
   &-video{
     background-image: url('../../assets/images/file-icons/video.svg');
   }

package/src/components/form-set/form-set.vue ADDED Viewed

@@ -0,0 +1,52 @@
+<template>
+  <div class="ecs-form-set" :class="error ? 'error' : ''">
+    <h5 class="ecs-form-set-title">{{ title }}</h5>
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      error: {
+        type: Boolean,
+        default: false
+      },
+      title: {
+        type: String,
+        required: true
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+@import "../tokens/tokens";
+@import "../mixins/svg-uri";
+.ecs-form-set{
+  border: 1px solid $gray-3;
+  border-radius: 6px;
+  position: relative;
+  padding: 25px 20px 20px 20px;
+  &-title{
+    position: absolute;
+    font-size: 14px;
+    color: $gray-8;
+    padding: 0 10px;
+    left: 10px;
+    top: -9px;
+    background: #FFF;
+  }
+  &.error{
+    border-color: $red-10;
+    .ecs-form-set-title{
+      color: $red-10;
+    }
+  }
+}
+</style>

package/src/components/index.js CHANGED Viewed

@@ -40,6 +40,7 @@ import EcsFormCheck from "./form-check/form-check.vue"
 import EcsFormGroup from "./form-group/form-group.vue"
 import EcsFormHeadline from "./form-headline/form-headline.vue"
 import EcsFormatted from "./formatted/formatted.vue"
+import EcsFormSet from "./form-set/form-set.vue"
 import EcsIcon from "./icon/icon.vue"
 import EcsIndexToolbar from "./index-toolbar/index-toolbar.vue"
 import EcsInfoTooltip from "./info-tooltip/info-tooltip.vue"
@@ -143,6 +144,7 @@ const Components = {
   EcsFormGroup,
   EcsFormHeadline,
   EcsFormatted,
+  EcsFormSet,
   EcsIcon,
   EcsIndexToolbar,
   EcsInfoTooltip,

package/src/components/input/input.vue CHANGED Viewed

@@ -3,6 +3,7 @@
     @input="$emit('input', $event)"
     @change="$emit('change', $event)"
     @keyup="$emit('keyup', $event)"
+    @blur="$emit('blur', $event)"
     :type="type"
     :name="name"
     :disabled="disabled"
@@ -26,6 +27,7 @@
     @input="$emit('input', $event)"
     @change="$emit('change', $event)"
     @keyup="$emit('keyup', $event)"
+    @blur="$emit('blur', $event)"
     :name="name"
     :disabled="disabled"
     :required="required"

package/src/stories/form-set/form-set.stories.js ADDED Viewed

@@ -0,0 +1,16 @@
+import EcsFormSet from '@components/form-set/form-set';
+export default {
+  title: 'Forms/Form Set',
+  component: EcsFormSet
+};
+export const formSet = () => ({
+  components: { EcsFormSet },
+  template: `<ecs-form-set title="Form Set">Default Slot</ecs-form-set>`,
+});
+export const formSetError = () => ({
+  components: { EcsFormSet },
+  template: `<ecs-form-set error title="Form Set">Default Slot</ecs-form-set>`,
+});

package/src/stories/form-set/form-set.stories.mdx ADDED Viewed

@@ -0,0 +1,36 @@
+import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
+import EcsFormSet from '@components/form-set/form-set';
+import * as stories from './form-set.stories.js';
+<Meta
+  title="Forms/Form Set"
+  component={EcsFormSet} />
+# Form Set `EcsFormSet`
+Form sets are wrapping containers for multiple form elements. They can be used to bring more structure to large forms.
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Form Set" height="50px">
+    {stories.formSet()}
+  </Story>
+</Canvas>
+```js
+<ecs-form-set title="Form Set">Default Slot</ecs-form-set>
+```
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Form Set Error" height="50px">
+    {stories.formSetError()}
+  </Story>
+</Canvas>
+```js
+<ecs-form-set error title="Form Set">Default Slot</ecs-form-set>
+```
+## Props
+<ArgsTable of={EcsFormSet} />

package/src/stories/radiobutton/radiobutton.stories.mdx CHANGED Viewed

@@ -17,7 +17,9 @@ Radiobuttons are used for selecting a single value from several options.
 </Canvas>
 ```js
+<ecs-radiobutton name="fruits" v-model="selected" value="orange">Label</ecs-radiobutton>
+<ecs-radiobutton name="fruits" v-model="selected" value="apple" checked>Checked</ecs-radiobutton>
+<ecs-radiobutton name="fruits" v-model="selected" value="grape" disabled>Disabled</ecs-radiobutton>
 ```
 ## Inline
@@ -31,10 +33,10 @@ If more than one radiobutton should be placed within one row, use the `inline` a
 </Canvas>
 ```js
-<ecs-checkbox inline name="fruits">Apple</ecs-checkbox>
-<ecs-checkbox inline name="fruits" checked>Orange</ecs-checkbox>
+<ecs-radiobutton inline name="fruity" v-model="selected" value="apples">Apples</ecs-radiobutton>
+<ecs-radiobutton inline name="fruity" v-model="selected" value="oranges">Oranges</ecs-radiobutton>
 ```
 ## Props, Slots and Events
-<ArgsTable of={EcsRadiobutton} />
+<ArgsTable of={EcsRadiobutton} />