@sk-web-gui/core 4.3.3 → 4.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10,6 +10,7 @@ Object.defineProperty(exports, "TextEditor", {
|
|
|
10
10
|
});
|
|
11
11
|
const TextEditor = ()=>({
|
|
12
12
|
'.sk-texteditor': {
|
|
13
|
+
'@apply relative': {},
|
|
13
14
|
'.ql-toolbar.ql-snow': {
|
|
14
15
|
'@apply flex items-center bg-background-200 rounded-t-xl border-input-field-outline h-[4rem] pl-4': {},
|
|
15
16
|
'.ql-stroke': {
|
|
@@ -100,6 +101,37 @@ const TextEditor = ()=>({
|
|
|
100
101
|
'@apply bg-input-field-surface-disabled border-input-field-outline-disabled': {}
|
|
101
102
|
}
|
|
102
103
|
},
|
|
104
|
+
// Scale controls
|
|
105
|
+
'.sk-texteditor-scale': {
|
|
106
|
+
'@apply absolute right-2 top-0 h-[4rem] flex items-center gap-2 z-10': {}
|
|
107
|
+
},
|
|
108
|
+
'.sk-texteditor-scale-button': {
|
|
109
|
+
'@apply h-[3.2rem] w-[3.2rem] rounded-10 text-dark-primary flex items-center justify-center': {},
|
|
110
|
+
'&:hover': {
|
|
111
|
+
'@apply bg-tertiary-surface-hover': {}
|
|
112
|
+
},
|
|
113
|
+
'&:focus-visible': {
|
|
114
|
+
'@apply ring-[.2rem] ring-ring ring-offset-0 outline-0 bg-background-content': {}
|
|
115
|
+
},
|
|
116
|
+
'&:disabled': {
|
|
117
|
+
'@apply text-dark-disabled cursor-default': {},
|
|
118
|
+
'&:hover': {
|
|
119
|
+
'@apply bg-transparent': {}
|
|
120
|
+
},
|
|
121
|
+
'&:hover .tooltip-container': {
|
|
122
|
+
'@apply hidden opacity-0': {}
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
'.tooltip-container': {
|
|
126
|
+
'@apply absolute z-10 top-full mt-0 left-1/2 -translate-x-1/2 invisible opacity-0 transition-opacity duration-200 ease-in-out whitespace-nowrap': {}
|
|
127
|
+
},
|
|
128
|
+
'&:hover .tooltip-container': {
|
|
129
|
+
'@apply visible opacity-100': {}
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
'.sk-texteditor-scale-label': {
|
|
133
|
+
'@apply text-label-small font-thin text-dark-secondary select-none min-w-[3.6rem] text-center': {}
|
|
134
|
+
},
|
|
103
135
|
// Tooltip-text
|
|
104
136
|
'.ql-tooltip.ql-editing': {
|
|
105
137
|
input: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/text-editor.ts"],"sourcesContent":["export const TextEditor = () => ({\r\n '.sk-texteditor': {\r\n '.ql-toolbar.ql-snow': {\r\n '@apply flex items-center bg-background-200 rounded-t-xl border-input-field-outline h-[4rem] pl-4': {},\r\n '.ql-stroke': {\r\n '@apply stroke-dark-primary': {},\r\n },\r\n '.ql-fill': {\r\n '@apply fill-dark-primary': {},\r\n },\r\n '.ql-divider': {\r\n '@apply w-[0.1rem] h-[3.2rem] bg-divider mr-[1.2rem]': {},\r\n },\r\n '.tooltip-container': {\r\n '@apply absolute z-10 top-full mt-0 left-1/2 -translate-x-1/2 invisible opacity-0 transition-opacity duration-200 ease-in-out whitespace-nowrap':\r\n {},\r\n },\r\n '.ql-formats': {\r\n '@apply flex gap-4 mr-[1.2rem]': {},\r\n },\r\n\r\n svg: {\r\n '@apply h-[2.0rem] w-[2.0rem]': {},\r\n },\r\n\r\n button: {\r\n '@apply h-[3.2rem] w-[3.2rem] rounded-10 text-dark-primary': {},\r\n '&:hover, &:hover:focus-visible': {\r\n '@apply bg-tertiary-surface-hover': {},\r\n },\r\n '&:focus-visible': {\r\n '@apply ring-[.2rem] ring-ring ring-offset-0 outline-0 bg-background-content': {},\r\n },\r\n\r\n '&.ql-active': {\r\n '@apply bg-tertiary-surface-hover': {},\r\n '.ql-fill': {\r\n '@apply fill-dark-primary': {},\r\n },\r\n '.ql-stroke': {\r\n '@apply stroke-dark-primary': {},\r\n },\r\n },\r\n '&:hover .ql-fill, &:focus-visible .ql-fill': {\r\n '@apply fill-dark-primary': {},\r\n },\r\n '&:hover .ql-stroke, &:focus-visible .ql-stroke': {\r\n '@apply stroke-dark-primary': {},\r\n },\r\n '&:hover .tooltip-container, &:focus-visible .tooltip-container': {\r\n '@apply visible opacity-100': {},\r\n },\r\n },\r\n\r\n '&.ql-disabled': {\r\n '@apply border-input-field-outline-disabled': {},\r\n '.ql-fill': {\r\n '@apply fill-dark-disabled': {},\r\n },\r\n '.ql-stroke': {\r\n '@apply stroke-dark-disabled': {},\r\n },\r\n button: {\r\n '@apply bg-background-200 text-dark-disabled cursor-default': {},\r\n '&.ql-active': {\r\n '@apply bg-background-200 text-dark-disabled': {},\r\n },\r\n '&:hover': {\r\n '@apply bg-background-200 text-dark-disabled': {},\r\n },\r\n '&:hover .ql-fill': {\r\n '@apply fill-dark-disabled': {},\r\n },\r\n '&:hover .ql-stroke': {\r\n '@apply stroke-dark-disabled': {},\r\n },\r\n '&:hover .tooltip-container': {\r\n '@apply hidden opacity-0': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n '.ql-container.ql-snow': {\r\n '@apply border-input-field-outline rounded-b-xl': {},\r\n ':focus-visible': {\r\n '@apply ring-[.2rem] ring-ring ring-offset-0 outline-0 rounded-b-xl': {},\r\n },\r\n '&.disable-toolbar': {\r\n '@apply rounded-t-xl': {},\r\n ':focus-visible': {\r\n '@apply rounded-t-xl': {},\r\n },\r\n },\r\n '&.ql-disabled': {\r\n '@apply bg-input-field-surface-disabled border-input-field-outline-disabled': {},\r\n },\r\n },\r\n\r\n // Tooltip-text\r\n '.ql-tooltip.ql-editing': {\r\n input: {\r\n '@apply rounded-0': {},\r\n '&:focus-visible': {\r\n '@apply rounded-0': {},\r\n },\r\n },\r\n },\r\n '.ql-snow .ql-tooltip.ql-editing a.ql-action::after': {\r\n content: '\"Spara\"',\r\n },\r\n '.ql-snow .ql-tooltip[data-mode=link]::before': {\r\n content: '\"Ange länk:\"',\r\n },\r\n '.ql-snow .ql-tooltip::before': {\r\n content: '\"Besök URL:\"',\r\n },\r\n '.ql-snow .ql-tooltip a.ql-action::after': {\r\n content: '\"Ändra\"',\r\n },\r\n '.ql-snow .ql-tooltip a.ql-remove::before': {\r\n content: '\"Ta bort\"',\r\n },\r\n },\r\n});\r\n"],"names":["TextEditor","svg","button","input","content"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,aAAa,IAAO,CAAA;QAC/B,kBAAkB;YAChB,uBAAuB;gBACrB,oGAAoG,CAAC;gBACrG,cAAc;oBACZ,8BAA8B,CAAC;gBACjC;gBACA,YAAY;oBACV,4BAA4B,CAAC;gBAC/B;gBACA,eAAe;oBACb,uDAAuD,CAAC;gBAC1D;gBACA,sBAAsB;oBACpB,kJACE,CAAC;gBACL;gBACA,eAAe;oBACb,iCAAiC,CAAC;gBACpC;gBAEAC,KAAK;oBACH,gCAAgC,CAAC;gBACnC;gBAEAC,QAAQ;oBACN,6DAA6D,CAAC;oBAC9D,kCAAkC;wBAChC,oCAAoC,CAAC;oBACvC;oBACA,mBAAmB;wBACjB,+EAA+E,CAAC;oBAClF;oBAEA,eAAe;wBACb,oCAAoC,CAAC;wBACrC,YAAY;4BACV,4BAA4B,CAAC;wBAC/B;wBACA,cAAc;4BACZ,8BAA8B,CAAC;wBACjC;oBACF;oBACA,8CAA8C;wBAC5C,4BAA4B,CAAC;oBAC/B;oBACA,kDAAkD;wBAChD,8BAA8B,CAAC;oBACjC;oBACA,kEAAkE;wBAChE,8BAA8B,CAAC;oBACjC;gBACF;gBAEA,iBAAiB;oBACf,8CAA8C,CAAC;oBAC/C,YAAY;wBACV,6BAA6B,CAAC;oBAChC;oBACA,cAAc;wBACZ,+BAA+B,CAAC;oBAClC;oBACAA,QAAQ;wBACN,8DAA8D,CAAC;wBAC/D,eAAe;4BACb,+CAA+C,CAAC;wBAClD;wBACA,WAAW;4BACT,+CAA+C,CAAC;wBAClD;wBACA,oBAAoB;4BAClB,6BAA6B,CAAC;wBAChC;wBACA,sBAAsB;4BACpB,+BAA+B,CAAC;wBAClC;wBACA,8BAA8B;4BAC5B,2BAA2B,CAAC;wBAC9B;oBACF;gBACF;YACF;YAEA,yBAAyB;gBACvB,kDAAkD,CAAC;gBACnD,kBAAkB;oBAChB,sEAAsE,CAAC;gBACzE;gBACA,qBAAqB;oBACnB,uBAAuB,CAAC;oBACxB,kBAAkB;wBAChB,uBAAuB,CAAC;oBAC1B;gBACF;gBACA,iBAAiB;oBACf,8EAA8E,CAAC;gBACjF;YACF;YAEA,eAAe;YACf,0BAA0B;gBACxBC,OAAO;oBACL,oBAAoB,CAAC;oBACrB,mBAAmB;wBACjB,oBAAoB,CAAC;oBACvB;gBACF;YACF;YACA,sDAAsD;gBACpDC,SAAS;YACX;YACA,gDAAgD;gBAC9CA,SAAS;YACX;YACA,gCAAgC;gBAC9BA,SAAS;YACX;YACA,2CAA2C;gBACzCA,SAAS;YACX;YACA,4CAA4C;gBAC1CA,SAAS;YACX;QACF;IACF,CAAA"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/text-editor.ts"],"sourcesContent":["export const TextEditor = () => ({\r\n '.sk-texteditor': {\r\n '@apply relative': {},\r\n '.ql-toolbar.ql-snow': {\r\n '@apply flex items-center bg-background-200 rounded-t-xl border-input-field-outline h-[4rem] pl-4': {},\r\n '.ql-stroke': {\r\n '@apply stroke-dark-primary': {},\r\n },\r\n '.ql-fill': {\r\n '@apply fill-dark-primary': {},\r\n },\r\n '.ql-divider': {\r\n '@apply w-[0.1rem] h-[3.2rem] bg-divider mr-[1.2rem]': {},\r\n },\r\n '.tooltip-container': {\r\n '@apply absolute z-10 top-full mt-0 left-1/2 -translate-x-1/2 invisible opacity-0 transition-opacity duration-200 ease-in-out whitespace-nowrap':\r\n {},\r\n },\r\n '.ql-formats': {\r\n '@apply flex gap-4 mr-[1.2rem]': {},\r\n },\r\n\r\n svg: {\r\n '@apply h-[2.0rem] w-[2.0rem]': {},\r\n },\r\n\r\n button: {\r\n '@apply h-[3.2rem] w-[3.2rem] rounded-10 text-dark-primary': {},\r\n '&:hover, &:hover:focus-visible': {\r\n '@apply bg-tertiary-surface-hover': {},\r\n },\r\n '&:focus-visible': {\r\n '@apply ring-[.2rem] ring-ring ring-offset-0 outline-0 bg-background-content': {},\r\n },\r\n\r\n '&.ql-active': {\r\n '@apply bg-tertiary-surface-hover': {},\r\n '.ql-fill': {\r\n '@apply fill-dark-primary': {},\r\n },\r\n '.ql-stroke': {\r\n '@apply stroke-dark-primary': {},\r\n },\r\n },\r\n '&:hover .ql-fill, &:focus-visible .ql-fill': {\r\n '@apply fill-dark-primary': {},\r\n },\r\n '&:hover .ql-stroke, &:focus-visible .ql-stroke': {\r\n '@apply stroke-dark-primary': {},\r\n },\r\n '&:hover .tooltip-container, &:focus-visible .tooltip-container': {\r\n '@apply visible opacity-100': {},\r\n },\r\n },\r\n\r\n '&.ql-disabled': {\r\n '@apply border-input-field-outline-disabled': {},\r\n '.ql-fill': {\r\n '@apply fill-dark-disabled': {},\r\n },\r\n '.ql-stroke': {\r\n '@apply stroke-dark-disabled': {},\r\n },\r\n button: {\r\n '@apply bg-background-200 text-dark-disabled cursor-default': {},\r\n '&.ql-active': {\r\n '@apply bg-background-200 text-dark-disabled': {},\r\n },\r\n '&:hover': {\r\n '@apply bg-background-200 text-dark-disabled': {},\r\n },\r\n '&:hover .ql-fill': {\r\n '@apply fill-dark-disabled': {},\r\n },\r\n '&:hover .ql-stroke': {\r\n '@apply stroke-dark-disabled': {},\r\n },\r\n '&:hover .tooltip-container': {\r\n '@apply hidden opacity-0': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n '.ql-container.ql-snow': {\r\n '@apply border-input-field-outline rounded-b-xl': {},\r\n ':focus-visible': {\r\n '@apply ring-[.2rem] ring-ring ring-offset-0 outline-0 rounded-b-xl': {},\r\n },\r\n '&.disable-toolbar': {\r\n '@apply rounded-t-xl': {},\r\n ':focus-visible': {\r\n '@apply rounded-t-xl': {},\r\n },\r\n },\r\n '&.ql-disabled': {\r\n '@apply bg-input-field-surface-disabled border-input-field-outline-disabled': {},\r\n },\r\n },\r\n\r\n // Scale controls\r\n '.sk-texteditor-scale': {\r\n '@apply absolute right-2 top-0 h-[4rem] flex items-center gap-2 z-10': {},\r\n },\r\n '.sk-texteditor-scale-button': {\r\n '@apply h-[3.2rem] w-[3.2rem] rounded-10 text-dark-primary flex items-center justify-center': {},\r\n '&:hover': {\r\n '@apply bg-tertiary-surface-hover': {},\r\n },\r\n '&:focus-visible': {\r\n '@apply ring-[.2rem] ring-ring ring-offset-0 outline-0 bg-background-content': {},\r\n },\r\n '&:disabled': {\r\n '@apply text-dark-disabled cursor-default': {},\r\n '&:hover': {\r\n '@apply bg-transparent': {},\r\n },\r\n '&:hover .tooltip-container': {\r\n '@apply hidden opacity-0': {},\r\n },\r\n },\r\n '.tooltip-container': {\r\n '@apply absolute z-10 top-full mt-0 left-1/2 -translate-x-1/2 invisible opacity-0 transition-opacity duration-200 ease-in-out whitespace-nowrap':\r\n {},\r\n },\r\n '&:hover .tooltip-container': {\r\n '@apply visible opacity-100': {},\r\n },\r\n },\r\n '.sk-texteditor-scale-label': {\r\n '@apply text-label-small font-thin text-dark-secondary select-none min-w-[3.6rem] text-center': {},\r\n },\r\n\r\n // Tooltip-text\r\n '.ql-tooltip.ql-editing': {\r\n input: {\r\n '@apply rounded-0': {},\r\n '&:focus-visible': {\r\n '@apply rounded-0': {},\r\n },\r\n },\r\n },\r\n '.ql-snow .ql-tooltip.ql-editing a.ql-action::after': {\r\n content: '\"Spara\"',\r\n },\r\n '.ql-snow .ql-tooltip[data-mode=link]::before': {\r\n content: '\"Ange länk:\"',\r\n },\r\n '.ql-snow .ql-tooltip::before': {\r\n content: '\"Besök URL:\"',\r\n },\r\n '.ql-snow .ql-tooltip a.ql-action::after': {\r\n content: '\"Ändra\"',\r\n },\r\n '.ql-snow .ql-tooltip a.ql-remove::before': {\r\n content: '\"Ta bort\"',\r\n },\r\n },\r\n});\r\n"],"names":["TextEditor","svg","button","input","content"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,aAAa,IAAO,CAAA;QAC/B,kBAAkB;YAChB,mBAAmB,CAAC;YACpB,uBAAuB;gBACrB,oGAAoG,CAAC;gBACrG,cAAc;oBACZ,8BAA8B,CAAC;gBACjC;gBACA,YAAY;oBACV,4BAA4B,CAAC;gBAC/B;gBACA,eAAe;oBACb,uDAAuD,CAAC;gBAC1D;gBACA,sBAAsB;oBACpB,kJACE,CAAC;gBACL;gBACA,eAAe;oBACb,iCAAiC,CAAC;gBACpC;gBAEAC,KAAK;oBACH,gCAAgC,CAAC;gBACnC;gBAEAC,QAAQ;oBACN,6DAA6D,CAAC;oBAC9D,kCAAkC;wBAChC,oCAAoC,CAAC;oBACvC;oBACA,mBAAmB;wBACjB,+EAA+E,CAAC;oBAClF;oBAEA,eAAe;wBACb,oCAAoC,CAAC;wBACrC,YAAY;4BACV,4BAA4B,CAAC;wBAC/B;wBACA,cAAc;4BACZ,8BAA8B,CAAC;wBACjC;oBACF;oBACA,8CAA8C;wBAC5C,4BAA4B,CAAC;oBAC/B;oBACA,kDAAkD;wBAChD,8BAA8B,CAAC;oBACjC;oBACA,kEAAkE;wBAChE,8BAA8B,CAAC;oBACjC;gBACF;gBAEA,iBAAiB;oBACf,8CAA8C,CAAC;oBAC/C,YAAY;wBACV,6BAA6B,CAAC;oBAChC;oBACA,cAAc;wBACZ,+BAA+B,CAAC;oBAClC;oBACAA,QAAQ;wBACN,8DAA8D,CAAC;wBAC/D,eAAe;4BACb,+CAA+C,CAAC;wBAClD;wBACA,WAAW;4BACT,+CAA+C,CAAC;wBAClD;wBACA,oBAAoB;4BAClB,6BAA6B,CAAC;wBAChC;wBACA,sBAAsB;4BACpB,+BAA+B,CAAC;wBAClC;wBACA,8BAA8B;4BAC5B,2BAA2B,CAAC;wBAC9B;oBACF;gBACF;YACF;YAEA,yBAAyB;gBACvB,kDAAkD,CAAC;gBACnD,kBAAkB;oBAChB,sEAAsE,CAAC;gBACzE;gBACA,qBAAqB;oBACnB,uBAAuB,CAAC;oBACxB,kBAAkB;wBAChB,uBAAuB,CAAC;oBAC1B;gBACF;gBACA,iBAAiB;oBACf,8EAA8E,CAAC;gBACjF;YACF;YAEA,iBAAiB;YACjB,wBAAwB;gBACtB,uEAAuE,CAAC;YAC1E;YACA,+BAA+B;gBAC7B,8FAA8F,CAAC;gBAC/F,WAAW;oBACT,oCAAoC,CAAC;gBACvC;gBACA,mBAAmB;oBACjB,+EAA+E,CAAC;gBAClF;gBACA,cAAc;oBACZ,4CAA4C,CAAC;oBAC7C,WAAW;wBACT,yBAAyB,CAAC;oBAC5B;oBACA,8BAA8B;wBAC5B,2BAA2B,CAAC;oBAC9B;gBACF;gBACA,sBAAsB;oBACpB,kJACE,CAAC;gBACL;gBACA,8BAA8B;oBAC5B,8BAA8B,CAAC;gBACjC;YACF;YACA,8BAA8B;gBAC5B,gGAAgG,CAAC;YACnG;YAEA,eAAe;YACf,0BAA0B;gBACxBC,OAAO;oBACL,oBAAoB,CAAC;oBACrB,mBAAmB;wBACjB,oBAAoB,CAAC;oBACvB;gBACF;YACF;YACA,sDAAsD;gBACpDC,SAAS;YACX;YACA,gDAAgD;gBAC9CA,SAAS;YACX;YACA,gCAAgC;gBAC9BA,SAAS;YACX;YACA,2CAA2C;gBACzCA,SAAS;YACX;YACA,4CAA4C;gBAC1CA,SAAS;YACX;QACF;IACF,CAAA"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export const TextEditor = ()=>({
|
|
2
2
|
'.sk-texteditor': {
|
|
3
|
+
'@apply relative': {},
|
|
3
4
|
'.ql-toolbar.ql-snow': {
|
|
4
5
|
'@apply flex items-center bg-background-200 rounded-t-xl border-input-field-outline h-[4rem] pl-4': {},
|
|
5
6
|
'.ql-stroke': {
|
|
@@ -90,6 +91,37 @@ export const TextEditor = ()=>({
|
|
|
90
91
|
'@apply bg-input-field-surface-disabled border-input-field-outline-disabled': {}
|
|
91
92
|
}
|
|
92
93
|
},
|
|
94
|
+
// Scale controls
|
|
95
|
+
'.sk-texteditor-scale': {
|
|
96
|
+
'@apply absolute right-2 top-0 h-[4rem] flex items-center gap-2 z-10': {}
|
|
97
|
+
},
|
|
98
|
+
'.sk-texteditor-scale-button': {
|
|
99
|
+
'@apply h-[3.2rem] w-[3.2rem] rounded-10 text-dark-primary flex items-center justify-center': {},
|
|
100
|
+
'&:hover': {
|
|
101
|
+
'@apply bg-tertiary-surface-hover': {}
|
|
102
|
+
},
|
|
103
|
+
'&:focus-visible': {
|
|
104
|
+
'@apply ring-[.2rem] ring-ring ring-offset-0 outline-0 bg-background-content': {}
|
|
105
|
+
},
|
|
106
|
+
'&:disabled': {
|
|
107
|
+
'@apply text-dark-disabled cursor-default': {},
|
|
108
|
+
'&:hover': {
|
|
109
|
+
'@apply bg-transparent': {}
|
|
110
|
+
},
|
|
111
|
+
'&:hover .tooltip-container': {
|
|
112
|
+
'@apply hidden opacity-0': {}
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
'.tooltip-container': {
|
|
116
|
+
'@apply absolute z-10 top-full mt-0 left-1/2 -translate-x-1/2 invisible opacity-0 transition-opacity duration-200 ease-in-out whitespace-nowrap': {}
|
|
117
|
+
},
|
|
118
|
+
'&:hover .tooltip-container': {
|
|
119
|
+
'@apply visible opacity-100': {}
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
'.sk-texteditor-scale-label': {
|
|
123
|
+
'@apply text-label-small font-thin text-dark-secondary select-none min-w-[3.6rem] text-center': {}
|
|
124
|
+
},
|
|
93
125
|
// Tooltip-text
|
|
94
126
|
'.ql-tooltip.ql-editing': {
|
|
95
127
|
input: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/text-editor.ts"],"sourcesContent":["export const TextEditor = () => ({\r\n '.sk-texteditor': {\r\n '.ql-toolbar.ql-snow': {\r\n '@apply flex items-center bg-background-200 rounded-t-xl border-input-field-outline h-[4rem] pl-4': {},\r\n '.ql-stroke': {\r\n '@apply stroke-dark-primary': {},\r\n },\r\n '.ql-fill': {\r\n '@apply fill-dark-primary': {},\r\n },\r\n '.ql-divider': {\r\n '@apply w-[0.1rem] h-[3.2rem] bg-divider mr-[1.2rem]': {},\r\n },\r\n '.tooltip-container': {\r\n '@apply absolute z-10 top-full mt-0 left-1/2 -translate-x-1/2 invisible opacity-0 transition-opacity duration-200 ease-in-out whitespace-nowrap':\r\n {},\r\n },\r\n '.ql-formats': {\r\n '@apply flex gap-4 mr-[1.2rem]': {},\r\n },\r\n\r\n svg: {\r\n '@apply h-[2.0rem] w-[2.0rem]': {},\r\n },\r\n\r\n button: {\r\n '@apply h-[3.2rem] w-[3.2rem] rounded-10 text-dark-primary': {},\r\n '&:hover, &:hover:focus-visible': {\r\n '@apply bg-tertiary-surface-hover': {},\r\n },\r\n '&:focus-visible': {\r\n '@apply ring-[.2rem] ring-ring ring-offset-0 outline-0 bg-background-content': {},\r\n },\r\n\r\n '&.ql-active': {\r\n '@apply bg-tertiary-surface-hover': {},\r\n '.ql-fill': {\r\n '@apply fill-dark-primary': {},\r\n },\r\n '.ql-stroke': {\r\n '@apply stroke-dark-primary': {},\r\n },\r\n },\r\n '&:hover .ql-fill, &:focus-visible .ql-fill': {\r\n '@apply fill-dark-primary': {},\r\n },\r\n '&:hover .ql-stroke, &:focus-visible .ql-stroke': {\r\n '@apply stroke-dark-primary': {},\r\n },\r\n '&:hover .tooltip-container, &:focus-visible .tooltip-container': {\r\n '@apply visible opacity-100': {},\r\n },\r\n },\r\n\r\n '&.ql-disabled': {\r\n '@apply border-input-field-outline-disabled': {},\r\n '.ql-fill': {\r\n '@apply fill-dark-disabled': {},\r\n },\r\n '.ql-stroke': {\r\n '@apply stroke-dark-disabled': {},\r\n },\r\n button: {\r\n '@apply bg-background-200 text-dark-disabled cursor-default': {},\r\n '&.ql-active': {\r\n '@apply bg-background-200 text-dark-disabled': {},\r\n },\r\n '&:hover': {\r\n '@apply bg-background-200 text-dark-disabled': {},\r\n },\r\n '&:hover .ql-fill': {\r\n '@apply fill-dark-disabled': {},\r\n },\r\n '&:hover .ql-stroke': {\r\n '@apply stroke-dark-disabled': {},\r\n },\r\n '&:hover .tooltip-container': {\r\n '@apply hidden opacity-0': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n '.ql-container.ql-snow': {\r\n '@apply border-input-field-outline rounded-b-xl': {},\r\n ':focus-visible': {\r\n '@apply ring-[.2rem] ring-ring ring-offset-0 outline-0 rounded-b-xl': {},\r\n },\r\n '&.disable-toolbar': {\r\n '@apply rounded-t-xl': {},\r\n ':focus-visible': {\r\n '@apply rounded-t-xl': {},\r\n },\r\n },\r\n '&.ql-disabled': {\r\n '@apply bg-input-field-surface-disabled border-input-field-outline-disabled': {},\r\n },\r\n },\r\n\r\n // Tooltip-text\r\n '.ql-tooltip.ql-editing': {\r\n input: {\r\n '@apply rounded-0': {},\r\n '&:focus-visible': {\r\n '@apply rounded-0': {},\r\n },\r\n },\r\n },\r\n '.ql-snow .ql-tooltip.ql-editing a.ql-action::after': {\r\n content: '\"Spara\"',\r\n },\r\n '.ql-snow .ql-tooltip[data-mode=link]::before': {\r\n content: '\"Ange länk:\"',\r\n },\r\n '.ql-snow .ql-tooltip::before': {\r\n content: '\"Besök URL:\"',\r\n },\r\n '.ql-snow .ql-tooltip a.ql-action::after': {\r\n content: '\"Ändra\"',\r\n },\r\n '.ql-snow .ql-tooltip a.ql-remove::before': {\r\n content: '\"Ta bort\"',\r\n },\r\n },\r\n});\r\n"],"names":["TextEditor","svg","button","input","content"],"mappings":"AAAA,OAAO,MAAMA,aAAa,IAAO,CAAA;QAC/B,kBAAkB;YAChB,uBAAuB;gBACrB,oGAAoG,CAAC;gBACrG,cAAc;oBACZ,8BAA8B,CAAC;gBACjC;gBACA,YAAY;oBACV,4BAA4B,CAAC;gBAC/B;gBACA,eAAe;oBACb,uDAAuD,CAAC;gBAC1D;gBACA,sBAAsB;oBACpB,kJACE,CAAC;gBACL;gBACA,eAAe;oBACb,iCAAiC,CAAC;gBACpC;gBAEAC,KAAK;oBACH,gCAAgC,CAAC;gBACnC;gBAEAC,QAAQ;oBACN,6DAA6D,CAAC;oBAC9D,kCAAkC;wBAChC,oCAAoC,CAAC;oBACvC;oBACA,mBAAmB;wBACjB,+EAA+E,CAAC;oBAClF;oBAEA,eAAe;wBACb,oCAAoC,CAAC;wBACrC,YAAY;4BACV,4BAA4B,CAAC;wBAC/B;wBACA,cAAc;4BACZ,8BAA8B,CAAC;wBACjC;oBACF;oBACA,8CAA8C;wBAC5C,4BAA4B,CAAC;oBAC/B;oBACA,kDAAkD;wBAChD,8BAA8B,CAAC;oBACjC;oBACA,kEAAkE;wBAChE,8BAA8B,CAAC;oBACjC;gBACF;gBAEA,iBAAiB;oBACf,8CAA8C,CAAC;oBAC/C,YAAY;wBACV,6BAA6B,CAAC;oBAChC;oBACA,cAAc;wBACZ,+BAA+B,CAAC;oBAClC;oBACAA,QAAQ;wBACN,8DAA8D,CAAC;wBAC/D,eAAe;4BACb,+CAA+C,CAAC;wBAClD;wBACA,WAAW;4BACT,+CAA+C,CAAC;wBAClD;wBACA,oBAAoB;4BAClB,6BAA6B,CAAC;wBAChC;wBACA,sBAAsB;4BACpB,+BAA+B,CAAC;wBAClC;wBACA,8BAA8B;4BAC5B,2BAA2B,CAAC;wBAC9B;oBACF;gBACF;YACF;YAEA,yBAAyB;gBACvB,kDAAkD,CAAC;gBACnD,kBAAkB;oBAChB,sEAAsE,CAAC;gBACzE;gBACA,qBAAqB;oBACnB,uBAAuB,CAAC;oBACxB,kBAAkB;wBAChB,uBAAuB,CAAC;oBAC1B;gBACF;gBACA,iBAAiB;oBACf,8EAA8E,CAAC;gBACjF;YACF;YAEA,eAAe;YACf,0BAA0B;gBACxBC,OAAO;oBACL,oBAAoB,CAAC;oBACrB,mBAAmB;wBACjB,oBAAoB,CAAC;oBACvB;gBACF;YACF;YACA,sDAAsD;gBACpDC,SAAS;YACX;YACA,gDAAgD;gBAC9CA,SAAS;YACX;YACA,gCAAgC;gBAC9BA,SAAS;YACX;YACA,2CAA2C;gBACzCA,SAAS;YACX;YACA,4CAA4C;gBAC1CA,SAAS;YACX;QACF;IACF,CAAA,EAAG"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/text-editor.ts"],"sourcesContent":["export const TextEditor = () => ({\r\n '.sk-texteditor': {\r\n '@apply relative': {},\r\n '.ql-toolbar.ql-snow': {\r\n '@apply flex items-center bg-background-200 rounded-t-xl border-input-field-outline h-[4rem] pl-4': {},\r\n '.ql-stroke': {\r\n '@apply stroke-dark-primary': {},\r\n },\r\n '.ql-fill': {\r\n '@apply fill-dark-primary': {},\r\n },\r\n '.ql-divider': {\r\n '@apply w-[0.1rem] h-[3.2rem] bg-divider mr-[1.2rem]': {},\r\n },\r\n '.tooltip-container': {\r\n '@apply absolute z-10 top-full mt-0 left-1/2 -translate-x-1/2 invisible opacity-0 transition-opacity duration-200 ease-in-out whitespace-nowrap':\r\n {},\r\n },\r\n '.ql-formats': {\r\n '@apply flex gap-4 mr-[1.2rem]': {},\r\n },\r\n\r\n svg: {\r\n '@apply h-[2.0rem] w-[2.0rem]': {},\r\n },\r\n\r\n button: {\r\n '@apply h-[3.2rem] w-[3.2rem] rounded-10 text-dark-primary': {},\r\n '&:hover, &:hover:focus-visible': {\r\n '@apply bg-tertiary-surface-hover': {},\r\n },\r\n '&:focus-visible': {\r\n '@apply ring-[.2rem] ring-ring ring-offset-0 outline-0 bg-background-content': {},\r\n },\r\n\r\n '&.ql-active': {\r\n '@apply bg-tertiary-surface-hover': {},\r\n '.ql-fill': {\r\n '@apply fill-dark-primary': {},\r\n },\r\n '.ql-stroke': {\r\n '@apply stroke-dark-primary': {},\r\n },\r\n },\r\n '&:hover .ql-fill, &:focus-visible .ql-fill': {\r\n '@apply fill-dark-primary': {},\r\n },\r\n '&:hover .ql-stroke, &:focus-visible .ql-stroke': {\r\n '@apply stroke-dark-primary': {},\r\n },\r\n '&:hover .tooltip-container, &:focus-visible .tooltip-container': {\r\n '@apply visible opacity-100': {},\r\n },\r\n },\r\n\r\n '&.ql-disabled': {\r\n '@apply border-input-field-outline-disabled': {},\r\n '.ql-fill': {\r\n '@apply fill-dark-disabled': {},\r\n },\r\n '.ql-stroke': {\r\n '@apply stroke-dark-disabled': {},\r\n },\r\n button: {\r\n '@apply bg-background-200 text-dark-disabled cursor-default': {},\r\n '&.ql-active': {\r\n '@apply bg-background-200 text-dark-disabled': {},\r\n },\r\n '&:hover': {\r\n '@apply bg-background-200 text-dark-disabled': {},\r\n },\r\n '&:hover .ql-fill': {\r\n '@apply fill-dark-disabled': {},\r\n },\r\n '&:hover .ql-stroke': {\r\n '@apply stroke-dark-disabled': {},\r\n },\r\n '&:hover .tooltip-container': {\r\n '@apply hidden opacity-0': {},\r\n },\r\n },\r\n },\r\n },\r\n\r\n '.ql-container.ql-snow': {\r\n '@apply border-input-field-outline rounded-b-xl': {},\r\n ':focus-visible': {\r\n '@apply ring-[.2rem] ring-ring ring-offset-0 outline-0 rounded-b-xl': {},\r\n },\r\n '&.disable-toolbar': {\r\n '@apply rounded-t-xl': {},\r\n ':focus-visible': {\r\n '@apply rounded-t-xl': {},\r\n },\r\n },\r\n '&.ql-disabled': {\r\n '@apply bg-input-field-surface-disabled border-input-field-outline-disabled': {},\r\n },\r\n },\r\n\r\n // Scale controls\r\n '.sk-texteditor-scale': {\r\n '@apply absolute right-2 top-0 h-[4rem] flex items-center gap-2 z-10': {},\r\n },\r\n '.sk-texteditor-scale-button': {\r\n '@apply h-[3.2rem] w-[3.2rem] rounded-10 text-dark-primary flex items-center justify-center': {},\r\n '&:hover': {\r\n '@apply bg-tertiary-surface-hover': {},\r\n },\r\n '&:focus-visible': {\r\n '@apply ring-[.2rem] ring-ring ring-offset-0 outline-0 bg-background-content': {},\r\n },\r\n '&:disabled': {\r\n '@apply text-dark-disabled cursor-default': {},\r\n '&:hover': {\r\n '@apply bg-transparent': {},\r\n },\r\n '&:hover .tooltip-container': {\r\n '@apply hidden opacity-0': {},\r\n },\r\n },\r\n '.tooltip-container': {\r\n '@apply absolute z-10 top-full mt-0 left-1/2 -translate-x-1/2 invisible opacity-0 transition-opacity duration-200 ease-in-out whitespace-nowrap':\r\n {},\r\n },\r\n '&:hover .tooltip-container': {\r\n '@apply visible opacity-100': {},\r\n },\r\n },\r\n '.sk-texteditor-scale-label': {\r\n '@apply text-label-small font-thin text-dark-secondary select-none min-w-[3.6rem] text-center': {},\r\n },\r\n\r\n // Tooltip-text\r\n '.ql-tooltip.ql-editing': {\r\n input: {\r\n '@apply rounded-0': {},\r\n '&:focus-visible': {\r\n '@apply rounded-0': {},\r\n },\r\n },\r\n },\r\n '.ql-snow .ql-tooltip.ql-editing a.ql-action::after': {\r\n content: '\"Spara\"',\r\n },\r\n '.ql-snow .ql-tooltip[data-mode=link]::before': {\r\n content: '\"Ange länk:\"',\r\n },\r\n '.ql-snow .ql-tooltip::before': {\r\n content: '\"Besök URL:\"',\r\n },\r\n '.ql-snow .ql-tooltip a.ql-action::after': {\r\n content: '\"Ändra\"',\r\n },\r\n '.ql-snow .ql-tooltip a.ql-remove::before': {\r\n content: '\"Ta bort\"',\r\n },\r\n },\r\n});\r\n"],"names":["TextEditor","svg","button","input","content"],"mappings":"AAAA,OAAO,MAAMA,aAAa,IAAO,CAAA;QAC/B,kBAAkB;YAChB,mBAAmB,CAAC;YACpB,uBAAuB;gBACrB,oGAAoG,CAAC;gBACrG,cAAc;oBACZ,8BAA8B,CAAC;gBACjC;gBACA,YAAY;oBACV,4BAA4B,CAAC;gBAC/B;gBACA,eAAe;oBACb,uDAAuD,CAAC;gBAC1D;gBACA,sBAAsB;oBACpB,kJACE,CAAC;gBACL;gBACA,eAAe;oBACb,iCAAiC,CAAC;gBACpC;gBAEAC,KAAK;oBACH,gCAAgC,CAAC;gBACnC;gBAEAC,QAAQ;oBACN,6DAA6D,CAAC;oBAC9D,kCAAkC;wBAChC,oCAAoC,CAAC;oBACvC;oBACA,mBAAmB;wBACjB,+EAA+E,CAAC;oBAClF;oBAEA,eAAe;wBACb,oCAAoC,CAAC;wBACrC,YAAY;4BACV,4BAA4B,CAAC;wBAC/B;wBACA,cAAc;4BACZ,8BAA8B,CAAC;wBACjC;oBACF;oBACA,8CAA8C;wBAC5C,4BAA4B,CAAC;oBAC/B;oBACA,kDAAkD;wBAChD,8BAA8B,CAAC;oBACjC;oBACA,kEAAkE;wBAChE,8BAA8B,CAAC;oBACjC;gBACF;gBAEA,iBAAiB;oBACf,8CAA8C,CAAC;oBAC/C,YAAY;wBACV,6BAA6B,CAAC;oBAChC;oBACA,cAAc;wBACZ,+BAA+B,CAAC;oBAClC;oBACAA,QAAQ;wBACN,8DAA8D,CAAC;wBAC/D,eAAe;4BACb,+CAA+C,CAAC;wBAClD;wBACA,WAAW;4BACT,+CAA+C,CAAC;wBAClD;wBACA,oBAAoB;4BAClB,6BAA6B,CAAC;wBAChC;wBACA,sBAAsB;4BACpB,+BAA+B,CAAC;wBAClC;wBACA,8BAA8B;4BAC5B,2BAA2B,CAAC;wBAC9B;oBACF;gBACF;YACF;YAEA,yBAAyB;gBACvB,kDAAkD,CAAC;gBACnD,kBAAkB;oBAChB,sEAAsE,CAAC;gBACzE;gBACA,qBAAqB;oBACnB,uBAAuB,CAAC;oBACxB,kBAAkB;wBAChB,uBAAuB,CAAC;oBAC1B;gBACF;gBACA,iBAAiB;oBACf,8EAA8E,CAAC;gBACjF;YACF;YAEA,iBAAiB;YACjB,wBAAwB;gBACtB,uEAAuE,CAAC;YAC1E;YACA,+BAA+B;gBAC7B,8FAA8F,CAAC;gBAC/F,WAAW;oBACT,oCAAoC,CAAC;gBACvC;gBACA,mBAAmB;oBACjB,+EAA+E,CAAC;gBAClF;gBACA,cAAc;oBACZ,4CAA4C,CAAC;oBAC7C,WAAW;wBACT,yBAAyB,CAAC;oBAC5B;oBACA,8BAA8B;wBAC5B,2BAA2B,CAAC;oBAC9B;gBACF;gBACA,sBAAsB;oBACpB,kJACE,CAAC;gBACL;gBACA,8BAA8B;oBAC5B,8BAA8B,CAAC;gBACjC;YACF;YACA,8BAA8B;gBAC5B,gGAAgG,CAAC;YACnG;YAEA,eAAe;YACf,0BAA0B;gBACxBC,OAAO;oBACL,oBAAoB,CAAC;oBACrB,mBAAmB;wBACjB,oBAAoB,CAAC;oBACvB;gBACF;YACF;YACA,sDAAsD;gBACpDC,SAAS;YACX;YACA,gDAAgD;gBAC9CA,SAAS;YACX;YACA,gCAAgC;gBAC9BA,SAAS;YACX;YACA,2CAA2C;gBACzCA,SAAS;YACX;YACA,4CAA4C;gBAC1CA,SAAS;YACX;QACF;IACF,CAAA,EAAG"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export declare const TextEditor: () => {
|
|
2
2
|
'.sk-texteditor': {
|
|
3
|
+
'@apply relative': {};
|
|
3
4
|
'.ql-toolbar.ql-snow': {
|
|
4
5
|
'@apply flex items-center bg-background-200 rounded-t-xl border-input-field-outline h-[4rem] pl-4': {};
|
|
5
6
|
'.ql-stroke': {
|
|
@@ -90,6 +91,36 @@ export declare const TextEditor: () => {
|
|
|
90
91
|
'@apply bg-input-field-surface-disabled border-input-field-outline-disabled': {};
|
|
91
92
|
};
|
|
92
93
|
};
|
|
94
|
+
'.sk-texteditor-scale': {
|
|
95
|
+
'@apply absolute right-2 top-0 h-[4rem] flex items-center gap-2 z-10': {};
|
|
96
|
+
};
|
|
97
|
+
'.sk-texteditor-scale-button': {
|
|
98
|
+
'@apply h-[3.2rem] w-[3.2rem] rounded-10 text-dark-primary flex items-center justify-center': {};
|
|
99
|
+
'&:hover': {
|
|
100
|
+
'@apply bg-tertiary-surface-hover': {};
|
|
101
|
+
};
|
|
102
|
+
'&:focus-visible': {
|
|
103
|
+
'@apply ring-[.2rem] ring-ring ring-offset-0 outline-0 bg-background-content': {};
|
|
104
|
+
};
|
|
105
|
+
'&:disabled': {
|
|
106
|
+
'@apply text-dark-disabled cursor-default': {};
|
|
107
|
+
'&:hover': {
|
|
108
|
+
'@apply bg-transparent': {};
|
|
109
|
+
};
|
|
110
|
+
'&:hover .tooltip-container': {
|
|
111
|
+
'@apply hidden opacity-0': {};
|
|
112
|
+
};
|
|
113
|
+
};
|
|
114
|
+
'.tooltip-container': {
|
|
115
|
+
'@apply absolute z-10 top-full mt-0 left-1/2 -translate-x-1/2 invisible opacity-0 transition-opacity duration-200 ease-in-out whitespace-nowrap': {};
|
|
116
|
+
};
|
|
117
|
+
'&:hover .tooltip-container': {
|
|
118
|
+
'@apply visible opacity-100': {};
|
|
119
|
+
};
|
|
120
|
+
};
|
|
121
|
+
'.sk-texteditor-scale-label': {
|
|
122
|
+
'@apply text-label-small font-thin text-dark-secondary select-none min-w-[3.6rem] text-center': {};
|
|
123
|
+
};
|
|
93
124
|
'.ql-tooltip.ql-editing': {
|
|
94
125
|
input: {
|
|
95
126
|
'@apply rounded-0': {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sk-web-gui/core",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.4.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/cjs/index.js",
|
|
@@ -41,5 +41,5 @@
|
|
|
41
41
|
"mini-svg-data-uri": "^1.4.4",
|
|
42
42
|
"tailwindcss": "^3.4.17"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "b607874618eacbdc95fced20bf0b3ceefa4bd965"
|
|
45
45
|
}
|