@policystudio/policy-studio-ui-vue 1.1.90-beta.12 → 1.1.90-beta.17

package/src/components/playground/PsScrollBar.vue

@@ -1,320 +0,0 @@
-<template>
-  <div class="wrapper psui-flex psui-gap-4">
-    <div 
-      class="visible-scrollbar psui-flex psui-flex-col psui-h-full psui-w-56 psui-bg-gray-30 psui-p-2"
-      @click="onClick"
-    >
-      <h2 class="psui-font-bold">
-        Scrollbar Playground (click over here to copy the computed style to clipboard)
-      </h2>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
-    </div>
-    <div class="psui-flex psui-bg-gray-60 psui-p-2 psui-gap-4">
-      <div class="psui-flex psui-flex-col">
-        <div class="psui-flex psui-flex-col psui-w-48">
-          <label for="width">Scroll Width (px)</label>
-          <input
-            type="text"
-            id="width"
-            name="width"
-            @change="onChange"
-          >
-        </div>
-        <div class="psui-flex psui-flex-col psui-w-48">
-          <label for="width">Scroll Height (px)</label>
-          <input
-            type="text"
-            id="height"
-            name="height"
-            @change="onChange"
-          >
-        </div>
-        <div class="psui-flex psui-flex-col psui-w-48">
-          <label for="width">ScrollTrack Color</label>
-          <input
-            type="text"
-            id="track"
-            name="track"
-            @change="onChange"
-          >
-        </div>
-        <div class="psui-flex psui-flex-col psui-w-48">
-          <label for="width">Thumb Color</label>
-          <input
-            type="text"
-            id="thumb"
-            name="thumb"
-            @change="onChange"
-          >
-        </div>
-        <div class="psui-flex psui-flex-col psui-w-48">
-          <label for="width">Thumb Border-Radius (px)</label>
-          <input
-            type="text"
-            id="thumb-radius"
-            name="thumb-radius"
-            @change="onChange"
-          >
-        </div>
-        <div class="psui-flex psui-flex-col psui-w-48">
-          <label for="width">Thumb Border Size(px)</label>
-          <input
-            type="text"
-            id="thumb-border"
-            name="thumb-border"
-            @change="onChange"
-          >
-        </div>
-        <div class="psui-flex psui-flex-col psui-w-48">
-          <label for="width">Thumb Border Color</label>
-          <input
-            type="text"
-            id="thumb-border-color"
-            name="thumb-border-color"
-            @change="onChange"
-          >
-        </div>
-        <div class="psui-flex psui-flex-col psui-w-48">
-          <label for="width">Thumb Border Style</label>
-          <select
-            id="thumb-border-style"
-            name="thumb-border-style"
-            v-model="selectedStyle"
-          >
-            <option
-              value=""
-              hidden
-              selected
-            />
-            <option   
-              v-for="(style, index) in borderStyle"
-              :value="style"
-              :key="index"
-            >
-              {{ style }}
-            </option>
-          </select>
-        </div>
-      </div>
-      <div class="psui-flex psui-flex-col">
-        <div class="psui-flex psui-flex-col psui-w-48">
-          <label for="width">Thumb Hover Color</label>
-          <input
-            type="text"
-            id="thumb-hover-color"
-            name="thumb-hover-color"
-            @change="onChange"
-          >
-        </div>
-        <div class="psui-flex psui-flex-col psui-w-48">
-          <label for="width">Thumb Hover Border Size</label>
-          <input
-            type="text"
-            id="thumb-hover-border-size"
-            name="thumb-hover-border-size"
-            @change="onChange"
-          >
-        </div>
-        <div class="psui-flex psui-flex-col psui-w-48">
-          <label for="width">Thumb Hover Border Color</label>
-          <input
-            type="text"
-            id="thumb-hover-border-color"
-            name="thumb-hover-border-color"
-            @change="onChange"
-          >
-        </div>
-        <div class="psui-flex psui-flex-col psui-w-48">
-          <label for="width">Thumb Border Style</label>
-          <select
-            id="thumb-border-style"
-            name="thumb-border-style"
-            v-model="selectedHoverStyle"
-          >
-            <option
-              value=""
-              hidden
-              selected
-            />
-            <option   
-              v-for="(style, index) in borderStyle"
-              :value="style"
-              :key="index"
-            >
-              {{ style }}
-            </option>
-          </select>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-    name: 'PsScrollBar',
-    data(){
-      return {
-          borderStyle: ['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'ouset'],
-          selectedStyle: null,
-          selectedHoverStyle: null
-      }
-    },
-    watch:{
-        selectedStyle(){
-          const visibleScrollBar = document.querySelector('.visible-scrollbar')
-          visibleScrollBar.style.setProperty('--scrollbar-thumb-border-style', this.selectedStyle)    
-        },
-        selectedHoverStyle(){
-          const visibleScrollBar = document.querySelector('.visible-scrollbar')
-          visibleScrollBar.style.setProperty('--scrollbar-thumb-hover-border-style', this.selectedHoverStyle)
-        }
-    },
-    methods:{
-      onChange(event){
-      
-      const visibleScrollBar = document.querySelector('.visible-scrollbar')
-
-      switch(event.target.id){
-        case 'width':
-        visibleScrollBar.style.setProperty('--scrollbar-width', `${event.target.value}px`)
-        break
-        case 'thumb':
-        visibleScrollBar.style.setProperty('--scrollbar-thumb-color', event.target.value)
-        break
-        case 'track':
-        visibleScrollBar.style.setProperty('--scrollbar-track-color', event.target.value)  
-        break
-        case 'thumb-radius':
-        visibleScrollBar.style.setProperty('--scrollbar-thumb-radius', `${event.target.value}px`)
-        break
-        case 'thumb-border':
-        visibleScrollBar.style.setProperty('--scrollbar-thumb-border', `${event.target.value}px`)
-        break
-        case 'thumb-border-color':
-        visibleScrollBar.style.setProperty('--scrollbar-thumb-border-color', event.target.value)
-        break
-        case 'height':
-        visibleScrollBar.style.setProperty('--scrollbar-height', `${event.target.value}px`)    
-        break
-        case 'thumb-hover-color':
-        visibleScrollBar.style.setProperty('--scrollbar-thumb-hover-color', event.target.value)
-        break
-        case 'thumb-hover-border-size':
-        visibleScrollBar.style.setProperty('--scrollbar-thumb-hover-border-size', `${event.target.value}px`)
-        break    
-        case 'thumb-hover-border-color':
-        visibleScrollBar.style.setProperty('--scrollbar-thumb-hover-border-color', event.target.value)
-        break        
-      }
-
-    },
-    onClick(){
-      const visibleScrollBar = document.querySelector('.visible-scrollbar')
-
-      const styleScrollBar = getComputedStyle(visibleScrollBar, '::-webkit-scrollbar')
-      const styleScrollBarTrack = getComputedStyle(visibleScrollBar, '::-webkit-scrollbar-track')
-      const styleScrollBarThumb = getComputedStyle(visibleScrollBar, '::-webkit-scrollbar-thumb')
-      const styleScrollBarThumbHover = getComputedStyle(visibleScrollBar, '::-webkit-scrollbar-thumb:hover')
-      const styleScrollBarCorner = getComputedStyle(visibleScrollBar, '::-webkit-scrollbar-corner')
-
-      navigator.clipboard.writeText(`
-        ::-webkit-scrollbar {
-        display: ${styleScrollBar.display};
-        width: ${styleScrollBar.width};
-        }
-
-        ::-webkit-scrollbar-track {
-        background-color: ${styleScrollBarTrack.backgroundColor};
-        }
-
-        ::-webkit-scrollbar-thumb {
-        background-color: ${styleScrollBarThumb.backgroundColor};
-        border-radius: ${styleScrollBarThumb.borderRadius};
-        border: ${styleScrollBarThumb.border};  
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-          background-color: ${styleScrollBarThumbHover.backgroundColor};
-          border: ${styleScrollBarThumbHover.border};
-        }
-
-        ::-webkit-scrollbar-corner {
-        display: ${styleScrollBarCorner.display};
-        background-color: ${styleScrollBarCorner.backgroundColor};
-        height: ${styleScrollBarCorner.height};
-        width: ${styleScrollBarCorner.width};
-        }
-      `)
-
-      window.alert('Copied to clipboard')
-    }
-  },
-}
-
-</script>
-
-<style scoped>
-
-  .visible-scrollbar{
-    overflow: scroll;
-    white-space: nowrap;
-  }
-
-  .visible-scrollbar::-webkit-scrollbar {
-    display: block;
-    width: var(--scrollbar-width, 10px);
-    height: var(--scrollbar-height, 10px);
-  }
-
-  .visible-scrollbar::-webkit-scrollbar-track {
-    background: var(--scrollbar-track-color, gray);
-  }
-
-  .visible-scrollbar::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb-color,black);
-    border-radius: var(--scrollbar-thumb-radius);
-    border: var(--scrollbar-thumb-border) var(--scrollbar-thumb-border-style) var(--scrollbar-thumb-border-color);
-  }
-
-  .visible-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: var(--scrollbar-thumb-hover-color, black);
-    border: var(--scrollbar-thumb-hover-border-size) var(--scrollbar-thumb-hover-border-style) var(--scrollbar-thumb-hover-border-color);
-  }
-
-  .visible-scrollbar::-webkit-scrollbar-corner {
-    display: none;
-    background-color: var(--scrollbar-track-color, gray);
-    height: var(--scrollbar-height, 10px);
-    width: var(--scrollbar-width, 10px);
-  }
-
-  .wrapper {
-    height: 450px;
-  }
-</style>

