@globalbrain/sefirot 0.71.0 → 0.72.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [0.72.0](https://github.com/globalbrain/sefirot/compare/v0.71.0...v0.72.0) (2021-12-01)
+
+### Features
+
+* **icon:** add `copy` icon ([#109](https://github.com/globalbrain/sefirot/issues/109)) ([a5dfd72](https://github.com/globalbrain/sefirot/commit/a5dfd726691baecc454efb7b14c9b0028305577b))
+* **input-select:** add `small` size and `nullable` option ([b416612](https://github.com/globalbrain/sefirot/commit/b416612e8c2881920499dc36deb7f7c2b74d9bd3))
+* **input-checkbox:** add size option to input checkbox ([cfddd90](https://github.com/globalbrain/sefirot/commit/cfddd9003685a4b4984f69bafaead92bc84219e3))
+
 # [0.71.0](https://github.com/globalbrain/sefirot/compare/v0.70.1...v0.71.0) (2021-11-18)
 
 ### Features

package/lib/components/SInputCheckbox.vue

@@ -1,6 +1,7 @@
 <template>
   <SInputBase
     class="SInputCheckbox"
+    :class="[size]"
     :name="name"
     :label="label"
     :note="note"
@@ -27,6 +28,8 @@ import { Validation } from '../validation/Validation'
 import SIconCheck from './icons/SIconCheck.vue'
 import SInputBase from './SInputBase.vue'
 
+type Size = 'mini' | 'small' | 'medium'
+
 export default defineComponent({
   components: {
     SIconCheck,
@@ -39,6 +42,7 @@ export default defineComponent({
   },
 
   props: {
+    size: { type: String as PropType<Size>, default: 'small' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },

package/lib/components/SInputCheckboxes.vue

@@ -1,6 +1,7 @@
 <template>
   <SInputBase
     class="SInputCheckboxes"
+    :class="[size]"
     :name="name"
     :label="label"
     :note="note"
@@ -21,10 +22,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { PropType, defineComponent } from '@vue/composition-api'
 import SInputBase from './SInputBase.vue'
 import SInputCheckbox from './SInputCheckbox.vue'
 
+type Size = 'mini' | 'small' | 'medium'
+
 export default defineComponent({
   components: {
     SInputBase,
@@ -37,6 +40,7 @@ export default defineComponent({
   },
 
   props: {
+    size: { type: String as PropType<Size>, default: 'small' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },

package/lib/components/SInputRadio.vue

@@ -19,9 +19,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { PropType, defineComponent } from '@vue/composition-api'
 import SInputBase from './SInputBase.vue'
 
+type Size = 'mini' | 'small' | 'medium'
+
 export default defineComponent({
   components: {
     SInputBase
@@ -33,6 +35,7 @@ export default defineComponent({
   },
 
   props: {
+    size: { type: String as PropType<Size>, default: 'small' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },

package/lib/components/SInputRadios.vue

@@ -26,7 +26,7 @@ import { PropType, defineComponent } from '@vue/composition-api'
 import SInputBase from './SInputBase.vue'
 import SInputRadio from './SInputRadio.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
+type Size = 'mini' | 'small' | 'medium'
 
 export default defineComponent({
   components: {
@@ -40,7 +40,7 @@ export default defineComponent({
   },
 
   props: {
-    size: { type: String as PropType<Size>, default: 'medium' },
+    size: { type: String as PropType<Size>, default: 'small' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },

package/lib/components/SInputSelect.vue

@@ -20,12 +20,12 @@
         @change="emitChange"
       >
         <option
-          v-if="placeholder"
-          value=""
+          v-if="placeholder || nullable"
+          :value="JSON.stringify({ value: null })"
           :selected="isNotSelected"
-          disabled
+          :disabled="!nullable"
         >
-          {{ placeholder }}
+          {{ placeholder || 'Please select' }}
         </option>
 
         <option
@@ -54,8 +54,8 @@ import SIconChevronUp from './icons/SIconChevronUp.vue'
 import SIconChevronDown from './icons/SIconChevronDown.vue'
 import SInputBase from './SInputBase.vue'
 
-type Size = 'medium' | 'mini'
-type Mode = 'filled' | 'outlined'
+type Size = 'mini' | 'small' | 'medium'
+type Mode = 'outlined' | 'filled'
 
 interface Option {
   label: string
@@ -76,30 +76,29 @@ export default defineComponent({
   },
 
   props: {
-    size: { type: String as PropType<Size>, default: 'medium' },
-    mode: { type: String as PropType<Mode>, default: 'filled' },
+    size: { type: String as PropType<Size>, default: 'small' },
+    mode: { type: String as PropType<Mode>, default: 'outlined' },
     name: { type: String, default: null },
     label: { type: String, default: null },
     note: { type: String, default: null },
     help: { type: String, default: null },
     placeholder: { type: String, default: null },
+    options: { type: Array as PropType<Option[]>, required: true },
+    nullable: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     errorMessage: { type: Boolean, default: true },
-    options: { type: Array as PropType<Option[]>, required: true },
-    validation: { type: Object, default: null },
-    value: { type: [String, Number, Boolean], default: null }
+    value: { type: [String, Number, Boolean], default: null },
+    validation: { type: Object, default: null }
   },
 
   setup(props, { emit }) {
     const isFocused = ref(false)
 
-    const classes = computed(() => ({
-      medium: props.size === 'medium',
-      mini: props.size === 'mini',
-      filled: props.mode === 'filled',
-      outlined: props.mode === 'outlined',
-      disabled: props.disabled
-    }))
+    const classes = computed(() => [
+      props.size,
+      props.mode,
+      { disabled: props.disabled }
+    ])
 
     const isNotSelected = computed(() => {
       return props.value === undefined || props.value === null || props.value === ''
@@ -118,7 +117,7 @@ export default defineComponent({
     }
 
     function emitChange(e: SyntheticInputEvent): void {
-      props.validation && props.validation.$touch()
+      props.validation?.$touch()
 
       const option = JSON.parse(e.target.value)
 
@@ -158,6 +157,23 @@ export default defineComponent({
   }
 }
 
+.SInputSelect.small {
+  .box {
+    height: 40px;
+  }
+
+  .select {
+    padding: 7px 30px 5px 12px;
+    line-height: 24px;
+    font-size: 16px;
+  }
+
+  .icon {
+    top: 7px;
+    right: 10px;
+  }
+}
+
 .SInputSelect.medium {
   .box {
     height: 48px;

package/lib/components/SSheetHeaderTitle.vue

@@ -11,7 +11,7 @@
   margin: 0;
   padding: 14px 16px 10px;
   line-height: 20px;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
 }
 </style>

package/lib/components/SSheetMedium.vue

@@ -8,17 +8,7 @@
 @import "@/assets/styles/variables";
 
 .SSheetMedium {
-  padding: 24px 16px;
-
-  @media (min-width: 768px) {
-    padding: 24px;
-  }
-}
-
-.SSheet.small .SSheetMedium {
-  @media (min-width: 768px) {
-    padding: 24px 16px;
-  }
+  padding: 16px;
 }
 
 .SSheetMedium >>> h1 {

package/lib/components/icons/SIconCopy.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M20,23H11a2.9,2.9,0,0,1-3-3V11a2.9,2.9,0,0,1,3-3h9a2.9,2.9,0,0,1,3,3v9A2.9,2.9,0,0,1,20,23ZM11,10a.9.9,0,0,0-1,1v9a.9.9,0,0,0,1,1h9a.9.9,0,0,0,1-1V11a.9.9,0,0,0-1-1Z" />
+    <path d="M5,16H4a2.9,2.9,0,0,1-3-3V4A2.9,2.9,0,0,1,4,1h9a2.9,2.9,0,0,1,3,3V5a1,1,0,0,1-2,0V4a.9.9,0,0,0-1-1H4A.9.9,0,0,0,3,4v9a.9.9,0,0,0,1,1H5a1,1,0,0,1,0,2Z" />
+  </svg>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "0.71.0",
+  "version": "0.72.0",
   "description": "Vue Components for Global Brain Design System.",
   "files": [
     "lib"