Skip to content

Commit

Permalink
chore: complete formatChange event
Browse files Browse the repository at this point in the history
  • Loading branch information
@baiwusanyu-c
baiwusanyu-c committed Mar 15, 2024
1 parent 5d91c5d commit ed8a5db
Show file tree
Hide file tree
Showing 5 changed files with 184 additions and 182 deletions.
351 changes: 174 additions & 177 deletions components/ColorPicker/src/format.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,198 +1,195 @@
<script lang="ts">
import type {KColorPickerFormatProps} from './types';
import type { KColorPickerFormatProps } from './types';
import { getPrefixCls } from '@ikun-ui/utils';
import { KDropdown, KDropdownItem } from "@ikun-ui/dropdown";
import { KIcon } from "@ikun-ui/icon";
import { clsx } from 'clsx';
import tinycolor from 'tinycolor2';
import {createEventDispatcher} from "svelte";
import { KInput } from "@ikun-ui/input";
import {KInputNumber} from "@ikun-ui/input-number";
import {isString} from "baiwusanyu-utils";
import { KDropdown, KDropdownItem } from '@ikun-ui/dropdown';
import { KIcon } from '@ikun-ui/icon';
import { clsx } from 'clsx';
import tinycolor from 'tinycolor2';
import { createEventDispatcher } from 'svelte';
import { KInput } from '@ikun-ui/input';
import { KInputNumber } from '@ikun-ui/input-number';
import { isString } from 'baiwusanyu-utils';
export let format: KColorPickerFormatProps['format'] = 'rgb';
export let disabledAlpha: KColorPickerFormatProps['disabledAlpha'] = false;
export let disabledAlpha: KColorPickerFormatProps['disabledAlpha'] = false;
export let value: KColorPickerFormatProps['value'] = '';
export let cls: KColorPickerFormatProps['cls'] = '';
export let attrs: KColorPickerFormatProps['attrs'] = {};
let hRValue = 0
let sGValue = 0
let vBValue = 0
let hRMaxValue = 255
let sGMaxValue = 255
let vBMaxValue = 255
let alphaValue = 0
let valueHex = ''
function init(
formatValue:KColorPickerFormatProps['format'],
value:KColorPickerFormatProps['value']){
if(formatValue === 'rgb'){
const rgbValue = tinycolor(value).toRgb()
hRMaxValue = 255
sGMaxValue = 255
vBMaxValue = 255
hRValue = rgbValue.r
sGValue = rgbValue.g
vBValue = rgbValue.b
alphaValue = rgbValue.a * 100
}
let hRValue = 0;
let sGValue = 0;
let vBValue = 0;
let hRMaxValue = 255;
let sGMaxValue = 255;
let vBMaxValue = 255;
let alphaValue = 0;
let valueHex = '';
function init(
formatValue: KColorPickerFormatProps['format'],
value: KColorPickerFormatProps['value']
) {
if (formatValue === 'rgb') {
const rgbValue = tinycolor(value).toRgb();
hRMaxValue = 255;
sGMaxValue = 255;
vBMaxValue = 255;
hRValue = rgbValue.r;
sGValue = rgbValue.g;
vBValue = rgbValue.b;
alphaValue = rgbValue.a * 100;
}
if(formatValue === 'hsv'){
const rgbValue = tinycolor(value).toHsv()
hRMaxValue = 360
sGMaxValue = 100
vBMaxValue = 100
hRValue = rgbValue.h
sGValue = rgbValue.s * 100
vBValue = rgbValue.v * 100
alphaValue = rgbValue.a * 100
}
if (formatValue === 'hsv') {
const rgbValue = tinycolor(value).toHsv();
hRMaxValue = 360;
sGMaxValue = 100;
vBMaxValue = 100;
hRValue = rgbValue.h;
sGValue = rgbValue.s * 100;
vBValue = rgbValue.v * 100;
alphaValue = rgbValue.a * 100;
}
if(formatValue === 'hex'){
const rgbValue = tinycolor(value).toRgb()
if(!isString(value) || (isString(value) && rgbValue.a !== 1)){
alphaValue = rgbValue.a * 100
valueHex = tinycolor({...rgbValue, a: 1}).toHex().replace('#', '')
} else {
valueHex = (value as string).replace('#', '')
}
}
}
$:{
init(formatValue, value)
}
if (formatValue === 'hex') {
const rgbValue = tinycolor(value).toRgb();
if (!isString(value) || (isString(value) && rgbValue.a !== 1)) {
alphaValue = rgbValue.a * 100;
valueHex = tinycolor({ ...rgbValue, a: 1 })
.toHex()
.replace('#', '')
.toLocaleUpperCase();
} else {
valueHex = (value as string).replace('#', '').toLocaleUpperCase();
}
}
}
$: {
init(formatValue, value);
}
$: formatValue = format
$: curFormat = formatValue!.toLocaleUpperCase()
function onSelectFormat(e: CustomEvent){
formatValue = e.detail
}
$: formatValue = format;
$: curFormat = formatValue!.toLocaleUpperCase();
function onSelectFormat(e: CustomEvent) {
formatValue = e.detail;
dispatch('formatChange', formatValue);
}
const dispatch = createEventDispatcher();
function handleInput(
e: CustomEvent,
type: 'hr' | 'sg' | 'vb' | 'a' | 'hex'
){
const dispatch = createEventDispatcher();
function handleInput(e: CustomEvent, type: 'hr' | 'sg' | 'vb' | 'a' | 'hex') {
if (type === 'hr') {
hRValue = e.detail;
}
if (type === 'sg') {
sGValue = e.detail;
}
if (type === 'vb') {
vBValue = e.detail;
}
if (type === 'a') {
alphaValue = e.detail;
}
const alpha = alphaValue / 100;
if (formatValue === 'rgb') {
dispatch('change', {
value: {
r: hRValue,
g: sGValue,
b: vBValue,
a: alpha
},
format: formatValue
});
}
if(type === 'hr'){
hRValue = e.detail
}
if(type === 'sg'){
sGValue = e.detail
}
if(type === 'vb'){
vBValue = e.detail
}
if(type === 'a'){
alphaValue = e.detail
}
const alpha = alphaValue / 100
if(formatValue === 'rgb' ){
dispatch('change', {
value: {
r: hRValue,
g: sGValue,
b: vBValue,
a: alpha
},
format: formatValue
})
}
if (formatValue === 'hsv') {
dispatch('change', {
value: {
h: hRValue,
s: sGValue,
v: vBValue,
a: alpha
},
format: formatValue
});
}
if(formatValue === 'hsv'){
dispatch('change', {
value: {
h: hRValue,
s: sGValue,
v: vBValue,
a: alpha
},
format: formatValue
})
}
if(formatValue === 'hex'){
const hsv = tinycolor(`#${valueHex}`).toRgb()
hsv.a = alpha
dispatch('change', {
value: tinycolor(hsv).toHex(),
format: formatValue
})
}
}
if (formatValue === 'hex') {
const hsv = tinycolor(`#${valueHex}`).toRgb();
hsv.a = alpha;
dispatch('change', {
value: tinycolor(hsv).toHex(),
format: formatValue
});
}
}
const prefixCls = getPrefixCls('color-picker-format');
const valueCls = `${prefixCls}--val`
const inputNumCls = `${prefixCls}--input-num`
const inputCls = `${prefixCls}--input`
const valueCls = `${prefixCls}--val`;
const inputNumCls = `${prefixCls}--input-num`;
const inputCls = `${prefixCls}--input`;
$: cnames = clsx(prefixCls, cls);
</script>

