@medyll/idae-slotui-svelte 0.67.0 → 0.69.0

package/dist/controls/textfield/TextField.svelte

@@ -1,50 +1,58 @@
 <svelte:options />
 
-<script lang="ts">import { popper } from "../../ui/popper/usePopper.js";
-import Button from "../button/Button.svelte";
-import Icon from "../../base/icon/Icon.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-let inputType = "text";
-export { inputType as type };
-let {
-  class: className = "",
-  element = $bindable(),
-  style,
-  icon,
-  iconColor = "#666",
-  endIcon,
-  endIconColor = "#666",
-  usePopper,
-  width = $bindable(),
-  tall = "default",
-  borderless = false,
-  transparent = false,
-  value = $bindable(),
-  children,
-  inputFirst,
-  inputLast,
-  ...rest
-} = $props();
-let niceIconStyle = $state("");
-niceIconStyle += icon || inputFirst ? "padding-left:2.2rem;" : "";
-niceIconStyle += endIcon || inputLast ? "padding-right:2.2rem;" : "";
-if (usePopper) {
-  usePopper.disabled = false;
-  usePopper.parentNode = element;
-} else {
-  usePopper = { disabled: true };
-}
+<script lang="ts">
+	import { popper } from '../../ui/popper/usePopper.js';
+	import Button from '../button/Button.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import type { TextFieldProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+
+	let inputType = 'text';
+	export { inputType as type };
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style,
+		icon,
+		iconColor = '#666',
+		endIcon,
+		endIconColor = '#666',
+		usePopper,
+		width = $bindable(),
+		tall = 'default',
+		borderless = false,
+		transparent = false,
+		value = $bindable(),
+		children,
+		inputFirst,
+		inputLast,
+		...rest
+	}: ExpandProps<TextFieldProps> & Partial<HTMLInputElement> = $props();
+
+	let niceIconStyle = $state('');
+
+	niceIconStyle += icon || inputFirst ? 'padding-left:2.2rem;' : '';
+	niceIconStyle += endIcon || inputLast ? 'padding-right:2.2rem;' : '';
+
+	if (usePopper) {
+		usePopper.disabled = false;
+		usePopper.parentNode = element;
+	} else {
+		usePopper = { disabled: true };
+	}
 </script>
 
