78aca7e5c0
* feat: base content card component * fix: tooltips + colors * feat: fix orgs * feat: add ContentModpackCard * fix: extract types * feat: selection v-model * add show icon in selected for combobox with stories * feat: add project combobox * clean up project combobox * feat: start install to play modal * fix: events * feat: figma alignments * feat: migrate toggle to tailwind * fix: row borders * feat: disabled state * feat: virtual list impl for card table based on window scroll * fix: lint * feat: virtualization + smaller contentcard items * feat: fix gap + border issues on last elm * fix: use TeleportOverflowMenu * fix: hasUpdate type * fix: fallback to svg if src is invalid on avatar component * fix: storybook * feat: start on updater modal * feat: finish content updater modal * feat: i18n pass * remove install to play modal from ui package * pnpm prepr * feat: reusable table component * feat: add column width prop for table and fix stories * feat: add table overflow menu story example * feat: add surface-1.5 and use in table * chore: export table in index * fix: allow more loose typing on columns * feat: update table component to derive key from column instead of data * feat: surface 1.5 for oled + refactor story for contentcardtable + yeet sorting funcs * fix: lint * feat: add no padding story for new modal --------- Signed-off-by: Calum H. <contact@cal.engineer> Co-authored-by: tdgao <mr.trumgao@gmail.com>
45 lines
992 B
Vue
45 lines
992 B
Vue
<template>
|
|
<button
|
|
:id="id"
|
|
type="button"
|
|
role="switch"
|
|
:aria-checked="modelValue"
|
|
:disabled="disabled"
|
|
class="relative inline-flex shrink-0 rounded-full m-0 transition-all duration-200 cursor-pointer border-none"
|
|
:class="[
|
|
small ? 'h-5 !w-[38px]' : 'h-8 !w-[52px]',
|
|
modelValue ? 'bg-brand' : 'bg-button-bg',
|
|
disabled ? 'opacity-50 cursor-not-allowed' : 'btn-wrapper',
|
|
]"
|
|
@click="toggle"
|
|
>
|
|
<span
|
|
class="absolute rounded-full transition-all duration-200"
|
|
:class="[
|
|
small ? 'w-4 h-4 top-0.5 left-0.5' : 'w-[18px] h-[18px] top-[7px] left-[7px]',
|
|
modelValue
|
|
? small
|
|
? 'translate-x-[18px] bg-black/90'
|
|
: 'translate-x-5 bg-black/90'
|
|
: 'bg-gray',
|
|
]"
|
|
/>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
id?: string
|
|
disabled?: boolean
|
|
small?: boolean
|
|
}>()
|
|
|
|
const modelValue = defineModel<boolean>()
|
|
|
|
function toggle() {
|
|
if (!props.disabled) {
|
|
modelValue.value = !modelValue.value
|
|
}
|
|
}
|
|
</script>
|