Size: a a a

2020 November 01

f

fivem in Svelte [svelt]
@PaulMaly как бы вы навесили экшен тут на 22 строке https://youtu.be/I5DIcbcXzfE?t=8908 который прикрутил датапикер будь это кастомный инпут который просто обертка над нативным ?
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
Pavel 🦇 Malyshev
{#if href}
   <a
       {...$$restProps}
       {href}
       class="btn btn-{variant} btn-{size}"
       class:btn-block={block}
       class:btn-action={!!shape}
       class:circle={shape === 'circle'}
       class:loading
       class:active
       on:click
       on:dblclick
   >
       <slot name="iconRight" />
       <slot>Text</slot>
       <slot name="iconLeft" />
   </a>
{:else}
   <button
       {...$$restProps}
       class="btn btn-{variant} btn-{size}"
       class:btn-block={block}
       class:btn-action={!!shape}
       class:circle={shape === 'circle'}
       class:loading
       class:active
       on:click
       on:dblclick
   >
       <slot name="iconRight" />
       <slot>Text</slot>
       <slot name="iconLeft" />
   </button>
{/if}

<script lang="ts" context="module">
   import type { Size } from '@/types/size';
   type Variant = 'default' | 'primary' | 'link' | 'success' | 'error';
   type Shape = 'square' | 'circle' | false;
   export type { Size, Variant, Shape };
</script>

<script lang="ts">
   export let variant: Variant = 'default';
   export let size: Size = 'md';
   export let shape: Shape = false;
   export let active: boolean = false;
   export let loading: boolean = false;
   export let block: boolean = false;
   export let href: string = '';
</script>

<style lang="scss">
   @import 'spectre.css/src/variables';
   @import 'spectre.css/src/mixins';
   @import 'spectre.css/src/buttons';
   .circle {
       border-radius: 50%;
   }
   .btn.btn-xl {
       @extend .btn.btn-lg;
       height: $unit-12;
   }
   .btn.btn-action.btn-xl {
       width: $unit-12;
   }
   .btn.btn-xs {
       @extend .btn.btn-sm;
       height: $unit-5;
   }
   .btn.btn-action.btn-xs {
       width: $unit-5;
   }
</style>
в идеале я бы переписал этот компонент так и этого было бы достаточно:

<svelte:element 
 {...$$restProps}
 tag={href ? 'a' : 'button'}
 {href}
 class="btn btn-{variant} btn-{size}"
 class:btn-block={block}
 class:btn-action={!!shape}
 class:circle={shape === 'circle'}
 class:loading
 class:active
 on:*
>
 <slot name="iconRight" />
 <slot>Text</slot>
 <slot name="iconLeft" />
</svelte:element>

<script lang="ts" context="module">
   import type { Size } from '@/types/size';

   type Variant = 'default' | 'primary' | 'link' | 'success' | 'error';
   type Shape = 'square' | 'circle' | false;

   export type { Size, Variant, Shape };
</script>

<script lang="ts">
   export let variant: Variant = 'default';
   export let size: Size = 'md';
   export let shape: Shape = false;
   export let active: boolean = false;
   export let loading: boolean = false;
   export let block: boolean = false;
   export let href: string = '';
</script>

<style lang="scss">
   @import 'spectre.css/src/variables';
   @import 'spectre.css/src/mixins';
   @import 'spectre.css/src/buttons';
   .circle {
       border-radius: 50%;
   }
   .btn.btn-xl {
       @extend .btn.btn-lg;
       height: $unit-12;
   }
   .btn.btn-action.btn-xl {
       width: $unit-12;
   }
   .btn.btn-xs {
       @extend .btn.btn-sm;
       height: $unit-5;
   }
   .btn.btn-action.btn-xs {
       width: $unit-5;
   }
</style>
источник

IF

Igor Filippov in Svelte [svelt]
https://www.joom.com/ru Вот этот интернет магазин на реакте например. Даже если минуснуть фейсбук пиксель и гтм, все равно очень много выходит по размеру. А там да реакт
источник

AP

Alexander Ponomarev in Svelte [svelt]
Pavel 🦇 Malyshev
в идеале я бы переписал этот компонент так и этого было бы достаточно:

<svelte:element 
 {...$$restProps}
 tag={href ? 'a' : 'button'}
 {href}
 class="btn btn-{variant} btn-{size}"
 class:btn-block={block}
 class:btn-action={!!shape}
 class:circle={shape === 'circle'}
 class:loading
 class:active
 on:*
>
 <slot name="iconRight" />
 <slot>Text</slot>
 <slot name="iconLeft" />
</svelte:element>

<script lang="ts" context="module">
   import type { Size } from '@/types/size';

   type Variant = 'default' | 'primary' | 'link' | 'success' | 'error';
   type Shape = 'square' | 'circle' | false;

   export type { Size, Variant, Shape };
</script>

<script lang="ts">
   export let variant: Variant = 'default';
   export let size: Size = 'md';
   export let shape: Shape = false;
   export let active: boolean = false;
   export let loading: boolean = false;
   export let block: boolean = false;
   export let href: string = '';
</script>

<style lang="scss">
   @import 'spectre.css/src/variables';
   @import 'spectre.css/src/mixins';
   @import 'spectre.css/src/buttons';
   .circle {
       border-radius: 50%;
   }
   .btn.btn-xl {
       @extend .btn.btn-lg;
       height: $unit-12;
   }
   .btn.btn-action.btn-xl {
       width: $unit-12;
   }
   .btn.btn-xs {
       @extend .btn.btn-sm;
       height: $unit-5;
   }
   .btn.btn-action.btn-xs {
       width: $unit-5;
   }
</style>
интересно как бы ты его типизировал
источник

AP

Alexander Ponomarev in Svelte [svelt]
у баттона нет href
источник

К

Константин in Svelte [svelt]
Alexander Ponomarev
ну это же основная фишка свелта, меньше килобайт
с такими компонентами, какие приходится писать, чтобы обеспечить им базовый функционал, я чёт сильно сомневаюсь
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
Alexander Ponomarev
у баттона нет href
так если он undefined свелт его не повесит
источник

К

Константин in Svelte [svelt]
И ещё огромная просьба, уже в 3й раз спрашиваю. Может, есть у кого наработки анимацией при переходе между формами?
источник

К

Константин in Svelte [svelt]
у меня формы в текущем варианте это svelte:component, у которого динамически меняется this
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
Константин
И ещё огромная просьба, уже в 3й раз спрашиваю. Может, есть у кого наработки анимацией при переходе между формами?
чем транзишеты не работают?
источник

К

Константин in Svelte [svelt]
а куда их вешать?
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
так внутри компонента дивак с транзишеном
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
либо, пиши компонент-обертку с {#key }
источник

IF

Igor Filippov in Svelte [svelt]
Константин
а килобайтами модно мериться, да? )
Благодаря этому, я смог внедрядть свелт на работе постепенно
источник

К

Константин in Svelte [svelt]
у меня компонент Wizard, который из стора достаёт ссылку на текущий компонент и пропсы для него
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
<Transition key={component} in={}>
  <svelte:component this={component} />
</Transition>
источник

К

Константин in Svelte [svelt]
Pavel 🦇 Malyshev
<Transition key={component} in={}>
  <svelte:component this={component} />
</Transition>
а как сделать, скажем, чтобы как в андройде, типа перелистывания?
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
Константин
а как сделать, скажем, чтобы как в андройде, типа перелистывания?
наверное свой транзишн написать
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
пишутся они просто
источник

К

Константин in Svelte [svelt]
и, кстати, Паш, как считаешь, в визарде шаги лучше через слоты делать или как я - через текущий svelte:component?
источник