inline-style-editor 1.4.0 → 1.4.2

package/index.d.ts

@@ -24,6 +24,7 @@ export interface SliderDefinition {
     getter: (el: HTMLElement) => number | null;
     setter: (el: SVGElement, val: number) => void;
 }
+
 export interface InlineStyleEditorOptions {
     onStyleChanged?: (
         target: HTMLElement,
@@ -34,5 +35,6 @@ export interface InlineStyleEditorOptions {
     getElems: (el: HTMLElement) => void;
     customProps: Record<string, ColorDefinition | SelectDefinition | SliderDefinition>;
     cssRuleFilter: (el: HTMLElement, cssSelector: string) => boolean;
+    getCssRuleName: (ruleName: string, el: HTMLElement) => string;
     inlineDeletable: (el: HTMLElement) => boolean,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inline-style-editor",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Update CSS rules or add inline style to elements visualy",
   "scripts": {
     "build": "rollup --config",
@@ -21,31 +21,32 @@
   "typings": "index.d.ts",
   "files": [
     "dist/",
+    "src/",
     "index.d.ts",
     "README.md"
   ],
-  "svelte": "src/index.js",
+  "svelte": "src/components/InlineStyleEditor.svelte",
   "module": "dist/inline-style-editor.mjs",
   "main": "dist/inline-style-editor.js",
-  "style": "dist/inline-style-editor.css",
+  "style": "inline-style-editor.css",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "rollup": "^4.41.1",
     "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-filesize": "^9.1.2",
-    "rollup-plugin-import-css": "^3.0.3",
+    "rollup-plugin-filesize": "^10.0.0",
+    "rollup-plugin-import-css": "^4.0.1",
     "rollup-plugin-sass": "^1.2.13",
-    "rollup-plugin-scss": "^3.0.0",
+    "rollup-plugin-scss": "^4.0.1",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^5.8.0",
+    "rollup-plugin-visualizer": "^6.0.1",
     "sass": "^1.54.4"
   },
   "dependencies": {
     "d3-contour": "^4.0.0",
     "parse-svg-path": "^0.1.2",
-    "svelte": "^3.49.0",
+    "svelte": "^5.33.10",
     "vanilla-picker": "^2.12.1"
   }
 }

package/src/assets/index.scss

@@ -0,0 +1,2 @@
+@use 'vanilla-picker/dist/vanilla-picker.csp';
+@use './style.scss';

package/src/assets/style.scss

@@ -0,0 +1,175 @@
+.ise {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    font-size: 14px;
+    z-index: 9999999;
+    position: absolute;
+    background-color: #edf2f7;
+    max-width: 300px;
+    border-radius: 5px;
+    box-shadow: 0px 8px 17px 2px #0000007c;
+
+    select {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        font-size: inherit;
+        font-family: inherit;
+        padding: 0.5rem;
+        color: #212121;
+        background: white;
+        border: 1px solid #d8dae1;
+        border-radius: 5px;
+        box-shadow: none;
+        max-width: 100%;
+        display: inline-block;
+    }
+
+    select:not([multiple]) {
+        background-image: linear-gradient(45deg, transparent 49%, #212121 51%),
+            linear-gradient(135deg, #212121 51%, transparent 49%);
+        background-position: calc(100% - 15px), calc(100% - 10px);
+        background-size: 5px 5px, 5px 5px;
+        background-repeat: no-repeat;
+        padding: 5px 25px 5px 5px;
+    }
+
+    input[type="range"] {
+        width: 100%;
+        margin: auto;
+    }
+
+    .prop-name {
+        display: flex;
+        align-items: center;
+
+        &>span {
+            margin-left: 4px;
+        }
+    }
+
+    .delete {
+        cursor: pointer;
+        font-size: 20px;
+        margin: 0 4px;
+        margin-bottom: 2px;
+    }
+
+    .select-tab {
+        display: flex;
+        align-items: center;
+        background-color: #edf2f7;
+        padding: 5px 0 5px 0;
+        margin: 0 10px 0 10px;
+        border-bottom: 1px solid #dee2e6;
+    }
+
+    .select-tab>span {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        min-width: 50px;
+        padding: 3px;
+        text-align: center;
+        color: #718096;
+        cursor: pointer;
+    }
+
+    .select-tab>b {
+        margin-right: 5px;
+        color: #5d5d5d;
+    }
+
+    .select-tab span.selected {
+        border-radius: 2px;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
+        color: #0069d9;
+        background-color: white;
+    }
+
+    .editor {
+        padding: 5px;
+    }
+
+    .editor .prop-section {
+        display: flex;
+        align-items: center;
+        margin: 5px 0;
+        align-items: baseline;
+    }
+
+    .editor .prop-section>span {
+        margin: 0 5px;
+    }
+
+    .editor .prop-section :first-child {
+        color: #5d5d5d;
+        font-weight: bold;
+    }
+
+    .editor .btn {
+        &.active {
+            background-color: #4d84bf;
+        }
+
+        &.delete-elem {
+            background-color: #d13737;
+        }
+
+        margin: 0 5px;
+        background-color: #3333330d;
+        border-radius: 4px;
+        border: 1px solid #d8dae1;
+        color: #333333;
+        cursor: pointer;
+        display: inline-block;
+        padding: 5px;
+    }
+
+    .close-button {
+        position: absolute;
+        top: -7px;
+        right: -7px;
+        background-color: #dbdbdb;
+        color: #818181;
+        width: 15px;
+        height: 15px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        border-radius: 3px;
+    }
+
+    .layout_default.picker_wrapper {
+        background: none;
+        box-shadow: none;
+        width: 100%;
+
+        .picker_done {
+            display: none;
+        }
+
+        .picker_slider,
+        .picker_selector {
+            padding: 0.5em;
+        }
+
+        .picker_editor input {
+            font-size: 0.7rem;
+        }
+    }
+}
+
+.ise-helper-wrapper {
+    z-index: 9999998;
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+
+    .overlay-over {
+        fill: #000000A0;
+        clip-path: url(#overlay-clip);
+        pointer-events: painted;
+    }
+}

package/src/components/ColorPicker.svelte

@@ -0,0 +1,56 @@
+<script>
+    import Picker from "vanilla-picker/csp";
+    import { onMount, onDestroy } from "svelte";
+
+    // Props
+    let { value = $bindable("#AAAAAAFF"), options = {}, onChange = () => {} } = $props();
+
+    // State
+    let self = $state();
+    let pickerElem = $state();
+
+    // Effect to update picker when value changes
+    $effect(() => {
+        if (pickerElem) {
+            pickerElem.setColor(value);
+        }
+    });
+
+    export function setColor(rgbaString) {
+        pickerElem.setColor(rgbaString);
+    }
+
+    function setValue(val) {
+        if (val === value) return;
+        onChange(val, value);
+        value = val;
+    }
+
+    function _onChange(color) {
+        setValue(color.hex);
+    }
+
+    onMount(() => {
+        init(options);
+    });
+
+    onDestroy(() => {
+        pickerElem?.destroy();
+    });
+
+    function init(opts) {
+        if (!self) return;
+        if (pickerElem) pickerElem.destroy();
+        opts.onChange = _onChange;
+        pickerElem = new Picker({
+            parent: self,
+            color: value,
+            popup: false,
+            ...opts,
+        });
+        pickerElem.show();
+        pickerElem.openHandler();
+    }
+</script>
+
+<div class="picker" bind:this={self}></div>