Merge pull request #5945 from kodadot/refactor/neo-switch

refactor: add NeoSwitch

components/rmrk/Create/ArweaveUploadSwitch.vue

@@ -1,20 +1,21 @@
 <template>
  <b-field>
- <b-switch v-model="checkedValue" :rounded="false">
+ <NeoSwitch v-model="checkedValue" :rounded="false">
  <div class="is-flex is-align-items-center">
  <span class="mr-2">
  {{ checkedValue ? $t('arweave.uploadYes') : $t('arweave.uploadNo') }}
  </span>
  <slot name="tooltip" />
  </div>
- </b-switch>
+ </NeoSwitch>
  </b-field>
 </template>
 
 <script lang="ts">
-import { Component, Vue, ModelSync } from 'nuxt-property-decorator'
+import { Component, ModelSync, Vue } from 'nuxt-property-decorator'
+import { NeoSwitch } from '@kodadot1/brick'
 
-@Component({})
+@Component({ components: { NeoSwitch } })
 export default class ArweaveUploadSwitch extends Vue {
  @ModelSync('value', 'input', { type: Boolean })
  readonly checkedValue!: boolean

components/rmrk/Create/SimpleMint.vue

@@ -145,9 +145,9 @@
  </b-field>
  <BasicSwitch v-model="nsfw" label="mint.nfsw" data-cy="input-nsfw" />
  <b-field type="is-danger" :message="haveNoToSMessage">
- <b-switch v-model="hasToS" :rounded="false" data-cy="input-tos">
+ <NeoSwitch v-model="hasToS" :rounded="false" data-cy="input-tos">
  {{ $t('termOfService.accept') }}
- </b-switch>
+ </NeoSwitch>
  </b-field>
  <b-field v-if="isLogIn" type="is-danger" :message="balanceNotEnoughMessage">
  <b-button
@@ -225,7 +225,7 @@ import { useFiatStore } from '@/stores/fiat'
 import { usePinningStore } from '@/stores/pinning'
 import { usePreferencesStore } from '@/stores/preferences'
 import { useIdentityStore } from '@/stores/identity'
-import { NeoIcon } from '@kodadot1/brick'
+import { NeoIcon, NeoSwitch } from '@kodadot1/brick'
 
 const components = {
  Auth: () => import('@/components/shared/Auth.vue'),
@@ -243,6 +243,7 @@ const components = {
  BasicSlider: () => import('@/components/shared/form/BasicSlider.vue'),
  BasicInput: () => import('@/components/shared/form/BasicInput.vue'),
  NeoIcon,
+ NeoSwitch,
 }
 
 @Component<SimpleMint>({

components/series/SeriesTable.vue

@@ -2,47 +2,6 @@
  <div>
  <Loader :value="isLoading" />
  <b-field grouped>
- <!-- <b-field class="mb-0" position="is-left">
- <div class="control is-flex">
- <b-switch
- v-if="isLogIn"
- class="gallery-switch"
- v-model="hasPassionFeed"
- :rounded="false">
- {{ $t('passion') }}
- </b-switch>
- </div>
- </b-field> -->
-
- <!-- <b-field
- position="is-left"
- expanded
- >
- <b-radio-button
- v-model="nbDays"
- native-value="24"
- type="is-outlined"
- >
- 24h
- </b-radio-button>
-
- <b-radio-button
- v-model="nbDays"
- native-value="7"
- type="is-outlined"
- >
- 7d
- </b-radio-button>
-
- <b-radio-button
- v-model="nbDays"
- native-value="30"
- type="is-outlined"
- >
- 30d
- </b-radio-button>
- </b-field> -->
-
  <b-field class="has-text-right" expanded>
  <b-select v-model="nbRows">
  <option value="10">10</option>

components/settings/Interface.vue

@@ -3,13 +3,13 @@
  <div class="label">
  {{ $t('user interface mode') }}
  </div>
- <b-switch v-model="enabledAdvancedUI" size="is-medium" :rounded="false">
+ <NeoSwitch v-model="enabledAdvancedUI" size="is-medium" :rounded="false">
  {{
  enabledAdvancedUI
  ? $t('advanced user interface')
  : $t('basic user interface')
  }}
- </b-switch>
+ </NeoSwitch>
  <div class="box">
  <div>
  <NeoCheckbox v-model="theatreView" :disabled="!enabledAdvancedUI">
@@ -107,11 +107,12 @@
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator'
 import { usePreferencesStore } from '@/stores/preferences'
-import { NeoCheckbox } from '@kodadot1/brick'
+import { NeoCheckbox, NeoSwitch } from '@kodadot1/brick'
 
 @Component({
  components: {
  Layout: () => import('@/components/rmrk/Gallery/Layout.vue'),
+ NeoSwitch,
  NeoCheckbox,
  },
 })

components/shared/Support.vue

@@ -1,19 +1,20 @@
 <template>
- <b-switch v-model="model" :type="type" :rounded="false">
+ <NeoSwitch v-model="model" :type="type" :rounded="false">
  <div class="is-flex is-align-items-center">
  <span class="mr-2">
  {{ value ? `${$t(activeMessage)}${priceString}` : $t(passiveMessage) }}
  </span>
  <slot name="tooltip" />
  </div>
- </b-switch>
+ </NeoSwitch>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'nuxt-property-decorator'
 import { round } from '@/utils/support'
+import { NeoSwitch } from '@kodadot1/brick'
 
-@Component({})
+@Component({ components: { NeoSwitch } })
 export default class Support extends Vue {
  @Prop() public value!: boolean
  @Prop({ type: Boolean, default: true }) public showPrice?: boolean

components/shared/form/BasicSwitch.vue

@@ -1,6 +1,6 @@
 <template>
  <b-field>
- <b-switch
+ <NeoSwitch
  v-model="isSwitched"
  :rounded="false"
  :size="size"
@@ -11,15 +11,16 @@
  <component :is="componentName" :label="message">
  {{ properLabel }}
  </component>
- </b-switch>
+ </NeoSwitch>
  </b-field>
 </template>
 
 <script lang="ts">
 import { TranslateResult } from 'vue-i18n'
 import { Component, Prop, VModel, Vue } from 'nuxt-property-decorator'
+import { NeoSwitch } from '@kodadot1/brick'
 
-@Component
+@Component({ components: { NeoSwitch } })
 export default class BasicSwitch extends Vue {
  @VModel({ type: Boolean, required: true }) isSwitched!: string
  @Prop({ type: String, required: true }) label!: string

components/spotlight/SpotlightTable.vue

@@ -18,16 +18,9 @@
  <template #top-left>
  <b-field class="mb-0">
  <div class="control is-flex">
- <b-switch v-model="onlyWithIdentity" :rounded="false">
+ <NeoSwitch v-model="onlyWithIdentity" :rounded="false">
  {{ $t('spotlight.filter_accounts') }}
- </b-switch>
- <!-- <b-switch
- v-if="isLogIn"
- class="gallery-switch"
- v-model="hasPassionFeed"
- :rounded="false">
- {{ $t('passion') }}
- </b-switch> -->
+ </NeoSwitch>
  </div>
  </b-field>
  <b-button
@@ -185,7 +178,7 @@
 import { Component, Watch, mixins } from 'nuxt-property-decorator'
 import { Debounce } from 'vue-debounce-decorator'
 import { GenericAccountId } from '@polkadot/types/generic/AccountId'
-import { NeoSkeleton } from '@kodadot1/brick'
+import { NeoSkeleton, NeoSwitch } from '@kodadot1/brick'
 
 import {
  axisLize,
@@ -218,6 +211,7 @@ const components = {
  SpotlightDetail: () => import('./SpotlightDetail.vue'),
  Loader: () => import('@/components/shared/Loader.vue'),
  NeoSkeleton,
+ NeoSwitch,
 }
 
 @Component({ components })

libs/ui/src/components/NeoSwitch/NeoSwitch.story.vue

@@ -0,0 +1,31 @@
+<template>
+ <Story title="NeoSwitch" :layout="{ type: 'grid', width: '600px' }">
+ <Variant title="NeoSwitch">
+ <NeoSwitch>Default</NeoSwitch>
+
+ <br />
+
+ <NeoSwitch v-model="isSwitched">
+ {{ isSwitched }}
+ </NeoSwitch>
+
+ <br />
+
+ <NeoSwitch v-model="isSwitchedCustom" true-value="Yes" false-value="No">
+ {{ isSwitchedCustom }}
+ </NeoSwitch>
+
+ <br />
+
+ <NeoSwitch disabled>Disabled</NeoSwitch>
+ </Variant>
+ </Story>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import NeoSwitch from './NeoSwitch.vue'
+
+const isSwitched = ref(false)
+const isSwitchedCustom = ref('Yes')
+</script>

libs/ui/src/components/NeoSwitch/NeoSwitch.vue

@@ -0,0 +1,24 @@
+<script lang="ts">
+import { OSwitch } from '@oruga-ui/oruga'
+
+export default {
+ extends: OSwitch,
+}
+</script>
+
+<style lang="scss">
+@import '../../scss/_theme.scss';
+@import '@oruga-ui/oruga/src/scss/utilities/_expressions.scss';
+@import '@oruga-ui/oruga/src/scss/utilities/_variables.scss';
+@import '@oruga-ui/oruga/src/scss/utilities/_animations.scss';
+@import '@oruga-ui/oruga/src/scss/utilities/_helpers.scss';
+@import '@oruga-ui/oruga/src/scss/components/_switch.scss';
+
+.o-switch {
+ &__check--checked {
+ @include ktheme() {
+ background-color: theme('k-primary');
+ }
+ }
+}
+</style>

libs/ui/src/index.ts

@@ -27,6 +27,7 @@ export { default as NeoInput } from './components/NeoInput/NeoInput.vue'
 export { default as NeoCarousel } from './components/NeoCarousel/NeoCarousel.vue'
 export { default as NeoCarouselItem } from './components/NeoCarousel/NeoCarouselItem.vue'
 
+export { default as NeoSwitch } from './components/NeoSwitch/NeoSwitch.vue'
 export { default as NeoSteps } from './components/NeoSteps/NeoSteps.vue'
 export { default as NeoStepItem } from './components/NeoSteps/NeoStepItem.vue'
 export { default as NeoDatepicker } from './components/NeoDatepicker/NeoDatepicker.vue'