You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
9.5 KiB
1 lines
9.5 KiB
{"ast":null,"code":"import { defineComponent, getCurrentInstance, ref, computed, watch, onMounted, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode } from 'vue';\nimport { draggable } from '../utils/draggable.mjs';\nimport _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';\nimport { useNamespace } from '../../../../hooks/use-namespace/index.mjs';\nimport { getClientXY } from '../../../../utils/dom/position.mjs';\nconst _sfc_main = defineComponent({\n name: \"ElSlPanel\",\n props: {\n color: {\n type: Object,\n required: true\n }\n },\n setup(props) {\n const ns = useNamespace(\"color-svpanel\");\n const instance = getCurrentInstance();\n const cursorTop = ref(0);\n const cursorLeft = ref(0);\n const background = ref(\"hsl(0, 100%, 50%)\");\n const colorValue = computed(() => {\n const hue = props.color.get(\"hue\");\n const value = props.color.get(\"value\");\n return {\n hue,\n value\n };\n });\n function update() {\n const saturation = props.color.get(\"saturation\");\n const value = props.color.get(\"value\");\n const el = instance.vnode.el;\n const {\n clientWidth: width,\n clientHeight: height\n } = el;\n cursorLeft.value = saturation * width / 100;\n cursorTop.value = (100 - value) * height / 100;\n background.value = `hsl(${props.color.get(\"hue\")}, 100%, 50%)`;\n }\n function handleDrag(event) {\n const el = instance.vnode.el;\n const rect = el.getBoundingClientRect();\n const {\n clientX,\n clientY\n } = getClientXY(event);\n let left = clientX - rect.left;\n let top = clientY - rect.top;\n left = Math.max(0, left);\n left = Math.min(left, rect.width);\n top = Math.max(0, top);\n top = Math.min(top, rect.height);\n cursorLeft.value = left;\n cursorTop.value = top;\n props.color.set({\n saturation: left / rect.width * 100,\n value: 100 - top / rect.height * 100\n });\n }\n watch(() => colorValue.value, () => {\n update();\n });\n onMounted(() => {\n draggable(instance.vnode.el, {\n drag: event => {\n handleDrag(event);\n },\n end: event => {\n handleDrag(event);\n }\n });\n update();\n });\n return {\n cursorTop,\n cursorLeft,\n background,\n colorValue,\n handleDrag,\n update,\n ns\n };\n }\n});\nfunction _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {\n return openBlock(), createElementBlock(\"div\", {\n class: normalizeClass(_ctx.ns.b()),\n style: normalizeStyle({\n backgroundColor: _ctx.background\n })\n }, [createElementVNode(\"div\", {\n class: normalizeClass(_ctx.ns.e(\"white\"))\n }, null, 2), createElementVNode(\"div\", {\n class: normalizeClass(_ctx.ns.e(\"black\"))\n }, null, 2), createElementVNode(\"div\", {\n class: normalizeClass(_ctx.ns.e(\"cursor\")),\n style: normalizeStyle({\n top: _ctx.cursorTop + \"px\",\n left: _ctx.cursorLeft + \"px\"\n })\n }, [createElementVNode(\"div\")], 6)], 6);\n}\nvar SvPanel = /* @__PURE__ */_export_sfc(_sfc_main, [[\"render\", _sfc_render], [\"__file\", \"sv-panel.vue\"]]);\nexport { SvPanel as default };","map":{"version":3,"names":["_sfc_main","defineComponent","name","props","color","type","Object","required","setup","ns","useNamespace","instance","getCurrentInstance","cursorTop","ref","cursorLeft","background","colorValue","computed","hue","get","value","update","saturation","el","vnode","clientWidth","width","clientHeight","height","handleDrag","event","rect","getBoundingClientRect","clientX","clientY","getClientXY","left","top","Math","max","min","set","watch","onMounted","draggable","drag","end","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","openBlock","createElementBlock","backgroundColor","createElementVNode","class","normalizeClass","e","style","normalizeStyle","SvPanel","_export_sfc"],"sources":["../../../../../../../packages/components/color-picker/src/components/sv-panel.vue"],"sourcesContent":["<template>\n <div\n :class=\"ns.b()\"\n :style=\"{\n backgroundColor: background,\n }\"\n >\n <div :class=\"ns.e('white')\" />\n <div :class=\"ns.e('black')\" />\n <div\n :class=\"ns.e('cursor')\"\n :style=\"{\n top: cursorTop + 'px',\n left: cursorLeft + 'px',\n }\"\n >\n <div />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n onMounted,\n ref,\n watch,\n} from 'vue'\nimport { getClientXY } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { draggable } from '../utils/draggable'\n\nimport type { PropType } from 'vue'\nimport type Color from '../utils/color'\n\nexport default defineComponent({\n name: 'ElSlPanel',\n\n props: {\n color: {\n type: Object as PropType<Color>,\n required: true,\n },\n },\n\n setup(props) {\n const ns = useNamespace('color-svpanel')\n\n // instance\n const instance = getCurrentInstance()!\n\n // data\n const cursorTop = ref(0)\n const cursorLeft = ref(0)\n const background = ref('hsl(0, 100%, 50%)')\n const colorValue = computed(() => {\n const hue = props.color.get('hue')\n const value = props.color.get('value')\n return { hue, value }\n })\n\n // methods\n function update() {\n const saturation = props.color.get('saturation')\n const value = props.color.get('value')\n\n const el = instance.vnode.el!\n const { clientWidth: width, clientHeight: height } = el\n\n cursorLeft.value = (saturation * width) / 100\n cursorTop.value = ((100 - value) * height) / 100\n\n background.value = `hsl(${props.color.get('hue')}, 100%, 50%)`\n }\n\n function handleDrag(event: MouseEvent | TouchEvent) {\n const el = instance.vnode.el!\n const rect = el.getBoundingClientRect()\n const { clientX, clientY } = getClientXY(event)\n\n let left = clientX - rect.left\n let top = clientY - rect.top\n left = Math.max(0, left)\n left = Math.min(left, rect.width)\n\n top = Math.max(0, top)\n top = Math.min(top, rect.height)\n\n cursorLeft.value = left\n cursorTop.value = top\n props.color.set({\n saturation: (left / rect.width) * 100,\n value: 100 - (top / rect.height) * 100,\n })\n }\n\n // watch\n watch(\n () => colorValue.value,\n () => {\n update()\n }\n )\n // mounted\n onMounted(() => {\n draggable(instance.vnode.el as HTMLElement, {\n drag: (event) => {\n handleDrag(event)\n },\n end: (event) => {\n handleDrag(event)\n },\n })\n\n update()\n })\n return {\n cursorTop,\n cursorLeft,\n background,\n colorValue,\n handleDrag,\n update,\n ns,\n }\n },\n})\n</script>\n"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|