@appscode/design-system 2.6.31 → 2.6.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.6.31",
+  "version": "2.6.32",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/styles/components/form-fields/_check-radio-switch.scss

@@ -176,6 +176,17 @@
 }
 
 .ac-switch {
+  &.is-fullwidth {
+    background-color: $primary-light-gray;
+    padding: 16px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid $color-border;
+    label {
+      color: $color-heading;
+    }
+  }
   .switch {
     position: relative;
     display: inline-block;

package/vue-components/v3/{upcoming → form-fields}/SimpleSelect.vue

@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<prop>(), {
   optionType: "simple",
 });
 
-defineEmits(["onRefreshClick"]);
+const emit = defineEmits(["select", "remove", "onRefreshClick"]);
 
 const selectedValue = ref<Option>();
 const labelHoisted = ref(false);
@@ -50,6 +50,7 @@ const filteredOptions = computed(() => {
 const onLabelClick = (op: Option) => {
   selectedValue.value = op;
   isOpen.value = false;
+  emit("select", op);
 };
 
 // handle label click
@@ -62,6 +63,7 @@ const selectClick = () => {
 const handleClear = () => {
   selectedValue.value = undefined;
   searchText.value = "";
+  emit("remove");
 };
 
 // handle depend on selected data
@@ -104,7 +106,7 @@ watch(isOpen, (n) => {
 
     <ac-buttons>
       <button class="button ac-button is-white" @click="handleClear">
-        <ArrowIcon />
+        <CloseIcon />
       </button>
 
       <ac-button modifier-classes="is-white" @click="$emit('onRefreshClick')">
@@ -112,7 +114,7 @@ watch(isOpen, (n) => {
       </ac-button>
 
       <ac-button modifier-classes="is-white" @click="isOpen = !isOpen">
-        <CloseIcon :direction="isOpen ? 'down' : 'up'" />
+        <ArrowIcon :direction="isOpen ? 'down' : 'up'" />
       </ac-button>
     </ac-buttons>
 

package/vue-components/v3/form-fields/Switch.vue

@@ -18,7 +18,7 @@ const model = defineModel({ type: Boolean });
 </script>
 
 <template>
-  <div class="ac-switch is-flex is-align-items-center gap-8">
+  <div class="ac-switch is-flex is-align-items-center gap-8" :class="modifierClasses">
     <label :for="name">{{ label }}</label>
     <label class="switch">
       <input
@@ -27,7 +27,6 @@ const model = defineModel({ type: Boolean });
         type="checkbox"
         :name="name"
         class="switch is-rounded is-primary"
-        :class="modifierClasses"
         :data-testid="dataTestId"
       />
       <span class="slider round"></span>