@everchron/ec-shards 0.0.12

package/src/components/index.js

@@ -0,0 +1,277 @@
+import Vue from "vue"
+
+import Tokens from "./tokens/tokens.vue"
+
+import EcsAlert from "./alert/alert.vue"
+import EcsActionToolbar from "./action-toolbar/action-toolbar.vue"
+import EcsAudio from "./audio/audio.vue"
+import EcsAvatar from "./avatar/avatar.vue"
+import EcsBreadcrumb from "./breadcrumb/breadcrumb.vue"
+import EcsBreadcrumbButton from "./breadcrumb-button/breadcrumb-button.vue"
+import EcsBreadcrumbTitle from "./breadcrumb-title/breadcrumb-title.vue"
+import EcsButton from "./button/button.vue"
+import EcsButtonGroup from "./button-group/button-group.vue"
+import EcsButtonCollapse from "./button-collapse/button-collapse.vue"
+import EcsButtonContext from "./button-context/button-context.vue"
+import EcsButtonContextGroup from "./button-context-group/button-context-group.vue"
+import EcsButtonDialog from "./button-dialog/button-dialog.vue"
+import EcsButtonMore from "./button-more/button-more.vue"
+import EcsButtonTable from "./button-table/button-table.vue"
+import EcsButtonToolbar from "./button-toolbar/button-toolbar.vue"
+import EcsButtonToolbarGroup from "./button-toolbar-group/button-toolbar-group.vue"
+import EcsButtonToolbarIcon from "./button-toolbar-icon/button-toolbar-icon.vue"
+import EcsCard from "./card/card.vue"
+import EcsCitationLine from "./citation-line/citation-line.vue"
+import EcsCheckbox from "./checkbox/checkbox.vue"
+import EcsContextMenu from "./context-menu/context-menu.vue"
+import EcsCollapse from "./collapse/collapse.vue"
+import EcsCollectionControl from "./collection-control/collection-control.vue"
+import EcsComment from "./comment/comment.vue"
+//import EcsCommentForm from "./comment-form/comment-form.vue"
+import EcsCommentList from "./comment-list/comment-list.vue"
+import EcsDataCard from "./data-card/data-card.vue"
+import EcsDataCardList from "./data-card-list/data-card-list.vue"
+import EcsDataGrid from "./data-grid/data-grid.vue"
+import EcsDataGridRow from "./data-grid/data-grid-row.vue"
+import EcsDataGridHeadCell from "./data-grid/data-grid-head-cell.vue"
+import EcsDataGridGroup from "./data-grid/data-grid-group.vue"
+import EcsDataGridCell from "./data-grid/data-grid-cell.vue"
+import EcsDataList from "./data-list/data-list.vue"
+import EcsDataListItem from "./data-list-item/data-list-item.vue"
+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 EcsEntryLink from "./entry-link/entry-link.vue"
+import EcsExcerptSnippet from "./excerpt-snippet/excerpt-snippet.vue"
+import EcsFavicon from "./favicon/favicon.vue"
+import EcsFileIcon from "./file-icon/file-icon.vue"
+import EcsFillIcon from "./fill-icon/fill-icon.vue"
+import EcsFileList from "./file-list/file-list.vue"
+import EcsFileListItem from "./file-list-item/file-list-item.vue"
+import EcsFlag from "./flag/flag.vue"
+import EcsFlexCol from "./flex/flex-col.vue"
+import EcsFlexRow from "./flex/flex-row.vue"
+import EcsFolderSelector from "./folder-selector/folder-selector.vue"
+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"
+import EcsInput from "./input/input.vue"
+import EcsInputAddon from "./input-addon/input-addon.vue"
+import EcsInputClear from "./input-clear/input-clear.vue"
+import EcsInputConnector from "./input-connector/input-connector.vue"
+import EcsInputFloat from "./input-float/input-float.vue"
+import EcsInputGroup from "./input-group/input-group.vue"
+import EcsInputSearch from "./input-search/input-search.vue"
+import EcsJumperDocument from "./jumper-document/jumper-document.vue"
+import EcsJumperIndex from "./jumper-index/jumper-index.vue"
+import EcsJumperPage from "./jumper-page/jumper-page.vue"
+import EcsLayoutIndex from "./layout-index/layout-index.vue"
+import EcsLayoutDirectory from "./layout-directory/layout-directory.vue"
+import EcsLayoutDataTable from "./layout-data-table/layout-data-table.vue"
+import EcsLegendItem from "./legend-item/legend-item.vue"
+import EcsLogMessage from "./log-message/log-message.vue"
+import EcsMap from "./map/map.vue"
+import EcsModal from "./modal/modal.vue"
+import EcsModalHeader from "./modal-header/modal-header.vue"
+import EcsModalFooter from "./modal-footer/modal-footer.vue"
+import EcsMultiselectSearchToken from "./multiselect-search-token/multiselect-search-token.vue"
+import EcsMultiselectToken from "./multiselect-token/multiselect-token.vue"
+import EcsMultiselectOption from "./multiselect-option/multiselect-option.vue"
+import EcsOverlay from "./overlay/overlay.vue"
+import EcsPagination from "./pagination/pagination.vue"
+import EcsPartyEntry from "./party-entry/party-entry.vue"
+import EcsPopoverHeader from "./popover-header/popover-header.vue"
+import EcsPopoverListHeadline from "./popover-list-headline/popover-list-headline.vue"
+import EcsPopoverList from "./popover-list/popover-list.vue"
+import EcsPopoverListItem from "./popover-list-item/popover-list-item.vue"
+import EcsProgress from "./progress/progress.vue"
+import EcsQuicklink from "./quicklink/quicklink.vue"
+import EcsRadiobutton from "./radiobutton/radiobutton.vue"
+import EcsRatingFavorability from "./rating-favorability/rating-favorability.vue"
+import EcsRatingStarRead from "./rating-star-read/rating-star-read.vue"
+import EcsRatingStarWrite from "./rating-star-write/rating-star-write.vue"
+import EcsScrollContainer from "./scroll-container/scroll-container.vue"
+import EcsSection from "./section/section.vue"
+import EcsSegment from "./segment/segment.vue"
+import EcsSelect from "./select/select.vue"
+import EcsSelectTile from "./select-tile/select-tile.vue"
+import EcsSeparator from "./separator/separator.vue"
+import EcsSequenceMap from "./sequence-map/sequence-map.vue"
+import EcsSequenceMapButton from "./sequence-map-button/sequence-map-button.vue"
+import EcsSidebar from "./sidebar/sidebar.vue"
+import EcsSidebarContent from "./sidebar-content/sidebar-content.vue"
+import EcsSidebarFooter from "./sidebar-footer/sidebar-footer.vue"
+import EcsSidebarHeader from "./sidebar-header/sidebar-header.vue"
+import EcsSkeletonLoader from "./skeleton-loader/skeleton-loader.vue"
+import EcsSortbutton from "./sortbutton/sortbutton.vue"
+import EcsSticker from "./sticker/sticker.vue"
+import EcsStructuredContent from "./structured-content/structured-content.vue"
+import EcsSwatchesPicker from "./swatches-picker/swatches-picker.vue"
+import EcsSwitch from "./switch/switch.vue"
+import EcsTab from "./tab/tab.vue"
+import EcsTabs from "./tabs/tabs.vue"
+import EcsTabBar from "./tab-bar/tab-bar.vue"
+import EcsTabButton from "./tab-button/tab-button.vue"
+import EcsTag from "./tag/tag.vue"
+import EcsTagCloud from "./tag-cloud/tag-cloud.vue"
+import EcsText from "./text/text.vue"
+import EcsToast from "./toast/toast.vue"
+import EcsToasts from "./toasts/toasts.vue"
+import EcsToolbar from "./toolbar/toolbar.vue"
+import EcsTranscriptState from "./transcript-state/transcript-state.vue"
+import EcsTreeList from "./tree-list/tree-list.vue"
+import EcsTreeListItem from "./tree-list/tree-list-item.vue"
+import EcsTreeListHeadline from "./tree-list/tree-list-headline.vue"
+import EcsVideo from "./video/video.vue"
+
+const Components = {
+  Tokens,
+  EcsAlert,
+  EcsActionToolbar,
+  EcsAudio,
+  EcsAvatar,
+  EcsBreadcrumb,
+  EcsBreadcrumbButton,
+  EcsBreadcrumbTitle,
+  EcsButton,
+  EcsButtonGroup,
+  EcsButtonCollapse,
+  EcsButtonContext,
+  EcsButtonContextGroup,
+  EcsButtonDialog,
+  EcsButtonMore,
+  EcsButtonTable,
+  EcsButtonToolbar,
+  EcsButtonToolbarGroup,
+  EcsButtonToolbarIcon,
+  EcsCheckbox,
+  EcsContextMenu,
+  EcsCard,
+  EcsCitationLine,
+  EcsCollapse,
+  EcsCollectionControl,
+  EcsComment,
+//  EcsCommentForm,
+  EcsCommentList,
+  EcsDataCard,
+  EcsDataCardList,
+  EcsDataGrid,
+  EcsDataGridGroup,
+  EcsDataGridRow,
+  EcsDataGridHeadCell,
+  EcsDataGridCell,
+  EcsDataList,
+  EcsDataListItem,
+  EcsDialog,
+  EcsDialogHeader,
+  EcsDirectoryEntry,
+  EcsDocumentState,
+  EcsDropdown,
+  EcsDropzone,
+  EcsEmptyState,
+  EcsEntryLink,
+  EcsExcerptSnippet,
+  EcsFavicon,
+  EcsFileIcon,
+  EcsFillIcon,
+  EcsFileList,
+  EcsFileListItem,
+  EcsFlag,
+  EcsFlexCol,
+  EcsFlexRow,
+  EcsFolderSelector,
+  EcsFormCheck,
+  EcsFormGroup,
+  EcsInputSearch,
+  EcsFormHeadline,
+  EcsFormatted,
+  EcsFormSet,
+  EcsIcon,
+  EcsIndexToolbar,
+  EcsInfoTooltip,
+  EcsInput,
+  EcsInputAddon,
+  EcsInputClear,
+  EcsInputConnector,
+  EcsInputFloat,
+  EcsInputGroup,
+  EcsJumperDocument,
+  EcsJumperIndex,
+  EcsJumperPage,
+  EcsLayoutIndex,
+  EcsLayoutDirectory,
+  EcsLayoutDataTable,
+  EcsLegendItem,
+  EcsLogMessage,
+  EcsMap,
+  EcsModal,
+  EcsModalHeader,
+  EcsModalFooter,
+  EcsMultiselectSearchToken,
+  EcsMultiselectToken,
+  EcsMultiselectOption,
+  EcsOverlay,
+  EcsPagination,
+  EcsPartyEntry,
+  EcsPopoverHeader,
+  EcsPopoverListHeadline,
+  EcsPopoverList,
+  EcsPopoverListItem,
+  EcsProgress,
+  EcsQuicklink,
+  EcsRadiobutton,
+  EcsRatingFavorability,
+  EcsRatingStarRead,
+  EcsRatingStarWrite,
+  EcsScrollContainer,
+  EcsSection,
+  EcsSegment,
+  EcsSelect,
+  EcsSelectTile,
+  EcsSeparator,
+  EcsSequenceMap,
+  EcsSequenceMapButton,
+  EcsSidebar,
+  EcsSidebarContent,
+  EcsSidebarFooter,
+  EcsSidebarHeader,
+  EcsSkeletonLoader,
+  EcsSortbutton,
+  EcsSticker,
+  EcsStructuredContent,
+  EcsSwatchesPicker,
+  EcsSwitch,
+  EcsTab,
+  EcsTabs,
+  EcsTabBar,
+  EcsTabButton,
+  EcsTag,
+  EcsTagCloud,
+  EcsText,
+  EcsToast,
+  EcsToasts,
+  EcsToolbar,
+  EcsTranscriptState,
+  EcsTreeList,
+  EcsTreeListItem,
+  EcsTreeListHeadline,
+  EcsVideo
+}
+
+const files = require.context('!svg-sprite-loader!../assets/icons', false, /.*\.svg$/)
+files.keys().forEach(files)
+
+Object.keys(Components).forEach(name => {
+  Vue.component(name, Components[name])
+})
+
+export default Components

