@thestarweb/ui 1.5.2 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thestarweb/ui",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "A UI lib",
   "scripts": {
     "build": "vue-cli-service build --target lib --name star-ui --dest dist/ src/main.ts",

package/src/components/button.vue

@@ -1,5 +1,5 @@
 <template>
-	<button :class="['star-ui', 'star-ui-container', 'star-ui-button','star-ui-size-'+size]">
+	<button :class="['star-ui', 'su-container', 'star-ui-container', 'star-ui-button', 'star-ui-size-'+size]">
 		<slot></slot>
 	</button>
 </template>

package/src/components/calendar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui star-ui-calendar">
+	<div class="star-ui su-calendar star-ui-calendar">
 		<div class="star-ui-calendar--ctrl" :style="{opacity: showSelYear||showSelMonth?0:1}">
 			<div @click="dYear--">&lt;&lt;</div>
 			<div @click="dMonth--">&lt;</div>
@@ -12,11 +12,11 @@
 			<div @click="dYear++">&gt;&gt;</div>
 		</div>
 		<table cellspacing="0" cellpadding="0" :style="{opacity: showSelYear||showSelMonth?0:1}">
-			<tr class="su-calendar--inner-head">
-				<th :class="`su-calendar--${item.week}`" v-for="(item,index) in displayHead" :key="index">{{item.display}}</th>
+			<tr class="star-ui-calendar--inner-head">
+				<th :class="`star-ui-calendar--${item.week}`" v-for="(item,index) in displayHead" :key="index">{{item.display}}</th>
 			</tr>
 			<tr v-for="(row,index) in displayData" :key="index">
-				<td v-for="(day,index) in row" :key="index" :class="['su-calendar--inner-cell',`su-calendar--${day.week}`,{'su-calendar--previous':day.isPrevious,'su-calendar--next':day.isNext}]" @clcik="dateClick(day)">
+				<td v-for="(day,index) in row" :key="index" :class="['star-ui-calendar--inner-cell',`star-ui-calendar--${day.week}`,{'star-ui-calendar--previous':day.isPrevious,'star-ui-calendar--next':day.isNext}]" @clcik="dateClick(day)">
 					
 					<slot v-if="$slots['default']" v-bind="day" />
 					<vnodes v-else-if="renderCell" :func="renderCell" :args="[day]" />
@@ -189,17 +189,17 @@ export default class SuCalendar extends Vue {
 .star-ui-calendar th,.star-ui-calendar td{
 	padding: 5px 0;
 }
-.su-calendar--inner-head{
+.star-ui-calendar--inner-head{
 	background-color: var(--star-ui-table-head-color);
 }
-.su-calendar--inner-cell{
+.star-ui-calendar--inner-cell{
 	border: 1px solid #e8eaec;
 	width: 42px
 }
-.su-calendar--inner-cell.su-calendar--Sat,.su-calendar--inner-cell.su-calendar--Sun{
+.star-ui-calendar--inner-cell.star-ui-calendar--Sat,.star-ui-calendar--inner-cell.star-ui-calendar--Sun{
 	color: #f00;
 }
-.su-calendar--inner-cell.su-calendar--previous,.su-calendar--inner-cell.su-calendar--next{
+.star-ui-calendar--inner-cell.star-ui-calendar--previous,.star-ui-calendar--inner-cell.star-ui-calendar--next{
 	opacity: 0.5;
 }
 

package/src/components/card.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui star-ui-card">
+	<div class="star-ui su-card star-ui-card">
 		<div v-if="title!=''||collapsible||this.$slots.title" class="star-ui star-ui-container star-ui-card--inner-head">
 			<div class="star-ui star-ui-card--inner-title">{{title}}</div>
 			<button v-if="collapsible" :class="['star-ui','star-ui-card--inner-button-collapsible',isCollaps?'show':'hidden']" @click="collapsChange"></button>

package/src/components/common/base-popper.vue

@@ -8,15 +8,16 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import { SuViewCtrlInjectIsMobile } from "@ui-root/outher";
-import { Emit, Prop } from "@ui-root/reg";
+import { Vue } from 'vue-class-component';
+import { SuViewCtrlInjectClassName, SuViewCtrlInjectIsMobile } from "@ui-root/outher";
+import { Emit, Prop, Register } from "@ui-root/reg";
 
 import "../../global-style.css";
 let nowId=0;
 
-@Options({
+@Register({
 	name:"su-base-popper",
+	internalOnly:true,
 	props: {
 		fromItem:{
 			type:Object
@@ -89,6 +90,8 @@ export default class SuButton extends Vue {
 			if(this.syncRequestId)cancelAnimationFrame(this.syncRequestId);
 		}
 	}
+	@SuViewCtrlInjectClassName
+	readonly ctrlClass!:string[];
 	updatePos():void{
 		if(this.fromItem){
 			let dom=(this.fromItem instanceof HTMLElement)?this.fromItem:this.fromItem.$el;
@@ -97,9 +100,9 @@ export default class SuButton extends Vue {
 				this.div.style.left="0";
 				this.div.style.width="100%";
 				// this.div.style.height="100%";
-				this.div.className="star-ui su-view-control su-view-control-mobile";
+				this.div.className=this.ctrlClass.join(' ');
 			}else{
-				this.div.className="star-ui su-view-control su-view-control-pc";
+				this.div.className=this.ctrlClass.join(' ');
 				const height=dom.clientHeight;
 				let top=0,left=0;
 				while(dom&&dom!=document){

package/src/components/form/form/form-item.vue

@@ -0,0 +1,96 @@
+<template>
+	<div :class="`star-ui su-form-item star-ui-form-item star-ui-col-${col} star-ui-form--label-align-${labelAlign||pLabelAlign}`">
+		<div class="start-ui star-ui-container star-ui-form-item--label" :style="labelStyle">
+			{{label}}
+			<slot name="label"></slot>
+		</div>
+		<div class="start-ui star-ui-container star-ui-form-item--content">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { Vue } from "vue-class-component";
+import { Inject } from "vue-property-decorator";
+import { Register, Prop } from "@ui-root/reg";
+import { TypeFormLabelAlign } from "@ui-root/outher";
+
+import "@ui-root/global-style.css";
+
+export const InjectLabelWidth = Symbol('InjectLabelWidth');
+export const InjectLabelAlign = Symbol('InjectLabelAlign');
+
+@Register({
+	name:"su-form-item",
+	hideInDoc:true,
+})
+export default class SuButton extends Vue {
+	@Prop({
+		type:String,
+		default:()=>{
+			return 'label';
+		}
+	})
+	readonly label!:string;
+	@Prop({
+		type:[String, Number],
+	})
+	readonly labelWidth!:string|number|undefined;
+	@Inject({from:InjectLabelWidth})
+	readonly pLabelWidth!:string|number|undefined;
+	@Prop({
+		autoType: "FormLabelAlign",
+	})
+	readonly labelAlign!:TypeFormLabelAlign;
+	@Inject({from:InjectLabelAlign,default:"right"})
+	readonly pLabelAlign!:TypeFormLabelAlign;
+	@Prop({
+		type:Number,
+		default:()=>{
+			return 24;
+		}
+	})
+	readonly col!:number;
+	private get labelStyle():Record<string, unknown>{
+		const ret:Record<string, unknown>={};
+		const labelWidth = this.labelWidth || this.pLabelWidth;
+		if(labelWidth){
+			ret.width=typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth;
+		}
+		return ret;
+	}
+	created(){
+		console.log(this.col);
+	}
+}
+</script>
+
+<style>
+.star-ui-form-item{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	overflow: hidden;
+}
+.star-ui-form-item--label{
+	overflow: hidden;
+}
+.star-ui-form-item--content{
+	flex: 1;
+}
+.star-ui-form-item--content>.star-ui-select,.star-ui-form-item--content>.star-ui-input{
+	width: 100%;
+}
+
+.star-ui-form--label-align-left .star-ui-form-item--label, .star-ui-form--label-align-top .star-ui-form-item--label{
+	text-align: left;
+}
+.star-ui-form--label-align-right .star-ui-form-item--label{
+	text-align: right;
+}
+.star-ui-form-item.star-ui-form--label-align-top{
+	flex-direction: column;
+	align-items: stretch;
+}
+</style>

package/src/components/form/form/form.vue

@@ -0,0 +1,51 @@
+<template>
+	<form :class="`star-ui su-form star-ui-form ${allowAotoMobile?'star-ui-form--auto-mobile':''}`">
+		<slot></slot>
+	</form>
+</template>
+
+<script lang="ts">
+import { Vue } from "vue-class-component";
+import { Register, Prop } from "@ui-root/reg";
+import type { TypeFormLabelAlign } from "@ui-root/outher";
+
+import "@ui-root/global-style.css";
+import { Provide } from "vue-property-decorator";
+import { InjectLabelAlign, InjectLabelWidth } from "./form-item.vue";
+
+@Register({
+	name:"su-form"
+})
+export default class SuButton extends Vue {
+	@Prop({
+		autoType: "FormLabelAlign",
+		default:()=>{
+			return "right"
+		}
+	})
+	@Provide({to:InjectLabelAlign})
+	readonly labelAlign!:TypeFormLabelAlign;
+	@Prop({
+		type: Number
+	})
+	@Provide({to:InjectLabelWidth})
+	readonly labelWidth!:number|undefined;
+	@Prop({
+		type: Boolean,
+		default:()=>{
+			return true
+		}
+	})
+	readonly allowAotoMobile!:boolean;
+}
+</script>
+<style>
+.star-ui-form{
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+.star-ui-view-control.star-ui-view-control-mobile .star-ui-form--auto-mobile>.star-ui-form-item{
+	width: 100%;
+}
+</style>

package/src/components/form/form/index.ts

@@ -0,0 +1,2 @@
+export { default as SuForm } from "./form.vue";
+export { default as SuFormItem } from "./form-item.vue";

package/src/components/form/index.ts

@@ -0,0 +1 @@
+export * from "./form/index";

package/src/components/input.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="['star-ui','star-ui-input',{'is-focus':isFocused}]">
+	<div :class="['star-ui', 'su-input','star-ui-input',{'is-focus':isFocused}]">
 		<input type="text" ref="input" :value="modelValue" :name="name" :class="['star-ui','star-ui-input--inner','star-ui-size-'+size]" @input.stop="handleInput" @focus="handleFocus" @blur="handleBlur">
 	</div>
 </template>
@@ -76,5 +76,6 @@ export default class SuInput extends Vue {
 	flex:1;
 	color: unset;
 	background: unset;
+	width: 100%;
 }
 </style>

package/src/components/layout-h.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui su-h-layout">
+	<div class="star-ui su-h-layout star-ui-h-layout">
 		<slot></slot>
 	</div>
 </template>
@@ -17,7 +17,7 @@ export default class SuHLayout extends Vue {
 </script>
 
 <style>
-.su-h-layout{
+.star-ui-h-layout{
 	display: flex;
 	flex-direction: row;
 	width: 100%;
@@ -25,10 +25,10 @@ export default class SuHLayout extends Vue {
 	padding: 0;
 	overflow: hidden;
 }
-.su-h-layout>*{
+.star-ui-h-layout>*{
 	flex:0 0 auto;
 }
-.su-h-layout>.su-main{
+.star-ui-h-layout>.star-ui-main{
 	width: 0;
 }
 </style>

package/src/components/layout-main.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui su-main">
+	<div class="star-ui su-main star-ui-main">
 		<slot></slot>
 	</div>
 </template>
@@ -19,7 +19,7 @@ export default class SuMain extends Vue {
 </script>
 
 <style>
-.su-main{
+.star-ui-main{
 	flex: 1;
 }
 </style>

package/src/components/layout-v.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui su-v-layout">
+	<div class="star-ui su-v-layout star-ui-v-layout">
 		<slot></slot>
 	</div>
 </template>
@@ -19,7 +19,7 @@ export default class SuVLayout extends Vue {
 </script>
 
 <style>
-.su-v-layout{
+.star-ui-v-layout{
 	display: flex;
 	flex-direction: column;
 	width: 100%;
@@ -27,10 +27,10 @@ export default class SuVLayout extends Vue {
 	padding: 0;
 	overflow: hidden;
 }
-.su-v-layout>*{
+.star-ui-v-layout>*{
 	flex:0 0 auto;
 }
-.su-v-layout>.su-main{
+.star-ui-v-layout>.star-ui-main{
 	height: 0;
 }
 </style>

package/src/components/line-h.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui su-h-line"></div>
+	<div class="star-ui su-h-line star-ui-h-line"></div>
 </template>
 
 <script lang="ts">
@@ -17,7 +17,7 @@ export default class SuHLine extends Vue {
 </script>
 
 <style>
-.su-h-line{
+.star-ui-h-line{
 	background-color:var(--star-ui-line-color);
 	width:100%;
 	height:var(--star-ui-line-width);

package/src/components/line-v.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="star-ui su-v-line"></div>
+	<div class="star-ui su-v-line star-ui-v-line"></div>
 </template>
 
 <script lang="ts">
@@ -17,7 +17,7 @@ export default class SuVLine extends Vue {
 </script>
 
 <style>
-.su-v-line{
+.star-ui-v-line{
 	background-color:var(--star-ui-line-color);
 	/*height:100%;*/
 	width:var(--star-ui-line-width);

package/src/components/menu/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<component :is="menuComponent" :menu="menu" class="su-menu">
+	<component :is="menuComponent" :menu="menu" class="star-ui su-menu star-ui-menu">
 		<template v-slot="data">
 			<div @click="handleItemClick(data)">
 				<slot v-if="$slots['default']" v-bind="data" />
@@ -79,7 +79,7 @@ export default class SuHMenu extends Vue {
 
 </script>
 <style>
-.su-menu a{
+.star-ui-menu a{
 	color: inherit;
 	text-decoration: none;
 }

package/src/components/select.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="['star-ui','star-ui-select',{'is-focus':isFocused}]" @click="isFocused=!isFocused">
+	<div :class="['star-ui', 'su-select','star-ui-select',{'is-focus':isFocused}]" @click="isFocused=!isFocused">
 		<!-- 原生组件 -->
 		<select :name="name" style="display: none"></select>
 		<input v-if="false" type="text" :value="1" class="star-ui star-ui-select--inner">
@@ -240,26 +240,26 @@ export default class SuSelect extends Vue {
 	font-weight: bold;
 	padding: var(--star-ui-default-padding);
 }
-.su-view-control-mobile .star-ui-select--pooper{
+.star-ui-view-control-mobile .star-ui-select--pooper{
 	width: 100%;
 }
-.su-view-control.su-view-control-mobile .star-ui-select--pooper{
+.star-ui-view-control.star-ui-view-control-mobile .star-ui-select--pooper{
 	border-radius: 0;
 	border-width: 0;
 }
-.su-view-control.su-view-control-mobile .star-ui-select--option{
+.star-ui-view-control.star-ui-view-control-mobile .star-ui-select--option{
 	border-radius: 0;
 	padding-left: 10px;
 	border-left: 5px solid transparent;
 	border-top: 1px solid var(--star-ui-input-border-color);
 	line-height: 1.5;
 }
-.su-view-control.su-view-control-mobile .star-ui-select--option-sel{
+.star-ui-view-control.star-ui-view-control-mobile .star-ui-select--option-sel{
 	background: initial;
 	color: var(--star-ui-base-color);
 	border-left: 5px solid var(--star-ui-base-color);
 }
-.su-view-control-mobile .star-ui-select--pooper-item-list.star-ui-size-medium{
+.star-ui-view-control-mobile .star-ui-select--pooper-item-list.star-ui-size-medium{
 	max-height: 50vh;
 }
 </style>

package/src/components/switch.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="['star-ui','star-ui-switch','star-ui-size-'+size]">
+	<div :class="['star-ui', 'su-switch','star-ui-switch','star-ui-size-'+size]">
 		<label>
 			<input ref="input" type="checkbox" :name="name" :checked="modelValue" @change="handeleChange"/>
 			<div><span></span></div>

package/src/components/table.vue

@@ -1,14 +1,14 @@
 <template>
-	<div class="star-ui su-table">
-		<table class="star-ui su-table--inner" rules="none" frame="void">
-			<thead class="star-ui su-table--inner-thead">
-				<tr class="star-ui su-table--inner-tr">
-					<th v-for="item in columns" :key="item.name+item.key" class="star-ui star-ui-container su-table--inner-th">{{item.name}}</th>
+	<div class="star-ui su-table star-ui-table">
+		<table class="star-ui star-ui-table--inner" rules="none" frame="void">
+			<thead class="star-ui star-ui-table--inner-thead">
+				<tr class="star-ui star-ui-table--inner-tr">
+					<th v-for="item in columns" :key="item.name+item.key" class="star-ui star-ui-container star-ui-table--inner-th">{{item.name}}</th>
 				</tr>
 			</thead>
-			<tbody class="star-ui su-table--inner-tbody">
-				<tr v-for="(row,index) in data" :key="index" class="star-ui su-table--inner-tr">
-					<td v-for="item in columns" :key="item.name+item.key" class="star-ui star-ui-container su-table--inner-td">{{row[item.field]}}</td>
+			<tbody class="star-ui star-ui-table--inner-tbody">
+				<tr v-for="(row,index) in data" :key="index" class="star-ui star-ui-table--inner-tr">
+					<td v-for="item in columns" :key="item.name+item.key" class="star-ui star-ui-container star-ui-table--inner-td">{{row[item.field]}}</td>
 				</tr>
 				<slot></slot>
 			</tbody>
@@ -47,13 +47,13 @@ export default class SuTable extends Vue {
 </script>
 
 <style>
-.su-tabl{
+.star-ui-tabl{
 	width: 100%;
 }
-.su-table--inner-thead{
+.star-ui-table--inner-thead{
 	background-color: var(--star-ui-table-head-color);
 }
-.su-table--inner-tr{
+.star-ui-table--inner-tr{
 	border-bottom: 1px solid #e8eaec;
 }
 </style>

package/src/components/tree/index.vue

@@ -1,6 +1,7 @@
 <template>
 	<div :class="[
 		'star-ui',
+		'su-tree',
 		'star-ui-tree',
 		{
 			'star-ui-tree-highlight-current':highlightCurrent

package/src/components/view-control.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="['star-ui', 'su-view-control', $isMobile?'su-view-control-mobile':'su-view-control-pc']">
+	<div :class="['star-ui', className]">
 		<slot></slot>
 	</div>
 </template>
@@ -8,7 +8,7 @@
 import { Vue } from 'vue-class-component';
 
 import { Register, Prop } from "@ui-root/reg";
-import { SuViewCtrlInjectKeyIsMobile } from "@ui-root/outher";
+import { SuViewCtrlInjectKeyClassName, SuViewCtrlInjectKeyIsMobile } from "@ui-root/outher";
 import { Provide } from "vue-property-decorator";
 import "../global-style.css";
 
@@ -17,26 +17,11 @@ type DeviceType='auto'|'mobile'|'pc';
 
 @Register({
 	name:"su-view-control",
-	watch:{
-		$isMobile(newValue){
-			//this.sendData.isMobile = newValue;
-		}
-	},
-	// provide() {
-	// 	return {
-	// 		viewCtrlInfo: this.sendData
-	// 	}
-	// },
-	// created(){
-	// 	this.sendData.isMobile = this.$isMobile;
-	// }
 })
 export default class SuViewControl extends Vue {
 	mounted():void{
 		this.$el._vue = this;
 	}
-	// @Provide({to:SuViewCtrlInjectKeyIsMobile})
-	// isMobile=false;
 	@Prop({
 		type: String,
 		default: "auto",
@@ -76,6 +61,15 @@ export default class SuViewControl extends Vue {
 		}
 		return false;
 	}
+	@Provide({to:SuViewCtrlInjectKeyClassName})
+	public get className():string[]{
+		return [
+			'su-view-control',
+			'star-ui-view-control',
+			`star-ui-view-control-${this.$isMobile?'mobile':'pc'}`,
+			`su-view-control-${this.$isMobile?'mobile':'pc'}`
+		];
+	}
 	beforeMount(){
 		this.checkWindowSize();
 		window.addEventListener("resize", this.checkWindowSize);

package/src/global-style.css

@@ -50,4 +50,76 @@
 	line-height: var(--star-ui-input-mini-font-size);
 	padding: calc(var(--star-ui-default-padding) / 2);
 	border-radius: calc(var(--star-ui-border-radius) / 2);
-}
+}
+.star-ui-col-1{
+	width: calc(100% / 24 * 1);
+}
+.star-ui-col-2{
+	width: calc(100% / 24 * 2);
+}
+.star-ui-col-3{
+	width: calc(100% / 24 * 3);
+}
+.star-ui-col-4{
+	width: calc(100% / 24 * 4);
+}
+.star-ui-col-5{
+	width: calc(100% / 24 * 5);
+}
+.star-ui-col-6{
+	width: calc(100% / 24 * 6);
+}
+.star-ui-col-7{
+	width: calc(100% / 24 * 7);
+}
+.star-ui-col-8{
+	width: calc(100% / 24 * 8);
+}
+.star-ui-col-9{
+	width: calc(100% / 24 * 9);
+}
+.star-ui-col-10{
+	width: calc(100% / 24 * 10);
+}
+.star-ui-col-11{
+	width: calc(100% / 24 * 11);
+}
+.star-ui-col-12{
+	width: calc(100% / 24 * 12);
+}
+.star-ui-col-13{
+	width: calc(100% / 24 * 13);
+}
+.star-ui-col-14{
+	width: calc(100% / 24 * 14);
+}
+.star-ui-col-15{
+	width: calc(100% / 24 * 15);
+}
+.star-ui-col-16{
+	width: calc(100% / 24 * 16);
+}
+.star-ui-col-17{
+	width: calc(100% / 24 * 17);
+}
+.star-ui-col-18{
+	width: calc(100% / 24 * 18);
+}
+.star-ui-col-19{
+	width: calc(100% / 24 * 19);
+}
+.star-ui-col-20{
+	width: calc(100% / 24 * 20);
+}
+.star-ui-col-21{
+	width: calc(100% / 24 * 22);
+}
+.star-ui-col-22{
+	width: calc(100% / 24 * 22);
+}
+.star-ui-col-23{
+	width: calc(100% / 24 * 23);
+}
+.star-ui-col-24{
+	width: calc(100% / 24 * 24);
+}

package/src/main.ts

@@ -8,6 +8,7 @@ export { default as SuVLine } from "./components/line-v.vue";
 export { default as SuCard } from "./components/card.vue";
 export { default as SuTree } from "./components/tree/index.vue";
 //表单
+export * from "./components/form";
 export { default as SuInput } from "./components/input.vue";
 export { default as SuSelect } from "./components/select.vue";
 export { default as SuButton } from "./components/button.vue";

package/src/outher/index.ts

@@ -1,4 +1,8 @@
 import { Inject } from "vue-property-decorator";
 
 export const SuViewCtrlInjectKeyIsMobile=Symbol('SuViewCtrlInjectKeyIsMobile');
-export const SuViewCtrlInjectIsMobile = Inject({from:SuViewCtrlInjectKeyIsMobile,default:false})
+export const SuViewCtrlInjectIsMobile = Inject({from:SuViewCtrlInjectKeyIsMobile,default:false});
+export const SuViewCtrlInjectKeyClassName=Symbol('SuViewCtrlInjectKeyClassName');
+export const SuViewCtrlInjectClassName = Inject({from:SuViewCtrlInjectKeyClassName,default:[]});
+
+export type TypeFormLabelAlign = 'left'|'right'|'top'|undefined;