@policystudio/policy-studio-ui-vue 1.1.90-beta.3 → 1.1.90-beta.31

package/postcss.config.js

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

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/index.js

@@ -1,166 +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/Button.stories.js

@@ -1,48 +0,0 @@
-import MyButton from './Button.vue'
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-export default {
-  title: 'Example/Button',
-  component: MyButton,
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: {
-      control: 'color',
-    },
-    onClick: {},
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['small', 'medium', 'large'],
-    },
-  },
-}
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-}
-
-export const Secondary = {
-  args: {
-    label: 'Button',
-  },
-}
-
-export const Large = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-}
-
-export const Small = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-}

package/src/stories/Button.vue

@@ -1,59 +0,0 @@
-<template>
-  <button
-    type="button"
-    :class="classes"
-    @click="onClick"
-    :style="style"
-  >
-    {{ label }}
-  </button>
-</template>
-
-<script>
-import './button.css'
-import { reactive, computed } from 'vue'
-
-export default {
-  name: 'MyButton',
-
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    primary: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      validator: function (value) {
-        return ['small', 'medium', 'large'].indexOf(value) !== -1
-      },
-    },
-    backgroundColor: {
-      type: String,
-    },
-  },
-
-  emits: ['click'],
-
-  setup(props, { emit }) {
-    props = reactive(props)
-    return {
-      classes: computed(() => ({
-        'storybook-button': true,
-        'storybook-button--primary': props.primary,
-        'storybook-button--secondary': !props.primary,
-        [`storybook-button--${props.size || 'medium'}`]: true,
-      })),
-      style: computed(() => ({
-        backgroundColor: props.backgroundColor,
-      })),
-      onClick() {
-        emit('click')
-      },
-    }
-  },
-}
-</script>

package/src/stories/Header.stories.js

@@ -1,41 +0,0 @@
-import MyHeader from './Header.vue'
-
-export default {
-  title: 'Example/Header',
-  component: MyHeader,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  render: (args) => ({
-    // Components used in your story `template` are defined in the `components` object
-    components: {
-      MyHeader,
-    },
-    // The story's `args` need to be mapped into the template through the `setup()` method
-    setup() {
-      // Story args can be spread into the returned object
-      return {
-        ...args,
-      }
-    },
-    // Then, the spread values can be accessed directly in the template
-    template: '<my-header :user="user" />',
-  }),
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
-  },
-}
-
-export const LoggedIn = {
-  args: {
-    user: {
-      name: 'Jane Doe',
-    },
-  },
-}
-
-export const LoggedOut = {
-  args: {
-    user: null,
-  },
-}