package/src/contents/ComparisonData.ts

@@ -1,378 +0,0 @@
-const RENDER_TYPE = {
-  BAR_CHART : 'bar_chart',
-  TAG_SCOPE : 'tag_scope',
-}
-const RENDER_BADGE = {
-  EMISSION_REDICTIONS : 'trending_down',
-  AFFECTED_UNITS : 'holiday_village',
-  LOWEST_COST_PER_UNIT : 'price_check'
-}
-
-export const comparisonDataHeader = [
-  {
-    'order': 0,
-    'key': 'city_wide_impact',
-    'title': 'City-wide Impact Estimates',
-    'columns': [
-      {
-        'isActive': true,
-        'key': 'forecast_units_affected',
-        'title': 'Affected Units',
-        'description': '(lifecycle)',
-        'hasProjections': true,
-        'hasHelper': {
-          'type': 'helper',
-          'id': 17
-        },
-        'chartProjection': {
-          'title': 'Number of Affected Units',
-          'subtitle': ''
-        }
-      },
-      {
-        'isActive': true,
-        'key': 'forecast_initial_cost',
-        'title': 'Compliance Cost',
-        'description': '(lifecycle)',
-        'hasProjections': true,
-        'hasHelper': {
-          'type': 'helper',
-          'id': 20
-        },
-        'chartProjection': {
-          'title': 'Compliance Cost',
-          'subtitle': ''
-        }
-      },
-      {
-        'isActive': true,
-        'key': 'forecast_emissions_savings',
-        'title': 'Emissions Reductions',
-        'description': '(lifecycle MTCO2e)',
-        'hasProjections': true,
-        'hasHelper': {
-          'type': 'helper',
-          'id': 18
-        },
-        'chartProjection': {
-          'title': 'Emissions Reductions',
-          'subtitle': 'MTCO2e'
-        }
-      },
-      {
-        'isActive': true,
-        'key': 'forecast_lifecycle_savings',
-        'title': 'Lifecycle Savings',
-        'description': '(on-bill)',
-        'hasProjections': true,
-        'hasHelper': {
-          'type': 'helper',
-          'id': 19
-        },
-        'chartProjection': {
-          'title': 'Bill Savings',
-          'subtitle': ''
-        }
-      },
-      {
-        'isActive': true,
-        'key': 'forecast_kwh_savings',
-        'title': 'Electricity Savings',
-        'description': '(lifecycle kWh)',
-        'hasProjections': true,
-        'hasHelper': {
-          'type': 'helper',
-          'id': 21
-        },
-        'chartProjection': {
-          'title': 'Electricity Savings',
-          'subtitle': 'kWh'
-        }
-      },
-      {
-        'isActive': true,
-        'key': 'forecast_therms_savings',
-        'title': 'Gas Savings',
-        'description': '(lifecycle therms)',
-        'hasProjections': true,
-        'hasHelper': {
-          'type': 'helper',
-          'id': 22
-        },
-        'chartProjection': {
-          'title': 'Gas Savings',
-          'subtitle': 'therms'
-        }
-      }
-    ],
-    'hasHelper': {
-      'type': 'helper',
-      'id': 25
-    }
-  },
-  {
-    'order': 1,
-    'key': 'fixed_columns',
-    'title': 'City-wide Impact Estimates',
-    'columns': [
-      {
-        'isActive': true,
-        'key': 'tdv_benefit_to_cost_ratio',
-        'title': 'TDV',
-        'description': '≥ 1.0 is cost effective',
-        'isChart': true,
-        'hasHelper': {
-          'type': 'helper',
-          'id': 1
-        }
-      }
-    ],
-    'hasHelper': {
-      'type': 'helper',
-      'id': 23
-    }
-  }
-]
-
-export const comparisonDataSummary = [
-  {
-    'data': {
-      'forecast_units_affected': 77.5,
-      'forecast_emissions_savings': 1427.3145433224304,
-      'forecast_lifecycle_savings': 296624.89395,
-      'multifamily': true,
-      'single_family': true,
-      'zone_7': true,
-      'zone_10': true,
-      'city_and_policy': 'Default',
-    },
-    'deep': 1,
-    'id': 'policy:container-2459',
-    'title': 'Policy name lorem ipsum dolor',
-    'has_badge': RENDER_BADGE.AFFECTED_UNITS,
-    'items': [
-      {
-        'data': {
-          'forecast_units_affected': 0,
-          'forecast_emissions_savings': 0,
-          'forecast_lifecycle_savings': 0,
-          'multifamily': true,
-          'single_family': true,
-          'zone_7': false,
-          'zone_10': false,
-          'city_and_policy': false,
-        },
-        'deep': 2,
-        'id': 'policy:container-2459:climateZone-1-PGE',
-        'title': '',
-        'items': null,
-        'is_disabled': false,
-        'is_last': true,
-        'index': '0-0-0',
-        'last_deep': false
-      }
-    ],
-    'is_disabled': false,
-    'is_last': false,
-    'index': '0-0',
-    'last_deep': false
-  },
-  {
-    'data': {
-      'forecast_units_affected': 260,
-      'forecast_emissions_savings': -2897.5373860970467,
-      'forecast_lifecycle_savings': -662408.3057812498,
-      'multifamily': true,
-      'single_family': true,
-      'zone_7': true,
-      'zone_10': true,
-      'city_and_policy': 'Default',
-    },
-    'deep': 1,
-    'id': 'policy:container-2539',
-    'title': 'Policy name lorem ipsum dolor',
-    'has_badge': RENDER_BADGE.EMISSION_REDICTIONS,
-    'items': [
-      {
-        'data': {
-          'forecast_units_affected': 0,
-          'forecast_emissions_savings': 0,
-          'forecast_lifecycle_savings': 0,
-          'multifamily': true,
-          'single_family': false,
-          'zone_7': false,
-          'zone_10': false,
-          'city_and_policy': false,
-        },
-        'deep': 2,
-        'id': 'policy:container-2539:climateZone-1-PGE',
-        'title': '',
-        'items': null,
-        'is_disabled': false,
-        'is_last': true,
-        'index': '0-1-0',
-        'last_deep': false
-      }
-    ],
-    'is_disabled': false,
-    'is_last': true,
-    'index': '0-1',
-    'last_deep': false
-  }
-]
-
-export const comparisonDataColumnGroup = [
-  {
-    'order': 2,
-    'key': 'city_wide_estimates',
-    'title': 'City-wide Impact Estimates',
-    'columns': [
-      {
-        'isActive': true,
-        'key': 'forecast_units_affected',
-        'title': 'Affected Units',
-        'description': '(lifecycle)',
-        'hasProjections': true,
-        'hasHelper': {
-          'type': 'helper',
-          'id': 17
-        },
-        'isChart': false,
-        'renderType': RENDER_TYPE.BAR_CHART
-      },
-      {
-        'isActive': true,
-        'key': 'forecast_emissions_savings',
-        'title': 'Emissions Reductions',
-        'description': '(lifecycle MTCO2e)',
-        'hasProjections': true,
-        'hasHelper': {
-          'type': 'helper',
-          'id': 18
-        },
-        'isChart': false,
-        'renderType': RENDER_TYPE.BAR_CHART
-      },
-      {
-        'isActive': true,
-        'key': 'forecast_lifecycle_savings',
-        'title': 'Lifecycle Savings',
-        'description': '(on-bill)',
-        'hasProjections': true,
-        'hasHelper': {
-          'type': 'helper',
-          'id': 19
-        },
-        'isChart': false,
-        'renderType': RENDER_TYPE.BAR_CHART
-      }
-    ],
-    'hasHelper': {
-      'type': 'helper',
-      'slug': 'comparison-tables-city_wide_estimates'
-    }
-  },
-  {
-    'order': 3,
-    'key': 'policy_requirements',
-    'title': 'Policy Requirements',
-    'columns': [
-      {
-        'isActive': true,
-        'key': 'multifamily',
-        'title': 'Multifamily',
-        'description': '',
-        'hasHelper': {
-          'type': 'helper',
-          'id': 1
-        },
-        'isScope': true,
-        'renderType': RENDER_TYPE.TAG_SCOPE
-      },
-      {
-        'isActive': true,
-        'key': 'single_family',
-        'title': 'Single Family',
-        'description': '',
-        'isChart': false,
-        'hasHelper': {
-          'type': 'helper',
-          'id': 2
-        },
-        'renderType': RENDER_TYPE.TAG_SCOPE
-      },
-      {
-        'isActive': true,
-        'key': 'zone_7',
-        'title': 'Zone 7',
-        'description': '',
-        'isChart': false,
-        'hasHelper': {
-          'type': 'helper',
-          'id': 3
-        },
-        'renderType': RENDER_TYPE.TAG_SCOPE
-      },
-      {
-        'isActive': true,
-        'key': 'zone_10',
-        'title': 'Zone 10',
-        'description': '',
-        'isChart': false,
-        'hasHelper': {
-          'type': 'helper',
-          'id': 4
-        },
-        'renderType': RENDER_TYPE.TAG_SCOPE
-      }
-    ],
-    'hasHelper': {
-      'type': 'helper',
-      'id': 23
-    }
-  },
-  {
-    'order': 4,
-    'key': 'city_wide_impact_assumptions',
-    'title': 'City-Wide Impact Assumptions',
-    'columns': [
-      {
-        'isActive': true,
-        'key': 'multifamily',
-        'title': 'Multifamily',
-        'description': '',
-        'hasHelper': {
-          'type': 'helper',
-          'id': 1
-        },
-        'renderType': RENDER_TYPE.TAG_SCOPE
-      },
-      {
-        'isActive': true,
-        'key': 'single_family',
-        'title': 'Single Family',
-        'description': '',
-        'hasHelper': {
-          'type': 'helper',
-          'id': 2
-        },
-        'renderType': RENDER_TYPE.TAG_SCOPE
-      },
-      {
-        'isActive': true,
-        'key': 'city_and_policy',
-        'title': 'City and Policy',
-        'description': '',
-        'hasHelper': {
-          'type': 'helper',
-          'id': 3
-        },
-        'renderType': RENDER_TYPE.TAG_SCOPE
-      },
-    ],
-    'hasHelper': {
-      'type': 'helper',
-      'id': 23
-    }
-  },
-]