<div class={cnames} {...$$restProps} {...attrs}>
<KDropdown on:command={onSelectFormat}
trigger="click">
<div class={valueCls}>
{curFormat}
<KIcon icon="i-carbon-chevron-down"
width="auto"
height="auto"
cls="text-ikun-bd-base">
</KIcon>
</div>
<div slot="dropdown">
<KDropdownItem command="rgb">RGB</KDropdownItem>
<KDropdownItem command="hex">HEX</KDropdownItem>
<KDropdownItem command="hsv">HSV</KDropdownItem>
</div>
</KDropdown>
{#if formatValue !== 'hex'}
<KInputNumber value={hRValue}
min={1}
step={1}
stepStrictly
max={hRMaxValue}
on:input={(e)=> handleInput(e, 'hr')}
cls={inputNumCls}
size="sm">
</KInputNumber>
<KInputNumber value={sGValue}
min={1}
step={1}
max={sGMaxValue}
stepStrictly
on:input={(e)=> handleInput(e, 'sg')}
cls={inputNumCls}
size="sm">
</KInputNumber>
<KDropdown on:command={onSelectFormat} trigger="click">
<div class={valueCls}>
{curFormat}
<KIcon icon="i-carbon-chevron-down" width="auto" height="auto" cls="text-ikun-bd-base"
></KIcon>
</div>
<div slot="dropdown">
<KDropdownItem command="rgb">RGB</KDropdownItem>
<KDropdownItem command="hex">HEX</KDropdownItem>
<KDropdownItem command="hsv">HSV</KDropdownItem>
</div>
</KDropdown>
{#if formatValue !== 'hex'}
<KInputNumber
value={hRValue}
min={1}
step={1}
stepStrictly
max={hRMaxValue}
on:input={(e) => handleInput(e, 'hr')}
cls={inputNumCls}
size="sm"
></KInputNumber>
<KInputNumber
value={sGValue}
min={1}
step={1}
max={sGMaxValue}
stepStrictly
on:input={(e) => handleInput(e, 'sg')}
cls={inputNumCls}
size="sm"
></KInputNumber>

<KInputNumber value={vBValue}
min={1}
step={1}
max={vBMaxValue}
stepStrictly
on:input={(e)=> handleInput(e, 'vb')}
cls={inputNumCls}
size="sm">
</KInputNumber>
{/if}
{#if formatValue === 'hex'}
<KInput value={valueHex}
cls={inputCls}
on:input={(e)=> handleInput(e, 'hex')}
size="sm">
<span slot="prefix">#</span>
</KInput>
{/if}
{#if !disabledAlpha}
<KInputNumber value={alphaValue}
min={1}
max={100}
step={1}
stepStrictly
on:input={(e)=> handleInput(e, 'a')}
cls={inputNumCls}
size="sm">
</KInputNumber>
{/if}
<KInputNumber
value={vBValue}
min={1}
step={1}
max={vBMaxValue}
stepStrictly
on:input={(e) => handleInput(e, 'vb')}
cls={inputNumCls}
size="sm"
></KInputNumber>
{/if}
{#if formatValue === 'hex'}
<KInput value={valueHex} cls={inputCls} on:input={(e) => handleInput(e, 'hex')} size="sm">
<span slot="prefix">#</span>
</KInput>
{/if}
{#if !disabledAlpha}
<KInputNumber
value={alphaValue}
min={1}
max={100}
step={1}
stepStrictly
on:input={(e) => handleInput(e, 'a')}
cls={inputNumCls}
size="sm"
></KInputNumber>
{/if}
</div>
5 changes: 5 additions & 0 deletions components/ColorPicker/src/index.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,10 @@
paletteRef.setPickerPos(paletteColor);
}
dispatch('change', formatColor(formatValue, blockColor));
}
function handleFormatChange(e: CustomEvent) {
formatValue = e.detail;
dispatch('formatChange', formatValue);
}
Expand Down Expand Up @@ -199,6 +203,7 @@
value={formatterColor}
{disabledAlpha}
on:change={handleFormatInput}
on:formatChange={handleFormatChange}
format={formatValue}
></KColorPickerFormat>
</div>
Expand Down
Loading

0 comments on commit ed8a5db

Please sign in to comment.