-<div class="textfield-container">
-	<div class="textfield-start">
+<div class="slotui-textfield-container">
+	<div class="slotui-textfield-start">
 		<Slotted child={inputFirst}>
 			<Icon {icon} style="max-width:100%;max-height:100%;color:{iconColor}" />
 		</Slotted>
 	</div>
 
 	{#if inputLast || endIcon || inputType === 'search'}
-		<div class="textfield-end">
+		<div class="slotui-textfield-end">
 			{#if inputLast || endIcon}
 				<Slotted child={inputLast}>
 					<Icon icon={endIcon} style="max-width:100%;max-height:100%;color:{endIconColor}" />
@@ -67,7 +75,7 @@ if (usePopper) {
 		bind:this={element}
 		use:popper={usePopper}
 		type="text"
-		class="textfield width-{width} tall-{tall} {className}"
+		class="slotui-textfield width-{width} tall-{tall} {className}"
 		style={niceIconStyle + ';' + style}
 		{tall}
 		{width}
@@ -75,7 +83,7 @@ if (usePopper) {
 	/>
 </div>
 
-<style>.textfield {
+<style>.slotui-textfield {
   --textfield-background: var(--sld-color-background-alpha-high);
   --textfield-border-width: 1px;
   --textfield-border-color: var(--sld-color-foreground-alpha-mid);
@@ -86,94 +94,94 @@ if (usePopper) {
   --textfield-shadow: inset 0px 0px 3px 1px rgba(51, 51, 51, 0.1);
 }
 
-.textfield {
-  border: var(--textfield-border-width) solid var(--textfield-border-color);
-  border-bottom: var(--textfield-border-bottom-width) solid var(--textfield-border-bottom-color);
-  border-radius: var(--textfield-radius);
-  padding: var(--textfield-padding);
-  box-shadow: var(--textfield-shadow);
-  background-color: var(--textfield-background);
-  color: var(--sld-color-foreground);
-}
-.textfield [error] {
-  border-bottom: red;
-}
-.textfield {
+.slotui-textfield {
   width: var(--sld-width-small);
 }
-.textfield {
+.slotui-textfield {
   --preset-width: var(--sld-width-small);
 }
-.textfield[width=tiny], .textfield.width-tiny {
+.slotui-textfield[width=tiny], .slotui-textfield.width-tiny {
   --preset-width: var(--sld-width-tiny);
   width: var(--sld-width-tiny) !important;
 }
-.textfield[width=mini], .textfield.width-mini {
+.slotui-textfield[width=mini], .slotui-textfield.width-mini {
   --preset-width: var(--sld-width-mini);
   width: var(--sld-width-mini) !important;
 }
-.textfield[width=small], .textfield.width-small {
+.slotui-textfield[width=small], .slotui-textfield.width-small {
   --preset-width: var(--sld-width-small);
   width: var(--sld-width-small) !important;
 }
-.textfield[width=med], .textfield.width-med {
+.slotui-textfield[width=med], .slotui-textfield.width-med {
   --preset-width: var(--sld-width-med);
   width: var(--sld-width-med) !important;
 }
-.textfield[width=kind], .textfield.width-kind {
+.slotui-textfield[width=kind], .slotui-textfield.width-kind {
   --preset-width: var(--sld-width-kind);
   width: var(--sld-width-kind) !important;
 }
-.textfield[width=full], .textfield.width-full {
+.slotui-textfield[width=full], .slotui-textfield.width-full {
   --preset-width: var(--sld-width-full);
   width: var(--sld-width-full) !important;
 }
-.textfield[width=auto], .textfield.width-auto {
+.slotui-textfield[width=auto], .slotui-textfield.width-auto {
   --preset-width: var(--sld-width-auto);
   width: var(--sld-width-auto) !important;
 }
-.textfield[width=default], .textfield.width-default {
+.slotui-textfield[width=default], .slotui-textfield.width-default {
   --preset-width: var(--sld-width-default);
   width: var(--sld-width-default) !important;
 }
-.textfield {
+.slotui-textfield {
   min-height: var(--preset-tall-small);
   height: var(--preset-tall-small);
 }
-.textfield {
+.slotui-textfield {
   --preset-tall: var(--sld-tall-small);
 }
-.textfield[tall=tiny], .textfield.tall-tiny {
+.slotui-textfield[tall=tiny], .slotui-textfield.tall-tiny {
   min-height: var(--sld-tall-tiny) !important;
 }
-.textfield[tall=mini], .textfield.tall-mini {
+.slotui-textfield[tall=mini], .slotui-textfield.tall-mini {
   min-height: var(--sld-tall-mini) !important;
 }
-.textfield[tall=small], .textfield.tall-small {
+.slotui-textfield[tall=small], .slotui-textfield.tall-small {
   min-height: var(--sld-tall-small) !important;
 }
-.textfield[tall=med], .textfield.tall-med {
+.slotui-textfield[tall=med], .slotui-textfield.tall-med {
   min-height: var(--sld-tall-med) !important;
 }
-.textfield[tall=kind], .textfield.tall-kind {
+.slotui-textfield[tall=kind], .slotui-textfield.tall-kind {
   min-height: var(--sld-tall-kind) !important;
 }
-.textfield[tall=auto], .textfield.tall-auto {
+.slotui-textfield[tall=auto], .slotui-textfield.tall-auto {
   min-height: var(--sld-tall-auto) !important;
 }
-.textfield[tall=default], .textfield.tall-default {
+.slotui-textfield[tall=default], .slotui-textfield.tall-default {
   min-height: var(--sld-tall-default) !important;
 }
-.textfield:hover {
+.slotui-textfield:hover {
   border-color: var(--sld-hover-border-color);
   background-color: var(--sld-background-disabled);
 }
-.textfield-container {
+.slotui-textfield {
+  border: var(--textfield-border-width) solid var(--textfield-border-color);
+  border-bottom: var(--textfield-border-bottom-width) solid var(--textfield-border-bottom-color);
+  border-radius: var(--textfield-radius);
+  padding: var(--textfield-padding);
+  box-shadow: var(--textfield-shadow);
+  background-color: var(--textfield-background);
+  color: var(--sld-color-foreground);
+}
+.slotui-textfield [error] {
+  border-bottom: red;
+}
+.slotui-textfield-container {
   position: relative;
   display: inline-flex;
   overflow: hidden;
 }
-.textfield-start {
+.slotui-textfield-start {
   position: absolute;
   height: 100%;
   max-height: 100%;
@@ -186,7 +194,7 @@ if (usePopper) {
   background-color: rgba(255, 255, 255, 0.1);
   border-radius: var(--textfield-radius, var(--sld-radius-small));
 }
-.textfield-end {
+.slotui-textfield-end {
   position: absolute;
   right: 0;
   height: 100%;
@@ -199,7 +207,7 @@ if (usePopper) {
   align-items: center;
   border-radius: var(--textfield-radius, var(--sld-radius-small));
 }
-.textfield-end > * {
+.slotui-textfield-end > * {
   max-height: calc(100% - 40px) !important;
   border: 1px solid pink;
 }</style>

package/dist/controls/textfield/textfield.scss

@@ -1,5 +1,5 @@
 @use "../../styles/slotui-mixins.scss";
-.textfield {
+.slotui-textfield {
     --textfield-background: var(--sld-color-background-alpha-high);
     --textfield-border-width: 1px;
     --textfield-border-color: var(--sld-color-foreground-alpha-mid);
@@ -10,22 +10,24 @@
     --textfield-shadow: inset 0px 0px 3px 1px rgba(51, 51, 51, 0.1);
 }
 
-.textfield {
-    border: var(--textfield-border-width) solid var(--textfield-border-color);
-    border-bottom: var(--textfield-border-bottom-width) solid var(--textfield-border-bottom-color);
-    border-radius: var(--textfield-radius);
-    padding: var(--textfield-padding);
-    box-shadow: var(--textfield-shadow);
-    background-color: var(--textfield-background);
-    color: var(--sld-color-foreground);
+.slotui-textfield {
+    @include slotui-mixins.ui-width-presets;
+    @include slotui-mixins.ui-tall-presets;
+    @include slotui-mixins.data-hover;
+
+    & {
+        border: var(--textfield-border-width) solid var(--textfield-border-color);
+        border-bottom: var(--textfield-border-bottom-width) solid var(--textfield-border-bottom-color);
+        border-radius: var(--textfield-radius);
+        padding: var(--textfield-padding);
+        box-shadow: var(--textfield-shadow);
+        background-color: var(--textfield-background);
+        color: var(--sld-color-foreground);
+    }
 
     [error] {
         border-bottom: red;
     }
-
-    @include slotui-mixins.ui-width-presets;
-    @include slotui-mixins.ui-tall-presets;
-    @include slotui-mixins.data-hover;
     &-container {
         position: relative;
         display: inline-flex;

package/dist/data/dataList/DataList.demo.svelte

@@ -1,40 +1,47 @@
-<script lang="ts">import DataList from "./DataList.svelte";
-import DataListRow from "./DataListRow.svelte";
-import DataListCell from "./DataListCell.svelte";
-import DataListHead from "./DataListHead.svelte";
-import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
-import Demoer from "../../base/demoer/Demoer.svelte";
-import { parameters, componentArgs } from "./types.js";
-import DemoPage from "../../base/demoer/DemoPage.svelte";
-let data = [...Array(50)].map((caches, index) => {
-  return {
-    id: index,
-    index,
-    name: "name " + index,
-    lastName: "lastName " + index,
-    group: "group-" + getRandomInt(7),
-    groupByArrayObjectKey: [
-      { name: "nested" + getRandomInt(4) },
-      { name: "nested" + getRandomInt(4) }
-    ],
-    groupByObjectKey: { group: "group-" + getRandomInt(4) }
-  };
-});
-let columns = {
-  index: { field: "index" },
-  name: { field: "name", width: "90px" },
-  group: { field: "group" },
-  lastName: {
-    field: "lastName",
-    getter: (data2) => {
-      return data2.lastName + " - getter";
-    }
-  }
-};
-function getRandomInt(max) {
-  return Math.floor(Math.random() * max);
-}
-let isOpen = false;
+<script lang="ts">
+	import DataList from './DataList.svelte';
+	import DataListRow from './DataListRow.svelte';
+	import DataListCell from './DataListCell.svelte';
+	import DataListHead from './DataListHead.svelte';
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import type { DataCellType, DataListProps } from './types.js';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+
+	let data = [...Array(50)].map((caches, index: number) => {
+		return {
+			id: index,
+			index,
+			name: 'name ' + index,
+			lastName: 'lastName ' + index,
+			group: 'group-' + getRandomInt(7),
+			groupByArrayObjectKey: [
+				{ name: 'nested' + getRandomInt(4) },
+				{ name: 'nested' + getRandomInt(4) }
+			],
+			groupByObjectKey: { group: 'group-' + getRandomInt(4) }
+		};
+	});
+
+	let columns: Record<string, Partial<DataCellType>> = {
+		index: { field: 'index' },
+		name: { field: 'name', width: '90px' },
+		group: { field: 'group' },
+		lastName: {
+			field: 'lastName',
+			getter: (data: any) => {
+				return data.lastName + ' - getter';
+			}
+		}
+	};
+
+	function getRandomInt(max: number) {
+		return Math.floor(Math.random() * max);
+	}
+
+	let isOpen = false;
 </script>
 
 <ComponentDemo

package/dist/data/dataList/DataList.preview.svelte

@@ -1,9 +1,11 @@
-<script lang="ts">import DataList from "./DataList.svelte";
-import DataListCell from "./DataListCell.svelte";
-import DataListHead from "./DataListHead.svelte";
-let data = [...Array(200)].map((caches, index) => {
-  return { index, name: "name " + index, otherName: "otherName " + index };
-});
+<script lang="ts">
+	import DataList from './DataList.svelte';
+	import DataListCell from './DataListCell.svelte';
+	import DataListHead from './DataListHead.svelte';
+
+	let data = [...Array(200)].map((caches, index: number) => {
+		return { index, name: 'name ' + index, otherName: 'otherName ' + index };
+	});
 </script>
 
 <div style="height:350px;width:450px;" class="what pos-rel overflow-hidden pad-1">