@policystudio/policy-studio-ui-vue 1.0.5 → 1.0.6

package/README.md

@@ -1,11 +1,29 @@
 # UI library of Vue components with StoryBook
 
-### Run documentation
-```$ npm run storybook```
+### Instalation
+```sh
+npm i -S @policystudio/policy-studio-ui-vue
+```
 
-### Instalation for use
-```$ npm i -S @policystudio/policy-studio-ui-vue```
+### Import the library
+```javascript
+// src/initComponents.js
 
+import PolicyStudioUiVue from '@policystudio/policy-studio-ui-vue'
+// ...
+Vue.use(PolicyStudioUiVue) 
+```
 ### Import CSS
 Add in your css file
-```@import '~@policystudio/policy-studio-ui-vue/src/assets/scss/tailwind.css'```
+
+```css
+/* src/assets/css/index.css */
+
+@import '~@policystudio/policy-studio-ui-vue/src/assets/scss/tailwind.css'
+```
+
+### Run documentation
+```npm run storybook```
+
+### Website
+[ui.policystudio.co](https://ui.policystudio.co/)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/components/controls/PsCheckbox.vue

@@ -1,7 +1,11 @@
 <template>
   <label class="container">
     {{ label }}
-    <input type="checkbox">
+    <input
+      type="checkbox"
+      v-model="childValue"
+      :disabled="disabled"
+    />
     <span class="checkmark"></span>
   </label>
 </template>
@@ -54,6 +58,7 @@ export default {
         return this.value
       },
       set (newValue) {
+        console.log(newValue)
         if(this.prevent) return
         this.$emit('input', newValue)
         this.$emit('change', newValue)

package/src/components/controls/PsDraggable.vue

@@ -0,0 +1,13 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

package/src/components/controls/PsSlider.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <div v-if="label" class="psui-mb-2">
+      <div class="psui-float-right">{{ value }}</div>
+      <div>{{ label }}</div> 
+    </div>
+    <div class="" :class="{'psui-flex psui-items-center': !label && !bubble }">
+      <div
+        v-if="bubble"
+        class="psui-relative psui-bg-gray-40 psui-text-gray-20 psui-rounded-md psui-text-white psui-font-bold psui-w-10 psui-text-center range-value"
+        :style="{ left: `${positionBubble}px` }"
+      >
+        {{ value }}
+      </div>
+      <input
+        type="range"
+        :min="min"
+        :max="max"
+        :value="value" 
+        @input="$emit('update:value', Number($event.target.value))"
+        class="slider psui-float-left"
+        ref="slider"
+      />
+      <span v-if="!label && !bubble" class="psui-bg-gray-20 psui-font-bold psui-text-gray-50 psui-px-2 psui-py-px psui-rounded-sm psui-float-left psui-ml-2">{{ value }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PsSlider',
+  computed: {
+    positionBubble() {
+      if (this.bubble && this.isMounted) {
+        return (this.$refs.slider.offsetWidth / this.max) * this.value - 15
+      }
+    }
+  },
+  methods: {
+    getValueToScale(value) {
+      return 100 * value / this.rangeDistanceMax
+    }
+  },
+  props: {
+    min: {
+      type: Number,
+      default: 0,
+    },    
+    max: {
+      type: Number,
+      required: true,
+    },
+    label: {
+      type: String,
+    },
+    value: {
+      type: [Number, String],
+    },
+    baseValue: {
+      type: [Number, Boolean]
+    },
+    labelPosition: {
+      type: String
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    bubble: {
+      type: Boolean
+    }
+  },
+  data: () => {
+    return {
+      isMounted: false
+    }
+  },
+  mounted() {
+    this.isMounted = true
+  }
+}
+</script>
+
+<style>
+.slider {
+  width: 100%;
+  -webkit-appearance: none;
+  height: 6px;
+  border-radius: 5px;
+  background: #d3d3d3;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+}
+
+.slider:hover {
+  opacity: 1;
+}
+
+.slider::-webkit-slider-thumb {
+  border: none;
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #64B5CE;
+  cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+  border: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #64B5CE;
+  cursor: pointer;
+}
+.slider::-webkit-slider-progress, .slider::-moz-range-progress {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: #64B5CE;
+  height: 6px;
+}
+
+.range-value{
+  margin-bottom: 10px;
+  padding: 2px 4px;
+
+}
+</style>

package/src/components/controls/PsSwitch.vue

@@ -0,0 +1,92 @@
+<template>
+	<label for="ps-switch" class="psui-flex psui-items-center psui-cursor-pointer psui-relative">
+		<input type="checkbox" id="ps-switch" class="psui-hidden" :checked="active">
+		<div 
+			:class="classes"
+			@click="change()"
+		></div>
+		<span class="psui-ml-3 psui-text-gray-50 psui-text-sm psui-font-medium">{{ label }}</span>
+	</label>
+</template>
+
+<script>
+export const sizes = ['big', 'small']
+export default {
+  computed: {
+    text() {
+      if (this.label && this.labelActived) {
+        return this.active ? this.labelActived : this.label
+      } else if (this.label) {
+        return this.label
+      } else {
+        return false
+      }
+    },
+		classes() {
+			if (this.size === 'small') {
+				return 'toggle-bg psui-bg-gray-40 psui-border-gray-40 psui-border-2 psui-h-4 ps-switch-small psui-rounded-full'
+			}
+			return 'toggle-bg psui-bg-gray-40 psui-border-gray-40 psui-border-2 psui-h-6 ps-switch psui-rounded-full'
+		}
+  },
+  props: {
+    label: String,
+    active: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+		size: {
+			type: String,
+			default: 'big',
+      validator: (value) => sizes.indexOf(value) !== -1
+		}
+  },
+  methods: {
+    change() {
+      if (!this.disabled) {
+        this.$emit('update:active', !this.active)
+        this.$emit('change', !this.active)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ps-switch {
+	width: 46px;
+}
+.ps-switch-small {
+	width: 30px;
+}
+.toggle-bg:after {
+	content: '';
+	@apply psui-absolute psui-bg-white psui-border-gray-40 psui-rounded-full psui-h-5 psui-w-5 psui-transition;
+}
+.toggle-bg:after + .ps-switch-small {
+	content: '';
+	@apply psui-absolute psui-bg-white psui-border-gray-40 psui-rounded-full psui-h-2 psui-w-2 psui-transition;
+}
+
+input:checked + .toggle-bg:after + .ps-switch-small {
+	transform: translateX(100%);
+	position: absolute;
+	left: 2px;
+	@apply border-white;
+}
+
+input:checked + .toggle-bg:after {
+	transform: translateX(100%);
+	position: absolute;
+	left: 4px;
+	@apply border-white;
+}
+
+input:checked + .toggle-bg {
+	@apply psui-bg-green-20 psui-border-green-20;
+}
+</style>

package/src/stories/Checkbox.stories.js

@@ -11,8 +11,28 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsCheckbox },
+  data: () => {
+    return {
+      items: [
+        { label: 'Label 1', id: 1 },
+        { label: 'Label 2', id: 2 },
+        { label: 'Label 3', id: 3 }
+      ],
+      selected: []
+    }
+  },
   template: `
-  <PsCheckbox v-bind="$props" />
+  <div>
+    <PsCheckbox
+      v-bind="$props"
+      v-for="(item, index) in items"
+      :key="index"
+      :label="item.label"
+      :value.sync="item.id"
+      v-model="selected"
+    />
+    {{ selected }}
+  </div>
   `
 });
 
@@ -21,3 +41,4 @@ Default.args = {
   label: 'Label',
   size: 16
 };
+ 

package/src/stories/Slider.stories.js

@@ -0,0 +1,40 @@
+import PsSlider from '../components/controls/PsSlider.vue';
+export default {
+  title: 'Components/Slider',
+  component: PsSlider,
+  argTypes: {
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsSlider },
+  template: `
+  <div style="width: 500px;">
+    <PsSlider v-bind="$props" :value.sync="value" />
+  </div>
+  `
+});
+
+export const Label = Template.bind({});
+Label.args = {
+  min: 1,
+  max: 100,
+  value: 30,
+  label: 'Score Label'
+};
+
+export const NoLabel = Template.bind({});
+NoLabel.args = {
+  min: 1,
+  max: 100,
+  value: 15
+};
+
+export const Bubble = Template.bind({});
+Bubble.args = {
+  min: 1,
+  max: 100,
+  value: 23,
+  bubble: true
+};

package/src/stories/Swith.stories.js

@@ -0,0 +1,38 @@
+import PsSwitch, { sizes } from '../components/controls/PsSwitch.vue';
+export default {
+  title: 'Components/Switch',
+  component: PsSwitch,
+  argTypes: {
+    size: { control: { type: 'select', options: sizes } }
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsSwitch },
+  data: () => {
+    return {
+      model: true
+    }
+  },
+  template: `
+  <div>
+    <PsSwitch v-bind="$props" :active.sync="model" />
+  </div>
+  `
+});
+
+export const Big = Template.bind({});
+Big.args = {
+  size: 'big',
+  active: false,
+  label: 'Switch Big',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  active: false,
+  label: 'Switch Small',
+};
+