@policystudio/policy-studio-ui-vue 1.0.12 → 1.0.16

package/package.json

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

package/src/components/buttons/PsButton.vue

@@ -6,15 +6,14 @@
   >
     <i
       v-if="icon"
-      class="psui-my-auto material-icons psui-mr-2"
-      :class="{ 'psui-text-sm': size === 'small' }"
+      :class="['psui-mr-2', iconClasses]"
     >
     {{ icon }}
     </i>
     <div class="psui-flex-grow psui-text-left">{{ label }}</div>
     <i
-      v-if="iconRight" class="psui-my-auto material-icons psui-ml-2" 
-      :class="{ 'psui-text-sm': size === 'small' }"
+      v-if="iconRight"
+      :class="['psui-ml-2', iconClasses]"
     >
     {{ iconRight }}
     </i>
@@ -59,16 +58,21 @@ export default {
       type: String,
       default: ''
     },
+    'icon-color': {
+      type: String,
+      default: ''
+    },
     color: {
       type: String,
       default: ''
     }
   },
-  data () {
-    return {
-    }
-  },
   computed: {
+    iconClasses() {
+      const size = this.sizes === 'small' ? 'psui-text-sm' : ''
+      const color = this.iconColor.length > 0 ? `psui-text-${this.iconColor}` : ''
+      return `psui-my-auto material-icons ${size} ${color}`
+    },
     classes() {
       let sizeCss = 'psui-px-4 psui-py-2'
       if (this.size === 'medium') sizeCss = 'psui-px-4 psui-py-1'
@@ -76,7 +80,16 @@ export default {
       if (this.outline) return `${sizeCss} psui-bg-white psui-border ${this.disabled ? 'psui-border-gray-40 psui-text-gray-40' : 'psui-border-blue-60 psui-text-blue-60'}`
       if (this.ghost) return `${sizeCss} ${this.disabled ? 'psui-bg-gray-20 psui-text-gray-40' : 'psui-bg-blue-20 psui-text-blue-60 active:psui-shadow-inner'}`
       if (this.textOnly) {
-        const textCss = this.disabled ? 'psui-text-gray-40' : this.textColor.length > 0 ? `psui-text-${this.textColor}` : 'psui-text-blue-50 hover:psui-text-blue-60'
+        const hasTextColor = this.textColor.length > 0
+        const color = hasTextColor ? this.textColor.split('hover:')[0] : ''
+        const hover = hasTextColor ? this.textColor.split('hover:')[1] : ''
+
+        let textCss = 'psui-text-blue-50 hover:psui-text-blue-60'
+        if (this.disabled) textCss = 'psui-text-gray-40'
+        
+        if (hasTextColor) textCss = `psui-text-${color}`
+        if (hover) textCss += `hover:psui-text-${hover}`
+
         return `${sizeCss} ${textCss}`
       }
       if (this.disabled) return `${sizeCss} psui-bg-gray-20 psui-text-gray-40`

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')"
+        @blur="$emit('blur')"
+        @input="$emit('input', $event.target.value)"
+        @keydown.enter="$emit('keydown', $event.target.value)"
+        @change="$emit('change')"
+        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({});