@policystudio/policy-studio-ui-vue 1.1.89 → 1.1.90-access.0

package/postcss.config.js

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

package/src/components/playground/PsScrollBar.vue

@@ -1,248 +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>
-                <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>
-                <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/index.js

@@ -1,167 +0,0 @@
-
-/**
- * General Components
- */
-
-import PsButton from './components/buttons/PsButton.vue'
-import PsCheckbox from './components/controls/PsCheckbox.vue'
-import PsRadioButton from './components/controls/PsRadioButton.vue'
-import PsSlider from './components/controls/PsSlider.vue'
-import PsSwitch from './components/controls/PsSwitch.vue'
-import PsToggle from './components/controls/PsToggle.vue'
-import PsInput from './components/forms/PsInput.vue'
-import PsDropdown from './components/forms/PsDropdown.vue'
-import PsDropdownList from './components/forms/PsDropdownList.vue'
-import PsInputTextArea from './components/forms/PsInputTextArea.vue'
-import PsInputSelect from './components/forms/PsInputSelect.vue'
-import PsDialog from './components/notifications/PsDialog.vue'
-import PsToast from './components/notifications/PsToast.vue'
-import PsTabHeader from './components/tabs/PsTabHeader.vue'
-import PsAccordion from './components/accordion/PsAccordion.vue'
-import PsAccordionItem from './components/accordion/PsAccordionItem.vue'
-import PsChips from './components/chips/PsChips.vue'
-import PsDataTable from './components/datatable/PsDataTable.vue'
-import PsDataTableItem from './components/datatable/PsDataTableItem.vue'
-import PsTableResults from './components/table-results/PsTableResults.vue'
-import PsTableResultsBody from './components/table-results/PsTableResultsBody.vue'
-import PsTableResultsHead from './components/table-results/PsTableResultsHead.vue'
-import PsTableResultsHeadComparison from './components/table-results/PsTableResultsHeadComparison.vue'
-import PsTableResultsHeadFlexible from './components/table-results/PsTableResultsHeadFlexible.vue'
-import PsIcon from './components/ui/PsIcon.vue'
-import PsDotLoader from './components/ui/PsDotLoader.vue'
-import PsTooltip from './components/tooltip/PsTooltip.vue'
-import PsRichTooltip from './components/tooltip/PsRichTooltip.vue'
-import PsDialogTooltip from './components/tooltip/PsDialogTooltip.vue'
-import PsDraggable from './components/controls/PsDraggable.vue'
-import PsCardInfos from './components/badges-and-tags/PsCardInfos.vue'
-import PsChartLegend from './components/badges-and-tags/PsChartLegend.vue'
-import PsInlineSelector from './components/controls/PsInlineSelector.vue'
-import PsScrollBar from './components/playground/PsScrollBar.vue'
-import PsMiniTag from './components/badges-and-tags/PsMiniTag.vue'
-import PsCheckboxSimple from './components/controls/PsCheckboxSimple.vue'
-import PsBadgeWithIcon from './components/badges-and-tags/PsBadgeWithIcon.vue'
-import PsProgressBar from './components/badges-and-tags/PsProgressBar.vue'
-import PsRadioButtonSimple from './components/controls/PsRadioButtonSimple.vue'
-import PsTestimonialCard from './components/badges-and-tags/PsTestimonialCard.vue'
-import PsDateCardInfo from './components/badges-and-tags/PsDateCardInfo.vue'
-import PsTagScope from './components/badges-and-tags/PsTagScope.vue'
-import PsBarChart from './components/data-graphics/PsBarChart.vue'
-import PsSimpleAlert from './components/notifications/PsSimpleAlert.vue'
-import PsBreadcrumb from './components/navigations/PsBreadcrumb.vue'
-
-
-export default {
-  install(Vue) {
-    Vue.component('PsButton', PsButton)
-    Vue.component('PsCheckbox', PsCheckbox)
-    Vue.component('PsDialog', PsDialog)
-    Vue.component('PsToast', PsToast)
-    Vue.component('PsTabHeader', PsTabHeader)
-    Vue.component('PsRadioButton', PsRadioButton)
-    Vue.component('PsSlider', PsSlider)
-    Vue.component('PsSwitch', PsSwitch)
-    Vue.component('PsInput', PsInput)
-    Vue.component('PsToggle', PsToggle)
-    Vue.component('PsAccordion', PsAccordion)
-    Vue.component('PsAccordionItem', PsAccordionItem)
-    Vue.component('PsChips', PsChips)
-    Vue.component('PsDataTable', PsDataTable)
-    Vue.component('PsDataTableItem', PsDataTableItem)
-    Vue.component('PsTableResults', PsTableResults)
-    Vue.component('PsTableResultsHead', PsTableResultsHead)
-    Vue.component('PsTableResultsHeadComparison', PsTableResultsHeadComparison)
-    Vue.component('PsTableResultsBody', PsTableResultsBody)
-    Vue.component('PsTableResultsHeadFlexible',PsTableResultsHeadFlexible)
-    Vue.component('PsIcon', PsIcon)
-    Vue.component('PsDotLoader', PsDotLoader)
-    Vue.component('PsTooltip', PsTooltip)
-    Vue.component('PsRichTooltip', PsRichTooltip)
-    Vue.component('PsDialogTooltip', PsDialogTooltip)
-    Vue.component('PsDraggable', PsDraggable)
-    Vue.component('PsCardInfos', PsCardInfos)
-    Vue.component('PsChartLegend', PsChartLegend)
-    Vue.component('PsInlineSelector', PsInlineSelector)
-    Vue.component('PsInputTextArea', PsInputTextArea)
-    Vue.component('PsInputSelect', PsInputSelect)
-    Vue.component('PsDropdown',PsDropdown)
-    Vue.component('PsDropdownList', PsDropdownList)
-    Vue.component('PsScrollBar', PsScrollBar)
-    Vue.component('PsMiniTag', PsMiniTag)
-    Vue.component('PsCheckboxSimple', PsCheckboxSimple)
-    Vue.component('PsBadgeWithIcon', PsBadgeWithIcon)
-    Vue.component('PsProgressBar', PsProgressBar)
-    Vue.component('PsRadioButtonSimple', PsRadioButtonSimple)
-    Vue.component('PsTestimonialCard',PsTestimonialCard)
-    Vue.component('PsDateCardInfo',PsDateCardInfo)
-    Vue.component('PsTagScope',PsTagScope)
-    Vue.component('PsBarChart',PsBarChart)
-    Vue.component('PsSimpleAlert',PsSimpleAlert)
-    Vue.component('PsBreadcrumb', PsBreadcrumb)
-    
-    
-    Vue.directive('click-outside', {
-      bind: function (el, binding, vnode) {
-        el.clickOutsideEvent = function (event) {
-          // here I check that click was outside the el and his children
-          if (!(el == event.target || el.contains(event.target))) {
-            // and if it did, call method provided in attribute value
-            vnode.context[binding.expression](event)
-          }
-        }
-        document.body.addEventListener('click', el.clickOutsideEvent)
-      },
-      unbind: function (el) {
-        document.body.removeEventListener('click', el.clickOutsideEvent)
-      },
-    })
-  },
-}
-
-export {
-  PsButton,
-  PsCheckbox,
-  PsRadioButton,
-  PsSlider,
-  PsSwitch,
-  PsToggle,
-  PsInput,
-  PsDialog,
-  PsToast,
-  PsTabHeader,
-  PsAccordion,
-  PsAccordionItem,
-  PsChips,
-  PsDataTable,
-  PsDataTableItem,
-  PsTableResults,
-  PsTableResultsHead,
-  PsTableResultsBody,
-  PsTableResultsHeadFlexible,
-  PsTableResultsHeadComparison,
-  PsIcon,
-  PsDotLoader,
-  PsTooltip,
-  PsRichTooltip,
-  PsDialogTooltip,
-  PsDraggable,
-  PsCardInfos,
-  PsChartLegend,
-  PsInlineSelector,
-  PsInputTextArea,
-  PsInputSelect,
-  PsDropdown,
-  PsDropdownList,
-  PsScrollBar,
-  PsMiniTag,
-  PsCheckboxSimple,
-  PsBadgeWithIcon,
-  PsProgressBar,
-  PsRadioButtonSimple,
-  PsTestimonialCard,
-  PsDateCardInfo,
-  PsTagScope,
-  PsBarChart,
-  PsSimpleAlert,
-  PsBreadcrumb
-}
-

package/src/stories/Playground.stories.js

@@ -1,16 +0,0 @@
-import PsScrollBar from '../components/playground/PsScrollBar.vue'
-
-export default {
-    title: 'Components/Playground',
-    component: PsScrollBar
-}
-
-const Template =  (args, {argTypes}) => ({
-    props: Object.keys(argTypes),
-    components: { PsScrollBar},
-    template: `
-            <PsScrollBar v-bind='$props' scrollWidth='30'></PsScrollbar>
-    `
-})
-
-export const ScrollBar = Template.bind({})