@policystudio/policy-studio-ui-vue 1.0.13 → 1.0.17

package/package.json

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

package/src/components/controls/PsSwitch.vue

@@ -12,6 +12,7 @@
 <script>
 export const sizes = ['big', 'small']
 export default {
+  name: 'PsSwitch',
   computed: {
     text() {
       if (this.label && this.labelActived) {
@@ -57,6 +58,10 @@ export default {
 </script>
 
 <style scoped>
+/* 
+	@TODO - Fix the apply error
+	https://www.dropbox.com/s/83vwthcdvdt5t97/Screen%20Shot%202022-01-06%20at%2011.49.00%20AM.png?dl=0
+	
 .ps-switch {
 	width: 46px;
 }
@@ -88,5 +93,5 @@ input:checked + .toggle-bg:after {
 
 input:checked + .toggle-bg {
 	@apply psui-bg-green-20 psui-border-green-20;
-}
+} */
 </style>

package/src/components/forms/PsInput.vue

@@ -12,6 +12,14 @@
         :aria-required="required"
         :aria-invalid="validation.hasError"
         :class="[getInputClasses, { 'psui-border-red' : validation.hasError }]"
+        :required="required"
+        :value="value"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
+        @input="$emit('input', $event)"
+        @keydown.enter="$emit('keydown', $event)"
+        @change="$emit('change', $event)"
+        v-bind="getAttrs"
       />
       <div class="psui-absolute psui-inset-y-0 psui-right-0 psui-pr-2 psui-flex psui-items-center" v-if="this.$slots.append">
         <slot name="append"></slot>
@@ -56,6 +64,9 @@ export default {
         return { hasError: false, checked: false, filled: false, required: false }
       }
     },
+    value: {
+      required: true,
+    },    
 	},
   computed: {
     getInputClasses() {
@@ -66,8 +77,17 @@ export default {
     },
     getPadding() {
       return this.mini ? 'psui-px-2 mini-p' : 'psui-py-2 psui-px-4'
+    },
+    getAttrs() {
+      const defaultAttrs = {
+        autocapitalize: 'sentences',
+        autocomplete: 'chrome-off',
+        autocorrect: 'off',
+        spellcheck: 'spellcheck'
+      }
+      return { ...defaultAttrs, ...this.$attrs }
     }
-  }
+  },
 }
 </script>
 

package/src/index.js

@@ -1,9 +1,13 @@
 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 PsDialog from './components/notifications/PsDialog.vue';
 import PsToast from './components/notifications/PsToast.vue';
 import PsTabHeader from './components/tabs/PsTabHeader.vue';
-import PsRadioButton from './components/controls/PsRadioButton.vue';
 
 export default {
   install(Vue) {
@@ -13,6 +17,10 @@ export default {
     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);
   }
 };
 
@@ -22,5 +30,9 @@ export {
   PsDialog,
   PsToast,
   PsTabHeader,
-  PsRadioButton
+  PsRadioButton,
+  PsSlider,
+  PsSwitch,
+  PsInput,
+  PsToggle
 }

package/src/stories/Input.stories.js

@@ -62,6 +62,7 @@ InputText.args = {
   disabled: false,
   required: false,
   mini: false,
+  value: 10,
 };
 
 export const InputPassword = TemplateDefault.bind({});