package/src/components/info-tooltip/info-tooltip.vue

@@ -0,0 +1,48 @@
+<template>
+  <i class="ecs-info-tooltip"
+    @click="handleClick"
+  >
+    <ecs-icon :type="icon" size="20" />
+  </i>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+
+  export default {
+    components: {
+      EcsIcon
+    },
+
+    props: {
+      /** Used to customize the icon. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+      icon: {
+        type: String,
+        default: 'info'
+      }
+    },
+
+    methods: {
+      handleClick (e) {
+        this.$emit('click', e)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-info-tooltip{
+  color: $color-gray-8;
+  margin-left: 8px;
+  transition: .2s;
+  cursor: help;
+  height: 20px;
+
+  &:hover{
+    color: $color-blue-8;
+  }
+}
+</style>

package/src/components/input/input.vue

@@ -0,0 +1,224 @@
+<template>
+  <input v-if="type != 'textarea'" class="ecs-form-control" 
+    @input="$emit('input', $event)"
+    @change="$emit('change', $event)"
+    @keyup="$emit('keyup', $event)"
+    @blur="$emit('blur', $event)"
+    :type="type"
+    :name="name"
+    :disabled="disabled"
+    :required="required"
+    :readonly="readonly"
+    :placeholder="placeholder"
+    :autocomplete="autocomplete"
+    :value="value"
+    :class="[
+      sizeClass,
+      formatClass,
+      subtle ? 'ecs-form-control-subtle' : null,
+      error ? 'ecs-form-control-error' : null
+    ]"
+    v-bind="$attrs"
+    :min="min" :max="max" :step="step" 
+    :ref="refr"
+    :id="refr"
+  />
+  <textarea v-else class="ecs-form-control" 
+    @input="$emit('input', $event)"
+    @change="$emit('change', $event)"
+    @keyup="$emit('keyup', $event)"
+    @blur="$emit('blur', $event)"
+    :name="name"
+    :disabled="disabled"
+    :required="required"
+    :readonly="readonly"
+    :placeholder="placeholder"
+    :class="[
+      sizeClass,
+      formatClass,
+      subtle ? 'ecs-form-control-subtle' : null,
+      error ? 'ecs-form-control-error' : null
+    ]"
+    v-bind="$attrs"
+    :ref="refr"
+    :id="refr"
+  />
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Input type, supports most HTML5 types. */
+      type: {
+        type: String,
+        validator: v => ['text', 'number', 'tel', 'password', 'email', 'url', 'date', 'week', 'textarea'].includes(v),
+        default: 'text'
+      },
+      /** Sets the initial value of the input. */
+      value: {
+        type: [String, Number],
+        default: ''
+      },
+      /** Sets the size of the input. */
+      size: {
+        type: String,
+        validator: v => ['sml', 'md', 'lg', 'null', null].includes(v),
+        default: null
+      },
+      /** Renders the input as subtle variant (grey background, no borders). */
+      subtle: {
+        type: Boolean,
+        default: false
+      },
+      name: {
+        type: String
+      },
+      /** Disables the input. */
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      /** Sets the input to required. */
+      required: {
+        type: Boolean,
+        default: false
+      },
+      /** Sets the input placeholder. */
+      placeholder: {
+        type: String,
+        default: null
+      },
+      /** Used for any custom formatting classes. */
+      format: {
+        type: String,
+        validator: v => ['id', 'null', null].includes(v),
+        default: null
+      },
+      /** Enables or disables native browser auto complete. */
+      autocomplete: {
+        type: String,
+        default: null
+      },
+      /** Turns the input field into read-only mode. */
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      /** Indicates an error state. */
+      error: {
+        type: Boolean,
+        default: false
+      },
+      refr: String,
+      /** Minimum number value, only used when type is `number`. */
+      min: Number,
+      /** Maximum number value, only used when type is `number`. */
+      max: Number,
+      /** Possible custom step interval, only used when type is `number`. */
+      step: Number
+    },
+
+    computed: {
+      sizeClass() {
+        if (this.size && this.size !== '')
+          return `ecs-form-control-${this.size}`
+        return this.size
+      },
+
+      formatClass() {
+        if (this.format && this.format !== '')
+          return `ecs-form-control-format-${this.format}`
+        return this.format
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-form-control{
+  display: block;
+  width: 100%;
+  padding: $spacing-5 + 1 $spacing-10;
+  font-family: $font-family-system;
+  font-size: $type-scale-3-font-size;
+  line-height: $type-scale-3-line-height;
+  color: #000;
+  background-color: #FFF;
+  background-clip: padding-box;
+  border: 1px solid rgba($color-gray-8, .4);
+  border-radius: $border-radius-small;
+  transition: .2s;
+  box-shadow: none;
+
+  &:focus{
+    border-color: rgba($color-blue-8, .5);
+    box-shadow: 0 0 0 2px rgba($color-blue-8, .15);
+  }
+
+  &::-ms-expand {
+    background-color: transparent;
+    border: 0;
+  }
+
+  &:disabled{
+    background-color: rgba($color-gray-6, .15);
+    color: $color-gray-8;
+    cursor: default;
+  }
+
+  &[readonly] {
+    cursor: default;
+  }
+
+  &-subtle{
+    background-color: rgba($color-gray-8, .15);
+    border: 1px solid rgba($color-gray-8, .2);
+
+    &:focus{
+      background-color: rgba($color-gray-8, .17);
+      border: 1px solid $color-gray-4;
+      box-shadow: none;
+    }
+
+    &:disabled{
+      background-color: rgba($color-gray-8, .1);
+      border: 1px solid rgba($color-gray-8, .1);
+      opacity: .8;
+      color: $color-gray-10;
+    }
+  }
+
+  &-sml{
+    font-size: $type-scale-2-font-size;
+    line-height: $type-scale-2-line-height;
+    padding: $spacing-5 - 1 $spacing-10;
+  }
+
+  &-lg{
+    padding: $spacing-15 - 3 $spacing-10;
+  }
+
+  &-format-id{
+    font-family: $font-family-monospace;
+  }
+
+  &-error,
+  &-error:focus{
+    box-shadow: none;
+    border-color: $color-red-9;
+  }
+
+  &::placeholder {
+    color: $color-gray-8;
+    opacity: 1;
+    font-family: $font-family-system;
+  }
+}
+
+textarea.ecs-form-control{
+  resize: vertical;
+}
+</style>

package/src/components/input-addon/input-addon.vue

@@ -0,0 +1,78 @@
+<template>
+  <span class="ecs-input-group-addon" :class="[iconClass, button ? `has-button` : '',]">
+    <slot></slot>
+    <ecs-icon v-if="icon" :type="icon" size="80%" />
+  </span>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+
+  export default {
+    components: { EcsIcon },
+
+    props: {
+      /** Sets the icon for the input add-on. Do not use icons together with text, or buttons. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+      icon: {
+        type: String
+      },
+      /** If the input add-on contains a button (`default` slot), this prop needs to be set. */
+      button: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    computed: {
+      iconClass() {
+        if (this.icon && this.icon !== '')
+          return `has-icon`
+        return this.icon
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-input-group-addon{
+  padding: 0 $spacing-10;
+  margin-bottom: 0;
+  font-size: $type-scale-3-font-size;
+  font-weight: $font-weight-normal;
+  line-height: $type-scale-3-line-height;
+  color: $color-gray-8;
+  text-align: center;
+  background-color: #F5F5F7;
+  border: 1px solid #C5C8CC;
+  border-radius: $border-radius-small;
+  position: relative;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.has-icon{
+    padding: 0;
+    width: $spacing-40;
+  }
+
+  &.has-button{
+    padding: 0;
+    min-width: auto;
+    background-color: #FFF;
+    min-width: 32px;
+  }
+
+  input[type="radio"],
+  input[type="checkbox"] {
+    margin-top: 0;
+  }
+
+  > .icon{
+    color: $color-gray-8;
+  }
+}
+</style>

package/src/components/input-clear/input-clear.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="ecs-input-clear">
+    <button @click="$emit('click', $event)" :title="tooltip" class="ecs-input-clear-button" />
+    <ecs-icon v-if="loading" type="loading" size="32" spinning color="#AEB1B9" />
+  </div>
+</template>
+
+<script>
+import EcsIcon from '../icon/icon'
+
+export default {
+  components: {
+    EcsIcon
+  },
+
+  props: {
+    /** Adds a tooltip to the clear button. */
+    tooltip: String,
+    /** Turns the clear button into loading state. */
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed:{
+    title(){
+      return this.tooltip || 'Clear'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-input-clear{
+  position: relative;
+  width: 32px;
+  height: 32px;
+
+  &-button{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin: -6px;
+    z-index: 2;
+    width: 12px;
+    height: 12px;
+    opacity: .7;
+    transition: .2s;
+    padding: 0;
+    background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><g fill="none" fill-rule="evenodd"><circle cx="6" cy="6" r="6" fill="#858E9E"/><rect width="8" height="1.5" x="2" y="5.5" fill="#FFFFFF" rx=".75" transform="rotate(45 6 6.25)"/><rect width="8" height="1.5" x="2" y="5.5" fill="#FFFFFF" rx=".75" transform="rotate(-45 6 6.25)"/></g></svg>');
+
+    &:hover{
+      opacity: 1;
+    }
+  }
+
+  .icon{
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+</style>