@byu-oit/vue-decision-processing-components 8.35.7 → 8.35.8

package/DetailsScoringSection.vue

@@ -1,128 +1,128 @@
-<!--
-   Copyright 2018 Brigham Young University
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
--->
-<template>
-  <div :class="`section-container border border-light`">
-    <div class="main-section">
-      <div class="header bg-light">{{title}}</div>
-      <div class="summary">
-        <slot name="summary"></slot>
-      </div>
-      <ExpandIndicator v-if="hasDetail" :collapsed="collapsed" @update:collapsed="changeCollapse" class="more" />
-      <div v-show="hasDetail && !collapsed" class="detail">
-        <slot></slot>
-      </div>
-    </div>
-    <div class="score-section">
-      <div class="header bg-light">Score</div>
-      <div class="score-container">
-        <div class="sticky-score">
-          <slot name="score"></slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-  import ExpandIndicator from './ExpandIndicator'
-
-  export default {
-    name: 'DetailsScoringSection',
-    components: { ExpandIndicator },
-    props: {
-      title: String,
-      startExpanded: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data () {
-      return {
-        collapsed: !this.startExpanded
-      }
-    },
-    computed: {
-      hasDetail () {
-        return !!this.$slots.default
-      }
-    },
-    methods: {
-      changeCollapse (e) {
-        if (e) {
-          this.$emit('collapse')
-        } else {
-          this.$emit('expand')
-        }
-        this.collapsed = e
-      }
-    }
-  }
-</script>
-<style scoped>
-  .section-container {
-    display: grid;
-    grid-template-columns: 4fr 1fr;
-    grid-auto-rows: auto;
-    margin-bottom: 1rem;
-    border-width: medium;
-    border-style: solid;
-  }
-  .main-section {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-template-rows: auto 1fr;
-    grid-template-areas: 
-      "header header"
-      "summary more"
-      "detail detail";
-  }
-  .score-section {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
-    grid-template-areas:
-      "header"
-      "score";
-  }
-  .more {
-    grid-area: more;
-    padding: 0.5rem;
-  }
-  .header {
-    grid-area: header;
-    text-transform: uppercase;
-    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
-    font-size: 0.8rem;
-  }
-  .summary {
-    grid-area: summary;
-    padding: 0.7rem;
-  }
-  .detail {
-    grid-area: detail;
-    padding: 0.7rem;
-    border-top-color: #eee;
-    border-top: thin solid var(--light, #333);
-  }
-  .score-container {
-    grid-area: score;
-    padding: 0.7rem;
-  }
-  .sticky-score {
-    position: sticky;
-    top: 9rem;
-  }
-
-</style>
+<!--
+   Copyright 2018 Brigham Young University
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+-->
+<template>
+  <div :class="`section-container border border-light`">
+    <div class="main-section">
+      <div class="header bg-light">{{title}}</div>
+      <div class="summary">
+        <slot name="summary"></slot>
+      </div>
+      <ExpandIndicator v-if="hasDetail" :collapsed="collapsed" @update:collapsed="changeCollapse" class="more" />
+      <div v-show="hasDetail && !collapsed" class="detail">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="score-section">
+      <div class="header bg-light">Score</div>
+      <div class="score-container">
+        <div class="sticky-score">
+          <slot name="score"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import ExpandIndicator from './ExpandIndicator'
+
+  export default {
+    name: 'DetailsScoringSection',
+    components: { ExpandIndicator },
+    props: {
+      title: String,
+      startExpanded: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+        collapsed: !this.startExpanded
+      }
+    },
+    computed: {
+      hasDetail () {
+        return !!this.$slots.default
+      }
+    },
+    methods: {
+      changeCollapse (e) {
+        if (e) {
+          this.$emit('collapse')
+        } else {
+          this.$emit('expand')
+        }
+        this.collapsed = e
+      }
+    }
+  }
+</script>
+<style scoped>
+  .section-container {
+    display: grid;
+    grid-template-columns: 4fr 1fr;
+    grid-auto-rows: auto;
+    margin-bottom: 1rem;
+    border-width: medium;
+    border-style: solid;
+  }
+  .main-section {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: 
+      "header header"
+      "summary more"
+      "detail detail";
+  }
+  .score-section {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+      "header"
+      "score";
+  }
+  .more {
+    grid-area: more;
+    padding: 0.5rem;
+  }
+  .header {
+    grid-area: header;
+    text-transform: uppercase;
+    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
+    font-size: 0.8rem;
+  }
+  .summary {
+    grid-area: summary;
+    padding: 0.7rem;
+  }
+  .detail {
+    grid-area: detail;
+    padding: 0.7rem;
+    border-top-color: #eee;
+    border-top: thin solid var(--light, #333);
+  }
+  .score-container {
+    grid-area: score;
+    padding: 0.7rem;
+  }
+  .sticky-score {
+    position: sticky;
+    top: 9rem;
+  }
+
+</style>

package/DetailsSection.vue

@@ -1,116 +1,116 @@
-<!--
-   Copyright 2018 Brigham Young University
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
--->
-<template>
-  <div :class="`section-container border border-light`">
-    <div class="header bg-light">{{title}}</div>
-    <div class="action">
-      <slot name="action"></slot>
-    </div>
-    <div class="summary">
-      <slot name="summary"></slot>
-    </div>
-    <ExpandIndicator v-if="hasDetail" :collapsed="collapsed" @update:collapsed="changeCollapse" class="more" />
-    <div v-show="hasDetail && !collapsed" class="detail">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-<script>
-  import ExpandIndicator from './ExpandIndicator'
-
-  export default {
-    name: 'DetailsSection',
-    components: { ExpandIndicator },
-    props: {
-      title: String,
-      startExpanded: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data () {
-      return {
-        collapsed: !this.startExpanded
-      }
-    },
-    computed: {
-      hasDetail () {
-        return !!this.$slots.default
-      }
-    },
-    methods: {
-      changeCollapse (e) {
-        if (e) {
-          this.$emit('collapse')
-        } else {
-          this.$emit('expand')
-        }
-        this.collapsed = e
-      }
-    }
-  }
-</script>
-<style scoped>
-  .section-container {
-    display: grid;
-    grid-template-columns: 6rem 1fr auto;
-    grid-auto-rows: auto;
-    grid-template-areas:
-    "header header header"
-    "action summary more"
-    "detail detail detail";
-    margin-bottom: 1rem;
-    border-width: medium;
-    border-style: solid;
-    overflow: auto;
-  }
-  .action {
-    grid-area: action;
-    padding: 0.5rem;
-  }
-  .more {
-    grid-area: more;
-    padding: 0.5rem;
-  }
-  .header {
-    grid-area: header;
-    text-transform: uppercase;
-    padding: 0.25rem 0.25rem 0.25rem 3.25rem;
-    font-size: 0.8rem;
-  }
-  .summary {
-    grid-area: summary;
-    padding: 0.7rem;
-  }
-  .detail {
-    grid-area: detail;
-    padding: 0.7rem;
-    border-top-color: #eee;
-    border-top: thin solid var(--light, #333);
-  }
-
-  @media only screen and (max-width: 625px) {
-    .section-container {
-      grid-template-columns: 1fr;
-      grid-template-areas:
-      "header"
-      "action"
-      "summary"
-      "more"
-      "detail";
-    }
-  }
-</style>
+<!--
+   Copyright 2018 Brigham Young University
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+-->
+<template>
+  <div :class="`section-container border border-light`">
+    <div class="header bg-light">{{title}}</div>
+    <div class="action">
+      <slot name="action"></slot>
+    </div>
+    <div class="summary">
+      <slot name="summary"></slot>
+    </div>
+    <ExpandIndicator v-if="hasDetail" :collapsed="collapsed" @update:collapsed="changeCollapse" class="more" />
+    <div v-show="hasDetail && !collapsed" class="detail">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+  import ExpandIndicator from './ExpandIndicator'
+
+  export default {
+    name: 'DetailsSection',
+    components: { ExpandIndicator },
+    props: {
+      title: String,
+      startExpanded: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+        collapsed: !this.startExpanded
+      }
+    },
+    computed: {
+      hasDetail () {
+        return !!this.$slots.default
+      }
+    },
+    methods: {
+      changeCollapse (e) {
+        if (e) {
+          this.$emit('collapse')
+        } else {
+          this.$emit('expand')
+        }
+        this.collapsed = e
+      }
+    }
+  }
+</script>
+<style scoped>
+  .section-container {
+    display: grid;
+    grid-template-columns: 6rem 1fr auto;
+    grid-auto-rows: auto;
+    grid-template-areas:
+    "header header header"
+    "action summary more"
+    "detail detail detail";
+    margin-bottom: 1rem;
+    border-width: medium;
+    border-style: solid;
+    overflow: auto;
+  }
+  .action {
+    grid-area: action;
+    padding: 0.5rem;
+  }
+  .more {
+    grid-area: more;
+    padding: 0.5rem;
+  }
+  .header {
+    grid-area: header;
+    text-transform: uppercase;
+    padding: 0.25rem 0.25rem 0.25rem 3.25rem;
+    font-size: 0.8rem;
+  }
+  .summary {
+    grid-area: summary;
+    padding: 0.7rem;
+  }
+  .detail {
+    grid-area: detail;
+    padding: 0.7rem;
+    border-top-color: #eee;
+    border-top: thin solid var(--light, #333);
+  }
+
+  @media only screen and (max-width: 625px) {
+    .section-container {
+      grid-template-columns: 1fr;
+      grid-template-areas:
+      "header"
+      "action"
+      "summary"
+      "more"
+      "detail";
+    }
+  }
+</style>