Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(VSwitch, VSwitchBtn, VSwitchTrack) #19529

Draft
wants to merge 15 commits into
base: dev
Choose a base branch
from
Draft

feat(VSwitch, VSwitchBtn, VSwitchTrack) #19529

wants to merge 15 commits into from

Conversation

De-Hann
Copy link
Contributor

@De-Hann De-Hann commented Apr 2, 2024 •
edited

Motivation and Context

Split VSwitch component into VSwitch, VSwitchBtn and VSwitchTrack, to make it easier to have a compact inline switch component

Markup:

<template>
  <v-app>
    <v-container>
      <h1>VSwitch</h1>
      <v-container fluid>
        <v-switch v-model="model" label="Switch Default" />

        <v-switch v-model="model" color="success" label="Switch Label Slots">
          <template v-slot:track-false>false</template>
          <template v-slot:track-true>true</template>
        </v-switch>

        <v-switch v-model="model" color="success" label="Switch Success" />

        <v-switch
          v-model="indeterminateModel"
          color="success"
          label="Switch indeterminate"
          indeterminate
        />

        <v-switch v-model="model" label="Inset switch" hide-details inset />
        <v-switch
          v-model="yesno"
          :label="`Switch: ${yesno}`"
          false-value="no"
          true-value="yes"
          hide-details
        />

        <v-switch
          v-model="model"
          :label="`Switch Flat: ${model}`"
          flat
          hide-details
        />
      </v-container>
      <br />
      <v-divider />

      <h1>VSwitchBtn</h1>
      <v-container fluid>
        <v-switch-btn v-model="model" label="SwitchBtn Default" />

        <v-switch-btn
          v-model="model"
          color="success"
          label="SwitchBtn Label Slots"
        >
          <template v-slot:track-false>false</template>
          <template v-slot:track-true>true</template>
        </v-switch-btn>

        <v-switch-btn
          v-model="model"
          color="success"
          label="SwitchBtn Success"
        />

        <v-switch-btn
          v-model="indeterminateModel"
          color="success"
          label="SwitchBtn indeterminate"
          indeterminate
        />

        <v-switch-btn v-model="model" label="Inset switch" hide-details inset />
        <v-switch-btn
          v-model="yesno"
          :label="`SwitchBtn: ${yesno}`"
          false-value="no"
          true-value="yes"
          hide-details
        />

        <v-switch-btn
          v-model="model"
          :label="`SwitchBtn Flat: ${model}`"
          flat
          hide-details
        />
      </v-container>
      <br />
      <v-divider />

      <h1>DefaultsProvider VSwitchBtn</h1>
      <v-container fluid>
        <v-defaults-provider :defaults="{ VSwitchBtn: { density: 'compact' } }">
          <v-switch-btn v-model="model" label="SwitchBtn Default" />

          <v-switch-btn
            v-model="model"
            color="success"
            label="SwitchBtn Label Slots"
          >
            <template v-slot:track-false>false</template>
            <template v-slot:track-true>true</template>
          </v-switch-btn>

          <v-switch-btn
            v-model="model"
            color="success"
            label="SwitchBtn Success"
          />

          <v-switch-btn
            v-model="indeterminateModel"
            color="success"
            label="SwitchBtn indeterminate"
            indeterminate
          />

          <v-switch-btn
            v-model="model"
            label="Inset switch"
            hide-details
            inset
          />
          <v-switch-btn
            v-model="yesno"
            :label="`SwitchBtn: ${yesno}`"
            false-value="no"
            true-value="yes"
            hide-details
          />

          <v-switch-btn
            v-model="model"
            :label="`SwitchBtn Flat: ${model}`"
            flat
            hide-details
          />
        </v-defaults-provider>
      </v-container>
      <br />
      <v-divider />

      <h1>VSwitch - Colors</h1>

      <v-card flat>
        <v-card-text>
          <v-container fluid>
            <v-row>
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="red"
                  label="red"
                  value="red"
                  hide-details
                />
                <v-switch
                  v-model="ex11"
                  color="red-darken-3"
                  label="red-darken-3"
                  value="red-darken-3"
                  hide-details
                />
              </v-col>
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="indigo"
                  label="indigo"
                  value="indigo"
                  hide-details
                />
                <v-switch
                  v-model="ex11"
                  color="indigo-darken-3"
                  label="indigo-darken-3"
                  value="indigo-darken-3"
                  hide-details
                />
              </v-col>
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="orange"
                  label="orange"
                  value="orange"
                  hide-details
                />
                <v-switch
                  v-model="ex11"
                  color="orange-darken-3"
                  label="orange-darken-3"
                  value="orange-darken-3"
                  hide-details
                />
              </v-col>
            </v-row>

            <v-row class="mt-12">
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="primary"
                  label="primary"
                  value="primary"
                  hide-details
                />
                <v-switch
                  v-model="ex11"
                  color="secondary"
                  label="secondary"
                  value="secondary"
                  hide-details
                />
              </v-col>
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="success"
                  label="success"
                  value="success"
                  hide-details
                />
                <v-switch
                  v-model="ex11"
                  color="info"
                  label="info"
                  value="info"
                  hide-details
                />
              </v-col>
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="warning"
                  label="warning"
                  value="warning"
                  hide-details
                />
                <v-switch
                  v-model="ex11"
                  color="error"
                  label="error"
                  value="error"
                  hide-details
                />
              </v-col>
            </v-row>
          </v-container>
          <v-container fluid>
            <v-row>
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="red"
                  label="red"
                  value="red"
                  hide-details
                  inset
                />
                <v-switch
                  v-model="ex11"
                  color="red-darken-3"
                  label="red-darken-3"
                  value="red-darken-3"
                  hide-details
                  inset
                />
              </v-col>
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="indigo"
                  label="indigo"
                  value="indigo"
                  hide-details
                  inset
                />
                <v-switch
                  v-model="ex11"
                  color="indigo-darken-3"
                  label="indigo-darken-3"
                  value="indigo-darken-3"
                  hide-details
                  inset
                />
              </v-col>
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="orange"
                  label="orange"
                  value="orange"
                  hide-details
                  inset
                />
                <v-switch
                  v-model="ex11"
                  color="orange-darken-3"
                  label="orange-darken-3"
                  value="orange-darken-3"
                  hide-details
                  inset
                />
              </v-col>
            </v-row>

            <v-row class="mt-12">
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="primary"
                  label="primary"
                  value="primary"
                  hide-details
                  inset
                />
                <v-switch
                  v-model="ex11"
                  color="secondary"
                  label="secondary"
                  value="secondary"
                  hide-details
                  inset
                />
              </v-col>
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="success"
                  label="success"
                  value="success"
                  hide-details
                  inset
                />
                <v-switch
                  v-model="ex11"
                  color="info"
                  label="info"
                  value="info"
                  hide-details
                  inset
                />
              </v-col>
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="warning"
                  label="warning"
                  value="warning"
                  hide-details
                  inset
                />
                <v-switch
                  v-model="ex11"
                  color="error"
                  label="error"
                  value="error"
                  hide-details
                  inset
                />
              </v-col>
            </v-row>
          </v-container>
          <v-container fluid>
            <v-row>
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="model"
                  color="red"
                  label="red"
                  value="red"
                  hide-details
                  flat
                />
                <v-switch
                  v-model="ex11"
                  color="red-darken-3"
                  label="red-darken-3"
                  value="red-darken-3"
                  hide-details
                  flat
                />
              </v-col>
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="indigo"
                  label="indigo"
                  value="indigo"
                  hide-details
                  flat
                />
                <v-switch
                  v-model="ex11"
                  color="indigo-darken-3"
                  label="indigo-darken-3"
                  value="indigo-darken-3"
                  hide-details
                  flat
                />
              </v-col>
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="orange"
                  label="orange"
                  value="orange"
                  hide-details
                  flat
                />
                <v-switch
                  v-model="ex11"
                  color="orange-darken-3"
                  label="orange-darken-3"
                  value="orange-darken-3"
                  hide-details
                  flat
                />
              </v-col>
            </v-row>

            <v-row class="mt-12">
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="primary"
                  label="primary"
                  value="primary"
                  hide-details
                  flat
                />
                <v-switch
                  v-model="ex11"
                  color="secondary"
                  label="secondary"
                  value="secondary"
                  hide-details
                  flat
                />
              </v-col>
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="success"
                  label="success"
                  value="success"
                  hide-details
                  flat
                />
                <v-switch
                  v-model="ex11"
                  color="info"
                  label="info"
                  value="info"
                  hide-details
                  flat
                />
              </v-col>
              <v-col cols="12" md="4" sm="4">
                <v-switch
                  v-model="ex11"
                  color="warning"
                  label="warning"
                  value="warning"
                  hide-details
                  flat
                />
                <v-switch
                  v-model="ex11"
                  color="error"
                  label="error"
                  value="error"
                  hide-details
                  flat
                />
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
      </v-card>

      <br />
      <v-divider />

      <h1>DefaultsProvider VSwitchBtn - Colors</h1>

      <v-card flat>
        <v-defaults-provider :defaults="{ VSwitchBtn: { density: 'compact' } }">
          <v-card-text>
            <v-container fluid>
              <v-row>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="red"
                    label="red"
                    value="red"
                    hide-details
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="red-darken-3"
                    label="red-darken-3"
                    value="red-darken-3"
                    hide-details
                  />
                </v-col>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="indigo"
                    label="indigo"
                    value="indigo"
                    hide-details
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="indigo-darken-3"
                    label="indigo-darken-3"
                    value="indigo-darken-3"
                    hide-details
                  />
                </v-col>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="orange"
                    label="orange"
                    value="orange"
                    hide-details
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="orange-darken-3"
                    label="orange-darken-3"
                    value="orange-darken-3"
                    hide-details
                  />
                </v-col>
              </v-row>

              <v-row>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="primary"
                    label="primary"
                    value="primary"
                    hide-details
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="secondary"
                    label="secondary"
                    value="secondary"
                    hide-details
                  />
                </v-col>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="success"
                    label="success"
                    value="success"
                    hide-details
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="info"
                    label="info"
                    value="info"
                    hide-details
                  />
                </v-col>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="warning"
                    label="warning"
                    value="warning"
                    hide-details
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="error"
                    label="error"
                    value="error"
                    hide-details
                  />
                </v-col>
              </v-row>
            </v-container>
            <v-container fluid>
              <v-row>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="red"
                    label="red"
                    value="red"
                    hide-details
                    inset
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="red-darken-3"
                    label="red-darken-3"
                    value="red-darken-3"
                    hide-details
                    inset
                  />
                </v-col>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="indigo"
                    label="indigo"
                    value="indigo"
                    hide-details
                    inset
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="indigo-darken-3"
                    label="indigo-darken-3"
                    value="indigo-darken-3"
                    hide-details
                    inset
                  />
                </v-col>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="orange"
                    label="orange"
                    value="orange"
                    hide-details
                    inset
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="orange-darken-3"
                    label="orange-darken-3"
                    value="orange-darken-3"
                    hide-details
                    inset
                  />
                </v-col>
              </v-row>

              <v-row class="mt-12">
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="primary"
                    label="primary"
                    value="primary"
                    hide-details
                    inset
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="secondary"
                    label="secondary"
                    value="secondary"
                    hide-details
                    inset
                  />
                </v-col>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="success"
                    label="success"
                    value="success"
                    hide-details
                    inset
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="info"
                    label="info"
                    value="info"
                    hide-details
                    inset
                  />
                </v-col>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="warning"
                    label="warning"
                    value="warning"
                    hide-details
                    inset
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="error"
                    label="error"
                    value="error"
                    hide-details
                    inset
                  />
                </v-col>
              </v-row>
            </v-container>
            <v-container fluid>
              <v-row>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="model"
                    color="red"
                    label="red"
                    value="red"
                    hide-details
                    flat
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="red-darken-3"
                    label="red-darken-3"
                    value="red-darken-3"
                    hide-details
                    flat
                  />
                </v-col>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="indigo"
                    label="indigo"
                    value="indigo"
                    hide-details
                    flat
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="indigo-darken-3"
                    label="indigo-darken-3"
                    value="indigo-darken-3"
                    hide-details
                    flat
                  />
                </v-col>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="orange"
                    label="orange"
                    value="orange"
                    hide-details
                    flat
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="orange-darken-3"
                    label="orange-darken-3"
                    value="orange-darken-3"
                    hide-details
                    flat
                  />
                </v-col>
              </v-row>

              <v-row class="mt-12">
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="primary"
                    label="primary"
                    value="primary"
                    hide-details
                    flat
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="secondary"
                    label="secondary"
                    value="secondary"
                    hide-details
                    flat
                  />
                </v-col>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="success"
                    label="success"
                    value="success"
                    hide-details
                    flat
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="info"
                    label="info"
                    value="info"
                    hide-details
                    flat
                  />
                </v-col>
                <v-col cols="12" md="4" sm="4">
                  <v-switch-btn
                    v-model="ex11"
                    color="warning"
                    label="warning"
                    value="warning"
                    hide-details
                    flat
                  />
                  <v-switch-btn
                    v-model="ex11"
                    color="error"
                    label="error"
                    value="error"
                    hide-details
                    flat
                  />
                </v-col>
              </v-row>
            </v-container>
          </v-card-text>
        </v-defaults-provider>
      </v-card>

      <br />
      <v-divider />

      <h1>VSwitch - States</h1>

      <v-container fluid>
        <v-row>
          <v-col cols="6">
            <v-switch :model-value="true" color="primary" label="on" />
          </v-col>
          <v-col cols="6">
            <v-switch :model-value="false" color="primary" label="off" />
          </v-col>
        </v-row>

        <v-row>
          <v-col cols="6">
            <v-switch
              :model-value="true"
              color="primary"
              label="on disabled"
              disabled
            />
          </v-col>
          <v-col cols="6">
            <v-switch
              :model-value="false"
              color="primary"
              label="off disabled"
              disabled
            />
          </v-col>
        </v-row>

        <v-row>
          <v-col cols="6">
            <v-switch
              :model-value="true"
              label="on loading"
              loading="warning"
            />
          </v-col>
          <v-col cols="6">
            <v-switch
              :model-value="false"
              label="off loading"
              loading="warning"
            />
          </v-col>
        </v-row>
      </v-container>

      <br />
      <v-divider />

      <h1>VSwitch - Slots</h1>

      <v-switch v-model="switchMe">
        <template v-slot:label>
          Turn on the progress:
          <v-progress-circular
            :indeterminate="switchMe"
            class="ms-2"
            size="24"
          ></v-progress-circular>
        </template>
      </v-switch>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    setup() {
      return {}
    },
    data() {
      return {
        yesno: 'yes',
        model: true,
        indeterminateModel: false,
        ex11: [
          'red',
          'indigo',
          'orange',
          'primary',
          'secondary',
          'success',
          'info',
          'warning',
          'error',
          'red-darken-3',
          'indigo-darken-3',
          'orange-darken-3',
        ],
        switchMe: false,
      }
    },
  }
