@policystudio/policy-studio-ui-vue 1.1.90-beta.4 → 1.1.90-beta.41

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/stories/Button.stories.ts

@@ -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.ts

@@ -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,
-  },
-}

package/src/stories/Header.vue

@@ -1,77 +0,0 @@
-<template>
-  <header>
-    <div class="storybook-header">
-      <div>
-        <svg
-          width="32"
-          height="32"
-          viewBox="0 0 32 32"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g
-            fill="none"
-            fill-rule="evenodd"
-          >
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        <span
-          class="welcome"
-          v-if="user"
-        >Welcome, aa<b>{{ user.name }}</b>!</span>
-        <my-button
-          size="small"
-          @click="$emit('logout')"
-          label="Log out"
-          v-if="user"
-        />
-        <my-button
-          size="small"
-          @click="$emit('login')"
-          label="Log in"
-          v-if="!user"
-        />
-        <my-button
-          primary
-          size="small"
-          @click="$emit('createAccount')"
-          label="Sign up"
-          v-if="!user"
-        />
-      </div>
-    </div>
-  </header>
-</template>
-
-<script>
-import './header.css'
-import MyButton from './Button.vue'
-
-export default {
-  name: 'MyHeader',
-
-  components: { MyButton },
-
-  props: {
-    user: {
-      type: Object,
-    },
-  },
-
-  emits: ['login', 'logout', 'createAccount'],
-}
-</script>

package/src/stories/Playground.stories.ts

@@ -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({})

package/src/stories/button.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}

package/src/stories/header.css

@@ -1,32 +0,0 @@
-.storybook-header {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.storybook-header svg {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-header h1 {
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 1;
-  margin: 6px 0 6px 10px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-header button + button {
-  margin-left: 10px;
-}
-
-.storybook-header .welcome {
-  color: #333;
-  font-size: 14px;
-  margin-right: 10px;
-}

package/webpack.config.js

@@ -1,22 +0,0 @@
-module.exports = {
-  resolve: {
-    alias: {
-      vue: '@vue/compat'
-    }
-  },
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          compilerOptions: {
-            compatConfig: {
-              MODE: 2
-            }
-          }
-        }
-      },
-    ]
-  }
-}