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

package/DetailsFlagSection.vue

@@ -1,176 +1,176 @@
-<!--
-   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="`flag-section-container border border-light`" :hidden="shouldHide">
-    <div :class="`icon ${flagBg} text-white`">
-      <font-awesome-icon :icon="flagIcon" />
-    </div>
-    <div class="header bg-light">{{title ? title : flag.name}}</div>
-    <div class="action" v-if="!noModify">
-      <button :class="btnClass" @click="flagModal">
-        {{btnText}}
-      </button>
-    </div>
-    <div v-if="hasSummary" 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>
-</span>
-</template>
-<script>
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faCheck, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
-  import { mapGetters } from 'vuex'
-
-  import ExpandIndicator from './ExpandIndicator'
-
-  export default {
-    name: 'DetailsFlagSection',
-    components: { FontAwesomeIcon, ExpandIndicator },
-    props: {
-      'flagValue': { type: String },
-      'flagType': { type: String },
-      'title': { type: String },
-      'noModify': { type: Boolean },
-      'startExpanded': { type: Boolean, default: false },
-      'flagDialogOptions': {
-        type: Object,
-        default() {
-          return {}
-        }
-      },
-      'flagActiveColor': { type: String },
-      'flagInactiveColor': { type: String },
-      'hideIfUnset': { type: Boolean }
-    },
-    data () {
-      return {
-        collapsed: !this.startExpanded
-      }
-    },
-    computed: {
-      ...mapGetters(['flagByValue']),
-      flag () { return this.flagByValue(this.flagValue) },
-      btnClass () {
-        const set = this.flag.isSet
-        const cleared = this.flag.isCleared
-        return {
-          'btn': true,
-          'btn-sm': true,
-          'btn-outline-secondary': !set,
-          'btn-outline-danger': set && !cleared,
-          'btn-outline-success': set && cleared
-        }
-      },
-      btnText () {
-        return this.flag.isActive ? 'clear flag' : 'set flag'
-      },
-      flagIcon () {
-        return this.flag.isActive ? faExclamationTriangle : faCheck
-      },
-      flagBg () {
-        const stateAware = this.flagActiveColor && this.flagInactiveColor
-        if (!stateAware) return `bg-${this.flagType}`
-
-        if (this.flag.isActive) return `bg-${this.flagActiveColor}`
-        return `bg-${this.flagInactiveColor}`
-      },
-      hasSummary () {
-        return !!this.$slots.summary
-      },
-      hasDetail () {
-        return !!this.$slots.default
-      },
-      shouldHide () {
-        return this.hideIfUnset && !this.flag.isSet
-      }
-    },
-    methods: {
-      flagModal() {
-        const { flagDialogOptions } = this
-        this.$modal.show('flag-modal', { ...flagDialogOptions, flag: this.flag })
-      },
-      changeCollapse (e) {
-        if (e) {
-          this.$emit('collapse')
-        } else {
-          this.$emit('expand')
-        }
-        this.collapsed = e
-      }
-    }
-  }
-</script>
-<style scoped>
-  .flag-section-container {
-    display: grid;
-    grid-template-columns: 3rem 7rem 1fr auto;
-    grid-auto-rows: auto;
-    grid-template-areas:
-    "icon header header header"
-    "icon action summary more"
-    "icon detail detail detail";
-    margin-bottom: 1rem;
-    border-width: medium;
-    border-style: solid;
-  }
-  .icon {
-    grid-area: icon;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-  }
-  .action {
-    grid-area: action;
-    padding: 0.5rem;
-  }
-  .more {
-    grid-area: more;
-    padding: 0.5rem;
-  }
-  .header {
-    grid-area: header;
-    text-transform: uppercase;
-    padding: 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);
-  }
-  @media only screen and (max-width: 625px) {
-    .flag-section-container {
-      grid-template-columns: 2rem 1fr;
-      grid-template-areas:
-      "icon header"
-      "icon action"
-      "icon summary"
-      "icon more"
-      "icon 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="`flag-section-container border border-light`" :hidden="shouldHide">
+    <div :class="`icon ${flagBg} text-white`">
+      <font-awesome-icon :icon="flagIcon" />
+    </div>
+    <div class="header bg-light">{{title ? title : flag.name}}</div>
+    <div class="action" v-if="!noModify">
+      <button :class="btnClass" @click="flagModal">
+        {{btnText}}
+      </button>
+    </div>
+    <div v-if="hasSummary" 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>
+</span>
+</template>
+<script>
+  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+  import { faCheck, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
+  import { mapGetters } from 'vuex'
+
+  import ExpandIndicator from './ExpandIndicator'
+
+  export default {
+    name: 'DetailsFlagSection',
+    components: { FontAwesomeIcon, ExpandIndicator },
+    props: {
+      'flagValue': { type: String },
+      'flagType': { type: String },
+      'title': { type: String },
+      'noModify': { type: Boolean },
+      'startExpanded': { type: Boolean, default: false },
+      'flagDialogOptions': {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      'flagActiveColor': { type: String },
+      'flagInactiveColor': { type: String },
+      'hideIfUnset': { type: Boolean }
+    },
+    data () {
+      return {
+        collapsed: !this.startExpanded
+      }
+    },
+    computed: {
+      ...mapGetters(['flagByValue']),
+      flag () { return this.flagByValue(this.flagValue) },
+      btnClass () {
+        const set = this.flag.isSet
+        const cleared = this.flag.isCleared
+        return {
+          'btn': true,
+          'btn-sm': true,
+          'btn-outline-secondary': !set,
+          'btn-outline-danger': set && !cleared,
+          'btn-outline-success': set && cleared
+        }
+      },
+      btnText () {
+        return this.flag.isActive ? 'clear flag' : 'set flag'
+      },
+      flagIcon () {
+        return this.flag.isActive ? faExclamationTriangle : faCheck
+      },
+      flagBg () {
+        const stateAware = this.flagActiveColor && this.flagInactiveColor
+        if (!stateAware) return `bg-${this.flagType}`
+
+        if (this.flag.isActive) return `bg-${this.flagActiveColor}`
+        return `bg-${this.flagInactiveColor}`
+      },
+      hasSummary () {
+        return !!this.$slots.summary
+      },
+      hasDetail () {
+        return !!this.$slots.default
+      },
+      shouldHide () {
+        return this.hideIfUnset && !this.flag.isSet
+      }
+    },
+    methods: {
+      flagModal() {
+        const { flagDialogOptions } = this
+        this.$modal.show('flag-modal', { ...flagDialogOptions, flag: this.flag })
+      },
+      changeCollapse (e) {
+        if (e) {
+          this.$emit('collapse')
+        } else {
+          this.$emit('expand')
+        }
+        this.collapsed = e
+      }
+    }
+  }
+</script>
+<style scoped>
+  .flag-section-container {
+    display: grid;
+    grid-template-columns: 3rem 7rem 1fr auto;
+    grid-auto-rows: auto;
+    grid-template-areas:
+    "icon header header header"
+    "icon action summary more"
+    "icon detail detail detail";
+    margin-bottom: 1rem;
+    border-width: medium;
+    border-style: solid;
+  }
+  .icon {
+    grid-area: icon;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+  }
+  .action {
+    grid-area: action;
+    padding: 0.5rem;
+  }
+  .more {
+    grid-area: more;
+    padding: 0.5rem;
+  }
+  .header {
+    grid-area: header;
+    text-transform: uppercase;
+    padding: 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);
+  }
+  @media only screen and (max-width: 625px) {
+    .flag-section-container {
+      grid-template-columns: 2rem 1fr;
+      grid-template-areas:
+      "icon header"
+      "icon action"
+      "icon summary"
+      "icon more"
+      "icon detail";
+    }
+  }
+</style>