</script>

@De-Hann
feat(VSwitch, VSwitchBtn, VSwitchTrack)
3323702 
Split VSwitch component into three smaller components
@De-Hann De-Hann requested a review from johnleider April 2, 2024 14:20
@johnleider johnleider added T: feature A new feature C: New Component This issue would need a new component to be developed. labels Apr 2, 2024
johnleider
johnleider requested changes Apr 11, 2024
View reviewed changes
.gitignore Outdated
@@ -23,3 +23,6 @@ cypress/videos

.vercel
.now

# ignore yarn build files
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this needed for the PR?

packages/vuetify/src/components/VSwitch/VSwitchTrack.tsx Outdated
import type { GenericProps } from '@/util'

export type VSwitchTrackSlot = {
model: Ref<boolean>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My intent for switch track was to clean-up the component. I don't think that it needs to have model support itself.

packages/vuetify/src/components/VSwitch/index.ts Outdated
@@ -1 +1,3 @@
export { VSwitch } from './VSwitch'
export { VSwitchBtn } from './VSwitchBtn'
export { VSwitchTrack } from './VSwitchTrack'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't need to be public

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@johnleider johnleider johnleider requested changes

Requested changes must be addressed to merge this pull request.

Assignees

@De-Hann De-Hann

Labels
C: New Component This issue would need a new component to be developed. T: feature A new feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@De-Hann @johnleider