@policystudio/policy-studio-ui-vue 1.1.90-beta.2 → 1.1.90-beta.20

package/postcss.config.js

@@ -1,8 +0,0 @@
-module.exports = {
-  plugins: {
-    'postcss-import': {},
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

package/src/assets/images/multifamily-units.svg

@@ -1,10 +0,0 @@
-<svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path d="M18.2274 34.9462V30.9159M18.2274 34.9462H3.12439V30.9159H4.56681M18.2274 34.9462H21.1123H23.8274M34.3911 10.2129V34.9462H31.3789H28.6214M34.3911 10.2129L35.7911 10.8068V7.74167L18.2274 1.61667V4.27349M34.3911 10.2129L18.2274 4.27349M16.2759 11.6129L4.56681 16.7498M18.2274 7.74167L3.12439 14.6833V17.3826L4.56681 16.7498M18.2274 7.74167V30.9159M18.2274 7.74167V4.27349M8.34257 30.9159V25.7826H14.4941V30.9159M8.34257 30.9159H14.4941M8.34257 30.9159H4.56681M14.4941 30.9159H18.2274M4.56681 30.9159V16.7498M23.8274 34.9462V27.3947H28.6214V34.9462M23.8274 34.9462H28.6214M8.34257 18.825L12.5001 17.0432H14.4941V22.4735H8.34257V18.825ZM21.1123 18.4432H24.5062V23.7886H21.1123V18.4432ZM27.985 18.4432H31.3789V23.7886H27.985V18.4432ZM21.1123 15.1341H24.5062V9.70379L21.1123 8.34621V15.1341ZM27.985 15.1341H31.3789V12.1644L27.985 10.8068V15.1341Z" stroke="#A9AEB0" stroke-width="1.4" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="37.3333" height="37.3333" fill="white" transform="translate(0.791016 0.333344)"/>
-</clipPath>
-</defs>
-</svg>

package/src/assets/images/policy-studio.svg

@@ -1,15 +0,0 @@
-<svg width="191" height="60" viewBox="0 0 191 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M179.681 28.551H174.818V20.2315L167.535 7.46425H172.752L177.266 16.0717H177.329L181.874 7.46425H187.086L179.681 20.2954V28.551ZM177.459 34.7611C183.653 34.7611 187.935 39.1261 187.935 45.5257C187.935 51.9253 183.653 56.341 177.459 56.341C171.264 56.341 166.982 51.9253 166.982 45.5257C166.982 39.1261 171.264 34.7611 177.459 34.7611ZM177.459 52.2772C180.663 52.2772 182.913 50.0055 182.913 45.5257C182.913 41.046 180.663 38.7742 177.459 38.7742C174.254 38.7742 172.004 41.046 172.004 45.5257C172.004 50.0055 174.254 52.2772 177.459 52.2772ZM159.114 24.8071C161.285 24.8071 162.81 24.1672 164.367 23.2393L165.729 27.079C163.128 28.4869 160.712 28.8709 158.487 28.8709C151.289 28.8709 147.49 24.3912 147.49 18.2238C147.49 12.1679 151.94 7.27148 159.027 7.27148C161.379 7.27148 163.287 7.62425 164.748 8.23219V12.712C163.001 11.784 161.15 11.304 159.155 11.304C154.641 11.304 152.67 14.5358 152.67 18.1516C152.67 22.1308 155.15 24.8071 159.114 24.8071ZM154.865 45.3018C154.865 51.9573 149.934 56.0211 143.062 56.0211H136.221V34.9344H143.599C150.708 34.9344 154.865 38.9022 154.865 45.3018ZM143.093 39.0622H140.936V51.9441H143.185C147.9 51.9441 149.841 48.9175 149.841 45.475C149.841 41.3763 147.469 39.0622 143.093 39.0622ZM138.339 7.46425H143.202V28.551H138.339V7.46425ZM121.848 7.46425H126.711V24.4231H133.943V28.551H121.848V7.46425ZM126.879 50.4214C127.3 49.7175 127.496 48.7575 127.496 47.6697V34.9344H132.21V47.9575C132.21 49.7814 131.871 51.3493 131.224 52.5333C129.807 55.1571 126.972 56.341 123.182 56.341C119.391 56.341 116.556 55.1571 115.139 52.5333C114.492 51.3493 114.153 49.7814 114.153 47.9575V34.9344H118.867V47.6697C118.867 48.7575 119.083 49.7175 119.513 50.4214C120.193 51.6373 121.487 52.2772 123.182 52.2772C124.876 52.2772 126.171 51.6373 126.879 50.4214ZM107.075 28.8709C100.686 28.8709 96.2683 24.4552 96.2683 18.0556C96.2683 11.656 100.686 7.27148 107.075 7.27148C113.464 7.27148 117.882 11.656 117.882 18.0556C117.882 24.4552 113.464 28.8709 107.075 28.8709ZM107.075 11.304C103.769 11.304 101.449 13.5758 101.449 18.0556C101.449 22.5354 103.769 24.8071 107.075 24.8071C110.381 24.8071 112.708 22.5354 112.708 18.0556C112.708 13.5758 110.381 11.304 107.075 11.304ZM109.866 39.0622H104.658V56.0211H99.9435V39.0622H93.9961V34.9344H111.068L109.866 39.0622ZM88.423 20.9355C87.2152 21.3834 85.7214 21.6394 83.8777 21.6394H83.3374V28.551H78.4744V7.46425H84.3228C86.1981 7.46425 87.8191 7.72027 89.1223 8.3282C91.4743 9.41615 92.7775 11.528 92.7775 14.5358C92.7775 17.0071 91.7286 19.6875 88.423 20.9355ZM86.2935 11.8833C85.7928 11.528 85.0221 11.4 84.0685 11.4H83.3374V17.7112H84.1639C84.9903 17.7112 85.6896 17.6076 86.2299 17.3517C87.247 16.8717 87.7237 15.8797 87.7237 14.5358C87.7237 13.4479 87.3195 12.424 86.2935 11.8833ZM84.8713 34.7611C87.1209 34.7611 89.0005 35.2275 90.2332 35.8624V40.246C88.3534 39.2862 86.6895 38.7742 85.0254 38.7742C83.8954 38.7742 82.8991 39.1902 82.8991 40.4701C82.8991 43.7338 91.5274 43.2219 91.5274 50.0055C91.5274 53.9092 88.1377 56.341 83.7928 56.341C81.3892 56.341 78.8932 55.6692 77.1367 54.3571L78.924 50.6775C80.28 51.6373 81.8206 52.2772 83.6079 52.2772C84.9946 52.2772 86.5045 51.7974 86.5045 50.4214C86.5045 46.9336 77.8764 47.3817 77.8764 40.8861C77.8764 37.6543 80.3724 34.7611 84.8713 34.7611ZM163.281 56.0211H158.567V34.9344H163.281V56.0211Z" fill="#001629"/>
-<path d="M0 56.8409V51.5752L16.8841 54.0887V60.0002L0 56.8409Z" fill="#1B97DD"/>
-<path d="M0 48.1628V42.9253L16.8841 44.3153V50.2409L0 48.1628Z" fill="#1B97DD"/>
-<path d="M0 39.4851V34.2476L21.1789 34.5566V40.6506L0 39.4851Z" fill="#1B97DD"/>
-<path d="M0 30.8774V25.6258L37.8526 23.5898V30.3859L0 30.8774Z" fill="#1B97DD"/>
-<path d="M0 22.2561V17.0044L40.909 11.9873V18.9006L0 22.2561Z" fill="#1B97DD"/>
-<path d="M0 8.35479V13.6064L43.9719 7.10508V0L0 8.35479Z" fill="#1B97DD"/>
-<path d="M60.0008 13.6064V8.35479L43.9727 0V7.10508L60.0008 13.6064Z" fill="#005A8D"/>
-<path d="M60.0011 22.2279V16.9764L40.9102 11.9873V18.9006L60.0011 22.2279Z" fill="#005A8D"/>
-<path d="M59.9872 30.8779V25.6403L37.8398 23.5762V30.3863L59.9872 30.8779Z" fill="#005A8D"/>
-<path d="M59.9851 39.5554V34.2759L21.1641 34.5567V40.6507L59.9851 39.5554Z" fill="#005A8D"/>
-<path d="M59.9868 48.2051V42.9395L16.8711 44.3154V50.241L59.9868 48.2051Z" fill="#005A8D"/>
-<path d="M59.9868 56.8264V51.5889L16.8711 54.0883V59.9998L59.9868 56.8264Z" fill="#005A8D"/>
-</svg>

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>